说明

想想就气人，这是我同一个坑重复多次搜索文档了。总结下来这个坑，方便自己以后和大家都不用反复查文档看如何把三方UI库引进小程序·云开发项目。

目标：

1. 引入 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"
	},
}

搞定！