微信小程序开发优化

1|0一、开发优化一

1|11.使用Vant Weapp

1|01.1 什么是Vant Weapp

Vant Weapp官网链接

Vant Weapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好。

1|01.2 安装Vant Weapp组件库

安装快速上手

在小程序项目中，安装组件库步骤如下：
- npm i @vant/weapp -S --production
- 构建npm包
- 修改app.json，将 app.json 中的 "style": "v2" 移除

1|01.3 使用Vant Weapp组件库

使用快速上手

引入组件
- 以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。
- 所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。
```
// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
```
使用组件
- 引入组件后，可以在 wxml 中直接使用组件
```
<van-button type="primary">按钮</van-button>
```

1|01.4 使用css变量定制主题样式

定制主题

在app.wxss中，写入CSS变量，即可对全局生效。

2|0二、开发优化二

2|11.API的Promise化

1|01.1 什么是API的Promise化

API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步API，升级改造为基于Promise的异步API，从而提高代码的可读性、维护性，避免回调地狱的问题。

1|01.2 实现API的Promise化

在小程序中，实现API Promise化主要依赖于 miniprogram-api-promise 这个第三方的npm包。它的安装和使用步骤如下：
- 安装：npm install --save miniprogram-api-promise@1.0.4
```
// 在小程序入口文件中(app.js)，只需调用一次 promisifyAll() 方法
// 即可实现异步API的Promise化
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)
```
- 注：安装完每个包之后需要重新构建，在对应文件夹下强制删除miniprogram_npm，然后在工具中重新构建npm。

1|01.3 调用Promise化之后的异步API

// 页面的 .wxml 结构
<van-button type="danger" bindtap="getInfo">vant按钮</van-button>

// 在页面的 .js 文件中，定义对应的事件处理函数
async getInfo () {
    const { data: res } = await wx.p.request({
        method: 'GET',
        url: 'https://www.escook.cn/api/get',
        data: {
            name: 'zs',
            age: 20
        }
    })
    console.log(res)
}

3|0三、开发优化三

3|11.全局数据共享

1|01.1 小程序中的全局共享方案

1|01.2 小程序全局数据共享MobX步骤

参考资料一

参考资料二

4|0四、开发优化四

4|11.分包

分包加载官网链接

5|0五、提高微信小程序的应用速度的方法

5|11.小程序启动加载性能

控制代码包的大小
分包加载
首屏体验（预请求，利用缓存，避免白屏，及时反馈）

5|22.小程序渲染性能

避免不当的使用setData
使用自定义组件
- 自定义组件的更新并不会影响页面上其他元素的更新

__EOF__

本文作者：不见水星记
本文链接：https://www.cnblogs.com/P1Kaj1uu/p/16738219.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！