silencefly的博客

常用坐标系wgs84 坐标系这个是国际上通用的坐标系，也称地球坐标系，gps 和北斗系统都使用的是 wgs 坐标系。谷歌地图使用的是wgs 坐标系（中国部分除外），openstreetmap 使用的也是这种坐标系gcj02 坐标系是由中国国家测绘局制订的地理信息系统的坐标系统。由 WGS84 坐标系经加密后的坐标系，也称火星坐标系，谷歌中国地图、腾讯系地图、高德地图采用的是 GCJ02 地理坐标系。BD09 坐标系即百度坐标系，GCJ02 坐标系经加密后的坐标系，由百度公司独创，百度

前言最近在小程序使用 vant-icon 出现了一个很 zz 得问题，这组件居然不能居中，如下图：这里我写了一个和 vant-icon 同等大小得 view，并让这 view 和 vant-icon 背景显示为红色，很明显就是 vant-icon 不能居中，那用起来就很头疼。下面是我用的代码：wxml<view class="date row-center"> <view style="height:36rpx;width:36rpx;background-color:r

引入有赞 UI 库1、初始化 npm在小程序 package.json 所在的目录（代码根目录）中执行下面命令，进行初始化：npm init ps. 这里一路按 enter 键就可以了，命令窗口可以在目录下通过 shift + 鼠标右键选择 PowerShell 打开 。2、安装 Vant 包在上面的基础上，输入下面命令，安装有赞 UI 库：npm i vant-weapp -S --production如果这里报 rollbackFailedOptional 错误，可以试试修改 npm

最近做小程序的时候用了很多的 canvas，在 page 里面用还是挺简单的，直接像下面就可以：const ctx = wx.createCanvasContext('myCanvas')context.setStrokeStyle("#00ff00")context.setLineWidth(5)context.rect(0, 0, 200, 200)context.stroke()context.draw()但是在组件里面可真是犯傻了，实际也很简单，即使很多地方容易忽略组件中使用 c

最近在解决PC小程序的兼容性问题，首先遇到的就是对小程序的设备类型判断，本来不想写的，毕竟网上一搜一大堆，可是偏偏被坑了，还是写一下吧。代码详情 //获取设备信息 let systemInfo = wx.getSystemInfoSync() that.globalData.systemInfo = systemInfo //获取设备类型 let platform = systemInfo.platform that.globalData.platfor

最近在解决小程序PC版的兼容性问题，其中有个极为拉跨的问题，登录页面的按钮颜色没了！！具体问题看图正确图片问题详情这个问题在移动端和调试工具上是没问题的，那可就神奇了，下面看下原版代码<button class="login-button" disabled="{{!loginable}}" style="background:{{loginable?'#0B7BFBFF':'#D8D8D8'}};color:white" bindtap="{{loginModel==0

继上一篇的《丝滑流畅的手写签名功能》博文才过去没多久，我才发现 canvas 2d 无法在 PC 的小程序中使用，真实白费了我的优化了，还好之前的代码没删掉，原本以为直接简单改改就能用，发现还不是，下面看看吧。先看看效果图鼠标用起来效果不怎么样，但是还是挺流畅的。看看代码主要就看看 Page.js 的代码吧，也就这个不一样，当然 HTML 内的 canvas 标签记得加上 canvas-id，把 type = ‘2d’ 给去掉。// pages/mine/signature/drawCanvas

在最近的小程序项目中，设计师又给我出难题了，需要在小程序里面实现一个手写签名功能，完成后将签名生成文件，上传的服务端去。手写签名不难，难在居然要我生成 svg，还有将签名功能搞得和画板一样，我是不能忍，直呼搞不了。github登不上，下次把我安卓的画板项目贴这，现在先占个位子签名功能实际在我之前的安卓开发中用过，支持笔画的前进、后退、全清除以及图片的导出，真就快做到 生成 SVG 的底部了，要不是我不懂 SVG ，就手撕一个根据 path 路径生成 svg 的代码了。扯远了，小程序和安卓原生比不得

其实小程序上面也可以使用 echart 等开源图表库得，而且支持代码包得裁切功能，但是可能我不会用吧，效果不太好，而且我这就一个图，也没什么交互要写，就手撕了一个环形统计图，也算练习一下 canvas 2d 吧。说到 canvas 2d 可真是头疼，微信官方不知道干嘛吃的，原接口不再维护了，但是 canvas 2d 得文档几乎没有更新，写起来摸不着头脑。如果你也对 canvas 2d 有疑惑，希望这个环形统计图能给你点帮助。下面是 canvas 的官方文档，api使用也挺重要，可以先了解了解。ht

小程序开发之旅（十一）根据链接生成二维码并显示超时效果在项目中有一个使用二维码签到的需求，原理很简单，两个不同的账号登录，生成二维码一方向后台请求一个二维码信息的链接，签到的一方扫描二维码读取信息向后台请求校验。这里和后台对接的部分部件，原理已经说了，下面主要讲讲二维码的生成。先看看效果这个是生成的二维码，点击下面可以刷新。这个是二维码过期时候的样子，使用提示文字覆盖二维码。二维码生成库要编写代码，首先得讲讲二维码到底是怎么生成的，这里使用得是一个别人写好得库，代码有几百行，不太喜欢CSDN

小程序开发之旅（十）下拉刷新和加载更多前面设计底部导航栏的时候已经简单说了下下拉刷新，现在在列表页面里，不仅要下拉刷新还需要上拉加载更多。两种思路实际上实现下拉刷新和上拉加载更多有两种思路：页面事件处理函数第一种是是利用小程序提供的 onPullDownRefresh 和 onReachBottom 方法，这是对于一个 Page 来说的方法，在组件中是没法用的，当然也可以向我前面说的，从页面去调用组件页面自定义的下拉和上拉方法。这里官方文档页面事件处理函数部分写的很详细https://d

小程序开发之旅（九）template实现文字、段落、单选框、日期、图片的输入在小程序开发过程中，很多地方会用到一些相同的需要输入的表弟页面，具体类型有输入单行文字、多行文字、使用单选框选择、使用对话框输入时间、拍摄图片等。这些东西实际都不难，可以抽象起来使用，下面简单说说。先看看效果这是简单用法这是选择日期，使用的是有赞的这个稍微复杂一些，图片支持添加、长按删除以及多图预览看看代码WXML<template name="input"> <view class="

小程序开发之旅（八）banner的使用还记得之前的博客写到了沉浸状态栏的首页吗？为什么要沉浸状态栏，因为设计师说首页最顶部要放自动滚动的banner，还好微信官方给了一个滑动组件，下面就简单介绍一下吧。先看看效果按设计师要求，就是一个banner，但是指示器达不到要求，随手写了个。官方文档主要用到了 swiper 组件，详细内容看官方文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html看看代码

小程序开发之旅（七） 不固定长度、自动换行的历史搜索记录现在很多软件的搜索栏都会有历史搜索，比如淘宝京东，类似下图：这里我们也来开发一个类似的东西先看看效果这里的搜索词回保存起来，并且历史记录的外框根据长度变化，当长度不够一行的时候进行自动换行。看看代码WXML<van-search model:value="{{ value }}" shape="round" placeholder="请输入委托单位名称" background="white" use-action-slot

小程序开发之旅（六） 自定义顶部导航栏上篇博客自定义了一个底部导航栏，效果还可以，但是我在开发过程中又遇到了一个棘手的问题。就是在底部导航栏的第一个页面需要将页面沉浸到状态栏去，这就麻烦了，因为中间的容器页面无论第几个都是在外面的主界面里，而主界面需要动态的去隐藏标题栏，设计师这是在为难我胖虎？当然也不是没有办法，这里就需要用到自定义的导航栏了，下面详细介绍。先看效果这个是首页的沉浸状态栏效果这个是非首页的标题栏效果看看代码WXML<!--pages/tabbar/index.

小程序开发之旅（五） 自定义的多用户的底部导航栏

小程序开发之旅（四）自定义的多用户的底部导航栏

小程序开发之旅（三）发送短信倒计时功能先看显示效果界面很简单，就是两个输入框，一个发送验证码按钮，一个确认按钮，发送短信后发送验证码的框内显示倒计时，同时限制点击。看看代码HTML<view class="input-container"> <view class="input-button-container row-center"> <view class="input-hint">手机号</view>

小程序开发之旅（二）做一个下拉显示历史账号的登录界面继上一篇的小程序文档博客，这篇博客才算是真正的开始吧。先看看显示效果这里直接按设计图设计的，大部分内容也不难，就不详细写了。主要有个问题就是iconfont的使用并不能把它当成icon设置属性，图片的属性需要通过font-size和color来设置。登录下拉框的实现登录界面没什么难度，这里稍微复杂点的就是这个下拉框的实现了，直接看代码。HTML<view class="input-container"> <

小程序开发之旅（一）学习文档微信官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/