如何使用npm包进行微信小程序开发--拉布拉多

相信做过微信小程序的人都知道，官方微信网页开发工具根本无法加载node_Modules包，即使可以加载，node_Modules的大小也往往是几十兆字节，小程序的代码限制在1M。微信小程序有三个缺点：

1无法调用npm包

2不能使用babel转账

3组件不能重用（重用组件功能，如react）

接下来，我们将介绍一个相对完整的微信开发解决方案：

拉布拉多：（最新版本为0.6.12）

Github地址：https://github.com/maichong/labrador

特性：

1.使用拉布拉多框架，微信开发者工具可以支持加载大量NPM包

2.支持ES6/7标准代码，使用async/await可以有效避免回调到地狱

3.组件重用、微信小程序框架二次封装、组件重用和嵌套

4.自动化测试，这非常容易编写单元测试脚本，并且无需任何额外配置即可实现自动化

5.使用编辑器配置和ESLint标准化代码样式，以促进团队协作

当然，也有缺点。你会在阅读后找到它们

首先，系统在全球范围内安装nodejs和Labrador命令行工具。

npminstall-g拉布拉多cli

查看当前拉布拉多版本

拉布拉多-V

创建新目录并初始化项目

拉布拉多创建我的拉布拉多#初始化拉布拉多项目mylabrador是您的项目名称

使用Egret Wing3（此IDE更适合开发微信小程序）打开labradordemo项目，

启用自动代码转换功能

拉布拉多手表

然后用微信开发工具打开labradordemo项目下的dist文件

在这方面不需要做任何编码工作。如果您修改以下src目录，它将自动同步到微信开发者工具

添加索引。src/pages/index中的json文件。主要内容是设置页面标题

{

“NavigationBarTitleText”：“主页”，

“enablePullDownRefresh”：false

}

然后保存它，它将同步到微信开发者工具

labrador库封装了全局wx变量，并为所有wx对象中的异步方法提供Promise支持。除了同步方法，这些方法通常以on*、create*、stop*、pause*、close*开头，或以*Sync结尾。在以下代码中使用拉布拉多库。

importwx，｛Component，PropTypes｝来自“abrador”；

wx。wx；//原始全局wx对象

wx。app；//与global getApp（）函数一样，代码样式不建议粗略访问全局对象和方法

wx。currentPages//全局函数getCurrentPages（）的优雅封装

组件；//拉布拉多自定义组件基类

属性类型；//拉布拉多数据类型验证器收集

wx。登录；//封装微信登录界面

wx。获取存储；//封装读缓存接口

//…查看更多https://mp.weixin.qq.com/debug/wxadoc/dev/api/

我们建议不要再次使用wx同步阻塞方法，如getStorageSync（），以及异步非阻塞方法，例如await-wx。在异步函数中使用getStorage（）来提高性能，除非遇到特殊情况。

app。js文件

来自“所有请求”的导入请求；

从“labrador redux”导入｛setStore｝；

从“./utils/utils”导入｛sleep｝；

从'./redux'导入存储；

如果（__DEV__）{

安慰log（“当前开发环境”）；

}

//向拉布拉多红酒注册商店

setStore（存储）；

导出默认类{

异步启动（）{

尝试{

等待睡眠（100）；

等待请求（'pi/start'）；

}捕获（错误）{

console.error（错误）；

}

this.timer（）；

}

异步计时器（）{

while（真）{

console.log（“hello”）；

等待睡眠（10000）；

}

}

}

代码使用ES6/7标准语法。代码不必声明use-strict，因为所有代码在编译时都会强制执行strict模式。

该代码不调用全局app（）方法，但默认情况下使用导出语法导出类。编译后，Labrador将自动添加App（）方法调用，因此请不要手动调用App（）。这是因为代码样式不建议粗略访问全局对象和方法。

拉布拉多的定制组件基于微信小程序框架并进一步定制组合，具有逻辑处理、布局和风格。

项目中的常规自定义组件存储在src/components目录中。组件通常由三个文件*组成。js，*。xml和*Less分别对应于微信小程序框架的js、wxml和wxss文件。在Labardor项目的源代码中，我们特意采用了xml和较少的后缀来显示差异。如果组件包含单元测试，则使用*。测验js测试脚本文件将存在于组件目录中。

版本0.6之后，*。sass和*。支持scss格式样式文件。

自定义公司