说明
想想就气人,这是我同一个坑重复多次搜索文档了。总结下来这个坑,方便自己以后和大家都不用反复查文档看如何把三方UI库引进小程序·云开发项目。
目标:
- 引入 lin-ui 三方库
变更
变更1:npm install lin-ui
我是云开发项目,所以直接在 project.config.json
同目录下安装。
npm install lin-ui
变更2:配置 project.config.json 支持 npm 编译
需要配置 packNpmManually: true
,此时 packNpmRelationList
配置才会生效。
diff --git a/project.config.json b/project.config.json
index 9921721..99d950d 100644
--- a/project.config.json
+++ b/project.config.json
@@ -31,8 +31,13 @@
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"userConfirmedBundleSwitch": false,
- "packNpmManually": false,
- "packNpmRelationList": [],
+ "packNpmManually": true,
+ "packNpmRelationList": [
+ {
+ "packageJsonPath": "./package.json",
+ "miniprogramNpmDistDir": "./miniprogram/"
+ }
+ ],
"minifyWXSS": true
},
"projectname": "My Test",
构建npm
到小程序IDE中构建 npm 才能使用:选择 “工具 - 构建npm”。
搞定
使用方式,在页面.json文件中直接通过路径 /miniprogram_npm/lin-ui/控件名/index
来指定,组件就用三方的风格 l-控件名
来命名。
{
"usingComponents": {
"l-price": "/miniprogram_npm/lin-ui/price/index"
},
}
搞定!