微信小程序模块化开发框架

最新推荐文章于 2024-08-06 12:45:29 发布

第九程序

最新推荐文章于 2024-08-06 12:45:29 发布

阅读量3.7k

点赞数

分类专栏：微信小程序开发微信小程序文章标签：小程序开发文档微信小程序开发

本文链接：https://blog.csdn.net/qq_38125123/article/details/72726240

版权

Labrador是一个微信小程序的模块化开发框架，它支持加载NPM包，使用ES6/7语法，实现组件重用和自动化测试。通过labrador命令行工具，可以进行项目初始化、构建和监测文件变化。框架提供了自定义组件和页面的开发流程，包括初始化项目、配置开发工具、项目目录结构等。此外，Labrador还支持编辑器配置、自动化测试和组件的props机制，便于团队协作和代码维护。

摘要由CSDN通过智能技术生成

微信小程序组件化开发框架

特性

使用Labrador框架可以使微信开发者工具支持加载海量NPM包
支持ES6/7标准代码，使用async/await能够有效避免回调地狱
组件重用，对微信小程序框架进行了二次封装，实现了组件重用和嵌套
自动化测试，非常容易编写单元测试脚本，不经任何额外配置即可自动化测试
使用Editor Config及ESLint标准化代码风格，方便团队协作

安装

首先您的系统中安装Node.js和npm v3 下载Node.js，然后运行下面的命令将全局安装Labrador命令行工具。

npm install -g labrador-cli

初始化项目

mkdir demo           # 新建目录
cd demo              # 跳转目录
npm init             # 初始化npm包
labrador init        # 初始化labrador项目

项目目录结构

demo                 # 项目根目录
├── .labrador        # Labrador项目配置文件
├── .babelrc         # babel配置文件
├── .editorconfig    # Editor Config
├── .eslintignore    # ESLint 忽略配置
├── .eslintrc        # ESLint 语法检查配置
├── package.json
├── dist/            # 目标目录
├── node_modules/
└── src/             # 源码目录
    ├── app.js
    ├── app.json
    ├── app.less
    ├── components/  # 通用组件目录
    ├── pages/       # 页面目录
    └── utils/

注意 dist目录中的所有文件是由labrador命令编译生成，请勿直接修改

配置开发工具

项目初始化后使用WebStorm或Sublime等你习惯的IDE打开项目根目录。然后打开微信web开发者工具新建项目，本地开发目录选择 dist 目标目录。

开发流程

在WebStorm或Sublime等IDE中编辑 src 目录下的源码，然后在项目根目录中运行labrador build 命令构建项目，然后在微信web开发者工具的调试界面中点击左侧菜单的重启按钮即可查看效果。

我们在开发中，微信web开发者工具仅仅用来做调试和预览，不要在微信web开发者工具的编辑界面修改代码。

微信web开发者工具会偶尔出错，表现为点击重启按钮没有反应，调试控制台输出大量的无法require文件的错误，编辑界面中代码文件不显示。这是因为 labrador build 命令会更新整个dist 目录，而微信web开发者工具在监测代码改变时会出现异常，遇到这种情况只需要关掉微信web开发者工具再启动即可。

我们还可以使用 labrador watch 命令来监控 src 目录下的代码，当发生改变后自动构建，不用每一次编辑代码后手动运行 labrador build 。

所以最佳的姿势是：

在项目中运行 labrador watch
在WebStorm中编码，保存
切换到微信web开发者工具中调试、预览
再回到WebStorm中编码
...

labrador 命令

labrador init 初始化项目命令

labrador build 构建当前项目

  Usage: labrador build [options]

  Options:

    -h, --help     output usage information
    -V, --version  output the version number
    -c, --catch    在载入时自动catch所有JS脚本的错误
    -t, --test     运行测试脚本
    -d, --debug    DEBUG模式
    -m, --minify   压缩代码
    -f, --force    强制构建，不使用缓存

labrador watch 监测文件变化

  Usage: labrador watch [options]

  Options:

    -h, --help     output usage information
    -V, --version  output the version number
    -c, --catch    在载入时自动catch所有JS脚本的错误
    -t, --test     运行测试脚本
    -d, --debug    DEBUG模式