t123

轻量、可靠的小程序 UI 组件库

Troila-Weapp

介绍

Troila Weapp 是基于小程序封装的组件库，助力开发者快速搭建小程序应用。文档网站

预览

扫描下方小程序二维码，体验组件库示例：

使用

使用 Troila Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 npm 支持

# npm
npm i troila-weapp -S --production

# yarn
yarn add troila-weapp --production

方式二. 下载代码

直接通过 git 下载 Troila Weapp 源代码，并将dist目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git

使用组件

以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可

{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}

接着就可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

在开发者工具中预览

# 安装项目依赖
npm install

# 执行组件编译
npm run dev

打开微信开发者工具，把vant-weapp/example目录添加进去就可以预览示例了。

基础库版本

Troila Weapp 最低支持到小程序基础库 1.9.4 版本

微信讨论群

欢迎大家在微信上联系我们，添加下方微信并注明『交流 troila-weapp』即可

目录结构

以下为推荐使用的目录结构，如果有必要开发者也可以自行做一些调整:

|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js

PS：对外暴露的 js 模块/自定义组件请放在 src 目录下，不宜放置在过深的目录。另外新增的暴露模块需要在 tools/config.js 的 entry 字段中补充，不然不会进行构建。

测试

• 执行测试用例：

npm run test

• 执行测试用例并进入 node inspect 调试：

npm run test-debug

• 检测覆盖率：

npm run coverage

测试用例放在 test 目录下，使用 miniprogram-simulate 工具集进行测试，点击此处查看使用方法。在测试中可能需要变更或调整工具集中的一些方法，可在 test/utils 下自行实现。

其他命令

• 清空 miniprogram_dist 目录：

npm run clean

• 清空 miniprogam_dev 目录：

npm run clean-dev