小程序开发入门

小程序开发入门

最近开发了几个微信小程序，现在将其中比较重要的点列出来，供参考。在文中，开发者服务器（以下简称：服务端）。

项目结构

新建项目的过程略，请参考微信小程序官网。假设你现在已经完成了项目的创立过程，那么摆在你面前的应该是相似这样的一个目录。

[图片上传失败...(image-d135ac-1528371907882)]

如上图所示，我们看到的目录结构大致如下：

---------pages（各个页面的目录）          -----pages1（页面一）                ----page1.js(js代码在这)                ----page1.wxml（页面布局）                ----page1.wxss（css文件）          -----pages2(页面二)          ......---------utils（此目录包含各种util方法）---------app.js（相似于Android的Application，维护着小程序App的生命周期以及globalData）---------app.json（小程序Pages的清单文件）---------app.wxss（全局样式）---------project.config.json（项目配置文件）

路由&&生命周期

小程序里面的路由一律由框架自己实现，我们只要要简单调用就可。

登录

小程序的登录如上图所示，具体分为如下两步：

1. 小程序调用wx.login()获取临时登录凭证code，并回传到开发者服务器。2. 服务端以code换取客户唯一标识openid和会话密钥session_key。之后开发者服务器根据客户标识来生成自己设置登录态，用于后续业务逻辑中前后台交互时识别客户身份。

所以小程序登录这块的实现应该是这样：

App({     onLaunch: function() {        wx.login({          success: function(res) {            if (res.code) {              //发起网络请求（请求我们自己的服务器，将code上传）              wx.request({                url: 'https://test.com/onLogin',                data: {                  code: res.code                }              })            } else {              console.log('登录失败！' + res.errMsg)            }          }        });  }})

至此，一个简单的登录过程就实现了，但是我们不能每次进入小程序或者者每次进入每个页面就登录，所以wx.login()调用时机就很重要，微信给我们提供了一个方法wx.checkSession用来检查客户当前session_key能否有效，判断小程序能否需要重新登录。所以一个较为完成的登录流程应该是这样：

wx.checkSession({  success: function(){    //session_key 未过期，并且在本生命周期一直有效  },  fail: function(){    // session_key 已经失效，需要重新执行登录流程    wx.login() //重新登录    ....  }})

事件传參

举个例子，我们有个按钮，点击按钮触发某个函数，我们需要给该函数传參，我们怎样做呢？

<button bindtap='submit' data-name="测试">测试</button>submit: function(e){  //在响应方法里我们这么取参数 console.log(e.target.dataset.name)}

总结起来就是，data-{property}，用来传递相关参数。

动画

一般实现动画有两种思路，第一种就是使用wx.createAnimation(OBJECT)小程序提供的动画API，还有一种就是用canvas画图的形式，通过setData改变数值，从而达到实现动画的目的。一般，我们采取第一种实现方式，通过canvas的方式不推荐，由于需要较为频繁的调用setData，从而对性能产生影响。

Canvas绘图

小程序定义了丰富的绘图方法，在此就不逐个列举了。有两个比较重要的提一下。一个是save() ，另一个是restore()。举个例子看一下：

const ctx = wx.createCanvasContext('myCanvas')// save the default fill stylectx.save()ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 100)// restore to the previous saved statectx.restore()ctx.fillRect(50, 50, 150, 100)ctx.draw()

运行结果如下：

可以看到，save保存了当前绘图上下文的状态，restore用来恢复到之前保存的状态。

优化

优化工具

1. 微信提供了性能面板，我们可以借助于它来理解小程序当前的性能。

2. Android平台可以借助于性能 Trace 工具来进行分析，具体操作步骤见官网。

https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tools.html

优化建议

一. setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口（这也就是为什么动画不推荐使用canvas+setData的方式实现）。所以在使用setData的时候，应注意：

1. 避免频繁的去 setData

2. 避免每次 setData 都传递大量新数据

3. 避免后端态页面进行 setData

二.避免使用大图片

三.上传图片时，注意对图片进行压缩传输，避免使用原图

四.使用微信缓存时，及时清除缓存数据。wx.removeStorage(OBJECT)

五.及时清除不再使用的代码，库以及图片资源。

六.避免使用类似度极高的图片，举个例子，比方：向左，向右的箭头，我们可以不使用两个图片资源，引用一个图片资源，而后使用css来控制显示。

需要注意的点:

1. canvas 组件是由用户端创立的原生组件，它的层级是最高的，不能通过 z-index 控制层级。应该使用cover-view,覆盖在原生组件之上的文本视图，可覆盖的原生组件除了canvas，还有map、video、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image。示例如下：

<canvas>  <cover-view class="controls">    <cover-view class="play" bindtap="play">      <cover-image class="img" src="/path/to/icon_play" />    </cover-view></canvas>

2.小程序页面数据传递方式。?key1=value1&key2=value2...。当传递json串时，不能这么做，由于json里面带有？时会解析出错。所以可以借助于小程序缓存来实现。比方A--->B页面：

A页面：    let data = JSON.stringify(params)        //保存数据到本地缓存B页面：        //取出缓存数据    JSON.parse(data)

2.ios滑动卡慢

-webkit-overflow-scrolling: touch;

微信获取客户信息

在以往我们进入一个小程序的时候，会出现一个弹框，相似这样：

[图片上传失败...(image-a9ec58-1528371907882)]

wx.getUserInfo(OBJECT) //通过这个方法，我们可以唤起弹框，用于获取客户信息

此接口有调整，使用该接口将不再出现受权弹窗，请使用 <button open-type="getUserInfo"></button> 引导客户主动进行受权操作。假如使用会出现如下提醒：

[图片上传失败...(image-e7fe3b-1528371907882)]

但是该接口并没有废弃，当客户未受权过，调用该接口将直接报错。当客户受权过，可以使用该接口获取客户信息。

到此，小程序已经详情的差不多了，至少有了一个简单的感知。我避免详情小程序的各个组件或者者API，这些组件，API大致浏览一下，知道系统提供了什么，而后使用的时候再去查即可以了。