微信小程序使用weui擴展組件踩坑

最近在做微信小程序，引入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"
   
  }
}

 

第九步 使用官網給的代碼例子使用就可以了，但是自己運行的樣式還是跟示例展示的不一樣，需要自己手動調整。

 

如果幫到了你 麻煩點個贊～～