微信小程序开发入门 _生活知道

微信小程序开发入门
最近开发了几个微信小程序，现在将其中比较重要的点列出来微信小程序自己开发，供参考。在文中，开发者服务器（以下简称：服务端）。部分内容引自小程序开发者文档（）。
项目结构
新建项目的过程略，请参考微信小程序官网。假设你现在已经完成了项目的创建过程，那么摆在你面前的应该是类似这样的一个目录。
小程序项目结构
如上图所示，我们看到的目录结构大致如下：
路由&&生命周期
小程序里面的路由全部由框架自己实现，我们只需要简单调用即可。
登录
登录
小程序的登录如上图所示，具体分为如下两步：
1. 小程序调用wx.login()获取临时登录凭证code ，并回传到开发者服务器。
2. 服务端以code换取用户唯一标识openid和会话密钥session_key 。之后开发者服务器根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。
所以小程序登录这块的实现应该是这样：
至此，一个简单的登录过程就实现了，但是我们不能每次进入小程序或者每次进入每个页面就登录，所以wx.login()调用时机就很重要微信小程序自己开发，微信给我们提供了一个方法wx.checkSession用来检查用户当前session_key是否有效，判断小程序是否需要重新登录。所以一个较为完成的登录流程应该是这样：
事件传?
举个例子，我们有个按钮，点击按钮触发某个函数，我们需要给该函数传?，我们怎么做呢？
总结起来就是，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 工具来进行分析，具体操作步骤见官网。
优化建议
一. 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 。示例如下：

2.小程序页面数据传递方式。?key1=value1&key2=value2… 。当传递json串时，不能这么做，因为json里面带有？时会解析出错。所以可以借助于小程序缓存来实现。比如A—>B页面：
A页面： let data = https://www.30zx.com/JSON.stringify(params) //保存数据到本地缓存B页面： //取出缓存数据 JSON.parse(data)
【微信小程序开发入门】2.ios滑动卡顿
-webkit-overflow-scrolling: touch;
微信获取用户信息
在以往我们进入一个小程序的时候，会出现一个弹框，类似这样：
授权弹框
wx.getUserInfo(OBJECT) //通过这个方法，我们可以唤起弹框，用于获取用户信息
此接口有调整，使用该接口将不再出现授权弹窗，请使用引导用户主动进行授权操作。如果使用会出现如下提示：
错误提示
但是该接口并没有废弃，当用户未授权过，调用该接口将直接报错。当用户授权过，可以使用该接口获取用户信息。
到此，小程序已经介绍的差不多了，至少有了一个简单的感知。我避免介绍小程序的各个组件或者API，这些组件，API大致浏览一下，知道系统提供了什么，然后使用的时候再去查就可以了。
本文到此结束，希望对大家有所帮助！

微信小程序开发入门

猜你喜欢