微信小程序使用第三方包

Posted 2021-03-18 王希有

1、初始化项目

npm init 

2、安装依赖包（ 以vant webapp 为例 ）

npm i vant-weapp -S --production

3、微信开发者工具配置

1、打开 详情 -- 选中 使用npm模板
2、左上角 -- 工具 -- 构建npm 

( 之后会提示 完成构建 )

4、问题

若出现这种错误

VM6419:5 ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml
../wxs/utils.wxs not found from ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml
> 1 | <wxs src="../wxs/utils.wxs" module="utils" />
    | ^
  2 | 
  3 | <van-popup
  4 |   show="{{ show }}"

解决： 

https://github.com/youzan/vant-weapp  克隆后，复制dist文件夹中所有内容，替换掉 miniprogram_npm下 vant-weapp 里所有内容即可

原因： 

未知原因

 

5、使用， 以按钮为例

// app.json 配置如下

"usingComponents": {
    "van-button": "../miniprogram_npm/vant-weapp/button"
  }

// wxml

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