Appearance
微信小程序相关知识点的整理
小程序优缺点的概述
- 优点：即开即用，不需要下载，并且依托于微信，不管是获取流量，还是调用一些系统接口都比传统h5容易的多，同时降低了开发门槛，前端开发很好上手。
- 缺点：依托于微信的弊端，一个是调用的一些api接口会受到微信的限制，同时不管是小程序的内容，还是类目，都会受到限制，以及目前新增的年审的成本，加上小程序的体积大小有限制，对于开发一些大型的小程序应用是个不太友好的选择。
小程序的生命周期
小程序的生命周期分为3种，1.应用的生命周期 2.页面的生命周期 3.组件的生命周期,我们来说说第一种应用的生命周期，主要有以下几个
| 应用的生命周期 | |
|---|---|
| onLaunch | 小程序初始化完成触发，只会触发一次 |
| onShow | 小程序启动或者从后台进入前台显示 |
| onHide | 小程序从前台进入到后台 |
| onError | 小程序脚本发生错误或者api调用报错触发 |
| onPageNotFound | 小程序要打开的页面不存在 |
| onUnhandledRejection | 有未处理的promise拒绝时触发 |
| onThemeChange | 监听系统切换主题的变化 |
| 页面的生命周期 | |
|---|---|
| onLoad | 监听页面加载 |
| onShow | 监听页面显示 |
| onReady | 监听页面初始化完成 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| 组件的生命周期 | |
|---|---|
| created | 监听页面加载 |
| attached | 监听页面显示 |
| ready | 监听页面初次渲染完成 |
| moved | 监听页面隐藏 |
| detached | 监听页面卸载 |
| error | 组件方法抛出错误时执行 |
::: tips 特殊的生命周期->组件所在页面的生命周期，在pageLifeTimes中定义 :::
| pageLifeTimes | |
|---|---|
| onShow | 组件所在页面被展示 |
| onHide | 组件所在页面被隐藏 |
小程序的登录流程
通过调用wx.login获取code发送到服务端，服务端根据code,appid，appsecret向微信服务器换取openid和sessionkey,服务端根据一定的签名规则生成token返回给前端
小程序的跳转方式
| pageLifeTimes | |
|---|---|
| redirectTo | 关闭当前页面，跳转新页面 |
| relaunch | 跳转新页面，关闭其他所有页面 |
| navigateTo | 保留当前页面跳转新页面 |
| navigateback | 关闭当前页，返回上一层或多层 |
| switchtab | 跳转tabbar页面，关闭其他非taber页面 |
小程序的支付流程
将openid，商品id，商品数量发送到服务端，服务端生成对应的订单信息，接着传送到微信服务器，生成预付单信息，将微信服务器返回的结果根据一定的签名结果返回给前端，前端调用wx.requestpayment发起支付
提高小程序运行速度的手段
- 关于首次进小程序的速度优化
小程序打开分为两种，一种是冷启动，一种是热启动，冷启动需要先从远端拉取代码包，再进行加载，这个时候代码包的大小就决定了拉取的时间，所以上传代码的时候需要进行压缩，删除无用的图片和文件，除了icon外，小程序中使用到的图片尽量使用cdn的方式引入，因为图片的压缩率是有限的
- 对于代码层面的优化
减少http请求，例如详情页的数据如果可以从列表中获取就不要另外请求详情页的接口，利用好本地缓存，请求数据尽量放在页面渲染之前，不要在页面渲染完毕后去请求数据，进行改动，对于常用的页面放在主包中，不常用的放在分包中，提高加载速度，利用好骨架屏，提升用户体验，同时对于常用的组件抽理出来，形成自定义组件