微信

小程序开发自我总结

小程序出来也是很久了，刚发布的时候拿来 demo 小小的玩了一下，感觉还不错。现在终于自己着手开发了一个，满满的成就感~

在我理解，小程序就是微信作为一个中间桥梁，可以通过微信来实现调用手机更多的硬件接口，弥补了 web 开发的先天不足。同时，相对于微信网页，流畅度提升了不少。当然里面的坑还是不少的，暂时我就把自己遇见的总结一下吧。

准备工作

HTTPS：

小程序上线只支持 https，所以一定要先完成从 http 到 https 的升级工作，要不然开发完了也不能上线。当然，在开发调试的时候还是可以用 http 的，所以可以一边开发调试，同时进行证书认证的工作。

这里有个小的 tips，如果域名是在阿里云，可以申请一个为期一年的免费的证书，对于小公司或者个人开发者来说还是很不错的，有需要的可以去阿里云看看。

[补充]：Let’s Encrypt 这里有提供免费的证书服务，但是需要自己用脚本来每隔90天重新申请一次。

开发者工具

小程序的开发者工具还是挺不错的，还可以用于微信网页开发，虽不说完美，但是基本够用。

这里有个问题：当在电脑上调试的时候，app.js 里面的代码是可以正常运行的，但是在手机上预览的时候却会出现问题。比如获取用户地理位置，还没获取到就会加载了首页内容，所以如果有依赖地理位置的内容，需要判断是否获取到信息再进一步加载。

开发者文档

开发者文档是关于小程序最全的介绍，不懂就去看一下还是极好的。

进行开发

新建页面

这里一定要注意，新建页面不是直接新建，而是在 app.json 里面进行配置，程序会直接新建一个 new 文件夹包含四个文件，分别是 new.js/new.json/new.wxml/new.wxss。

获取地理位置

小程序提供了获取地理位置的接口，但是只能获取到用户坐标信息，这个显然是不行的，我们一般会需要用户所在的城市名称，方便显示在页面上。

这个时候就需要引入第三方地图接口了，现在百度高德腾讯都提供了小程序专用接口，根据相应文档调用起来也很容易。

我把每个都试了一下，最后决定还是用腾讯家的吧，毕竟和小程序是一家嘛。

在腾讯地图官方文档里，把实例化 API 核心类信息放在了 onLoad 里面，这里我建议放在 app.js 的 globalData 里，方便在不同页面里调用。

app.js

globalData:{
	qqmapsdk: new QQMapWX({
	  key: '你的 key'
	})
}

比如 index 页面调用的时候

index.js

onLoad:function(){
	getApp().globalData.qqmapsdk.reverseGeocoder({})
}

对于需要获取用户所在城市，需要先通过 wx.getLocation({}) 来获取，然后再在回调函数里转换为地理信息。

第三方插件

这个我试了下 moment.js 失败了，自己写了个修改日期格式的函数代替了，以后再研究一下吧。

页面间数据传递

目前来看有三种方式：

  1. 通过缓存来写入读取

这个比较简单，直接调用wx.setStorage()写入，然后调用wx.getStorage()来读取就好了。

  1. 通过路由后面拼接参数

这里要注意，同一个页面不能接收多个页面传过来的路由参数，只能接收第一个过去的参数，其他的就不再接收。

例如： 有 A->B 同时有 C->B，那么谁先到 B 页面，B 就接收谁的参数，后过去的就忽略了。

  1. 通过 getCurrentPages()

这是一个很好用的东西，配合 wx.navigateBack()可以很流畅的完成一些操作，不用频繁的读写缓存，也不用担心不能接收参数的问题。

使用方法：

let pages = getCurrentPages();
let currPage = pages[pages.length - 1];   //当前页面
let prevPage = pages[pages.length - 2];  //上一个页面
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
if (this.data.type == 'startPlace') {
  prevPage.setData({
    startPlace: e.currentTarget.dataset.addr,
    startPlace_lng: e.currentTarget.dataset.lat,
    startPlace_lat: e.currentTarget.dataset.lng
  })
} else if (this.data.type == 'endPlace') {
  prevPage.setData({
    endPlace: e.currentTarget.dataset.addr,
    endPlace_lng: e.currentTarget.dataset.lat,
    endPlace_lat: e.currentTarget.dataset.lng
  })
}
wx.navigateBack();

当然要注意，上一个页面必须有setData()方法才行。

模板

如果多个页面都长得差不多，可以通过模板功能来达到共用的目的，这样可以少做很多重复无意义的工作。

具体如何使用可以参考官方文档，写的很详细了。这里提一句，在使用模板的页面，需要分别引用一下相应的文件：

<import src="../template/template.wxml" />
@import "../template/template.wxss";

对于数据处理部分，在模板文件里该怎么循环就怎么循环，然后在调用的页面给予相应的赋值即可。这些操作都可以直接在wxml文件里完成，并不依赖js操作。

实现字母索引

很多地方都会用到像 iOS 通讯录一样通过右侧字母滑动来快速获取相应字母开头的信息，小程序没有像其他比如 mintUI 一样的组件，只能通过 scroll-view 这个视图容器来实现，还是有点复杂的。

官方文档在这里就显得有点过于简略，只好上网查找别人的实现方法。同时，在电脑上操作和手机上操作还是有点区别，电脑上略卡顿，手机上会好很多。

最重要的是要设置好scroll-view相关的属性，scroll-y上下滚动，，高度要动态设置否则会出现显示异常，scroll-into-view值应为某子元素id，对应子元素的 id 属性必不可少，滚动区域和字母列表循环的是同一个数组数据。

滚动区域内容：

<scroll-view scroll-y style="height: {{windowHeight}}" class="main" scroll-into-view="{{letter}}">
  <view class="list" wx:for="{{car}}" id="{{item.letter}}">/*根据这个 id 来进行字母定位*/
    <view class="title">
      <view>{{item.letter}}</view>
    </view>
    <view class="brand">
      <view class="child" wx:for="{{item.children}}" wx:for-item="children">
        {{children.name}}
      </view>
    </view>
  </view>
</scroll-view>

右侧字母列表：

<view class="sidebar" catchtouchstart="touchLetter" catchtouchmove="moveLetter">
  <view class="letter" wx:for="{{car}}">{{item.letter}}</view>
</view>

onLoad 加载的时候要设置高度

onLoad: function (options) {
   //系统信息接口
   let res = wx.getSystemInfoSync();
   this.setData({
     windowHeight: res.windowHeight + 'px'
   })
   
   //设置数据
   let datas = app.globalData.carList.brand;
   this.setData({
     car: datas
   })
}

手机点击字母事件：

touchLetter: function (e) {
   this.setData({
     letter: e.target.dataset
   });
 }

手机滑过字母事件：

moveLetter: function (e) {
  //系统信息接口
  let res = wx.getSystemInfoSync();
  
  //每个字母的高度，这里根据 iPhone6 的屏幕为标准设置高度为 50rpx，再根据不同屏幕宽度按比例进行设置
  let letterHeight = (50 * res.windowWidth) / 750;
  
  //手指滑过的距离
  let pageY = e.changedTouches[0].pageY;
  
  //根据距离取整否则会出现没有值的情况
  let letterIndex = Math.ceil((pageY - letterHeight) / letterHeight);
  
  //给 letter 赋值
  this.setData({
    letter: this.data.car[letterIndex - 1].letter
  })
}

总结

写了很多，其实很多东西我还没有接触，比如调用更多的硬件接口，估计也是有不少的坑，等我用到了再补充吧。现在就等着证书下来好上线我的第一个小程序啦。