微信小程序开发优化

一、开发优化一

1.使用Vant Weapp

1.1 什么是Vant Weapp

Vant Weapp官网链接

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

1.2 安装Vant Weapp组件库

安装快速上手

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

1.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.4 使用css变量定制主题样式

定制主题

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

二、开发优化二

1.API的Promise化

1.1 什么是API的Promise化

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

1.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.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)
}

三、开发优化三

1.全局数据共享

1.1 小程序中的全局共享方案

1.2 小程序全局数据共享MobX步骤

参考资料一

参考资料二

四、开发优化四

1.分包

分包加载官网链接

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

1.小程序启动加载性能

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

2.小程序渲染性能

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