使用 npm 包优化微信小程序开发流程 对于从事微信小程序开发的人员来说, 官方提供的开发工具在加载 node_modules 包方面存在一定的局限性, 这些包往往体积庞大, 而小程序本身对代码量有着严格的限制 (一般不超过 1MB)。本文将介绍一种更为高效的方法, 即通过 Labrador 框架来克服这些挑战。 Labrador 框架特点: 支持加载大量的 NPM 包, 解决了官方工具无法加载的问题; 兼容 ES6/7 的标准代码, 支持使用 async/await 等高级特性, 大大提高了开发效率; 提供了组件复用机制, 类似于 React 中的组件化思想, 可以极大简化代码结构; 内置自动化测试功能, 方便编写单元测试脚本, 无需额外配置即可实现自动化测试; 集成编辑器配置和 ESLint, 统一代码风格, 有利于团队合作。 安装与初始化: 首先确保已经全局安装了 node.js 和 Labrador 命令行工具。 npm install -g labrador-cli 检查 Labrador 版本以确认安装成功: labrador -V 创建新目录并使用 Labrador 初始化项目: labrador create mylabrador 使用适合微信小程序开发的 IDE (如 Egret Wing3) 打开项目, 并启用自动代码转换功能: labrador watch 随后, 使用微信开发工具打开项目中的 dist 文件夹。 页面配置示例: 在 src/pages/index.json 文件中添加如下配置以设置页面
{
"navigationBarTitleText": "主页",
"enablePullDownRefresh": false
}
保存后, 修改会自动同步到微信开发者工具。
使用 Labrador 库:
Labrador 对全局 wx 变量进行了封装, 为所有的异步方法提供了 Promise 支持, 除了那些同步方法 (通常以 on*, create*, stop*, pause*, close* 开头, 或者以 *Sync 结尾)。
import { wx, Component, PropTypes } from 'labrador';
wx.wx; // 原始全局 wx 对象
wx.app; // 与 global getApp() 函数等效, 用于获取全局应用实例
wx.currentPages; // 全局函数 getCurrentPages() 的优雅封装
Component; // Labrador 自定义组件基类
PropTypes; // Labrador 数据类型验证器集合
wx.login; // 封装微信登录接口
wx.getStorage; // 封装读取缓存接口
推荐避免使用 getStorageSync() 这样的同步阻塞方法, 而是采用 await wx.getStorage() 这样的异步非阻塞方法, 以提升性能, 除非遇到特殊场景。
app.js 示例:
import request from 'allRequests';
import { setStore } from 'labrador-redux';
import { sleep } from './utils/utils';
import store from './redux';
if (__DEV__) {
console.log('当前开发环境');
}
// 向 Labrador Redux 注册 store
setStore(store);
export default class {
async onLaunch() {
try {
await sleep(100);
await request('pi/start');
} catch (error) {
console.error(error);
}
this.timer();
}
async timer() {
while (true) {
console.log('hello');
await sleep(10000);
}
}
}
上述代码使用了 ES6/7 标准语法, 并未显式声明 use strict, 因为所有代码在编译时都会强制执行 strict 模式。
代码并未直接调用全局 App() 方法, 而是默认使用导出语法导出类, 编译后 Labrador 会自动添加 App() 方法调用, 故不要手动调用 App() 方法。
自定义组件:
自定义组件通常存储在 src/components 目录下, 由 *.js, *.xml, 和 *.less 文件组成, 分别对应微信小程序框架中的 js, wxml, 和 wxss 文件。自版本 0.6 以后, 支持 *.sass 和 *.scss 格式的样式文件。
- 继续阅读本文相关话题
- 小程序开发优势
- 推荐文章
- 常见问题
