微信小程序开发优化

  • 微信小程序开发优化已关闭评论
  • 29 次浏览
  • A+
所属分类:Web前端
摘要

Vant Weapp官网链接安装快速上手使用快速上手引入组件以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。


一、开发优化一

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.jsonindex.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
  • 使用自定义组件
    • 自定义组件的更新并不会影响页面上其他元素的更新