微信小程序使用weui扩展组件踩坑

Posted 2020-12-10 熊猫程序员

最近在做微信小程序，引入weui的时候踩坑了好久，这里记录一下遇到的问题。

微信官方文档给了两种weui引入方式：

1. 通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。
2. 可以通过npm方式下载构建，npm包名为weui-miniprogram

但是注意！！！如果使用扩展组件的话必须使用npm的安装方式安装weui

以使用tabs选项卡组件为例子

第一步 进入你的小程序根目录下（带app.json的目录）初始化npm   这步的意思是让当前文件夹以node_modules模块化的方式引入组件，会询问你项目相关信息，一直回车就行。

npm init

上面执行完，会在根目录下生成node_modules 文件夹，package.json，pack-lock.json。

第二部 npm 安装weui

npm i weui-miniprogram -S --production

 

第三步 在微信开发工具中构建npm

操作步骤：点微信开发者工具的  工具-构建npm，如果上面都执行成功的话，这步会在根目录下生成一个叫miniprogram_npm的文件夹

注意！！！ 我们引入的组件都是从miniprogram_npm中引入的。

 

 

第四步 在你微信开发者工具中的 详情-本地设置中勾选中使用npm模块

 

 

 

第五步 在根目录下的app.wxss中引入下面代码

@import \'./miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss\';

 

第六步 使用npm单独安装扩展组件！！！

这步要注意，扩展组件需要单独安装，上面全局安装的weui只会安装基础组件，这个地方官网并没有给出其他组件怎么安装的，只是给举了个video-swiper的例子。

博主总结的命令是 npm i @miniprogram-component-plus/{{扩展组件名}} --save  ，用tabs举例：

npm i @miniprogram-component-plus/tabs --save

安装上面的时候可以看到是从淘宝镜像拉的资源，我安装的时候装了3次才成功。

 

第七步 执行上面第3步，用开发者工具构建npm

 

第八步 在需要引入tabs的组件的json里配置上tabs

这里有个坑！！！ 注意key的tabs要加上mp-  ，后面的value直接以miniprogram_npm为根目录就可以，可以去文件夹下看包具体叫什么名字

{
  "usingComponents": {
    "mp-tabs": "@miniprogram-component-plus/tabs"
   
  }
}

 

第九步 使用官网给的代码例子使用就可以了，但是自己运行的样式还是跟示例展示的不一样，需要自己手动调整。

 

如果帮到了你 麻烦点个赞～～