微信小程序——引入WeUI組件庫（一）

通過npm方式下載構建，npm包名為weui-miniprogram

步驟一：初始化

在小程序項目根目錄執行init

npm init -y	

    
    
   
   
           

   
   
  
  
          

步驟二：

在小程序項目目錄中執行命令安裝 npm 包

npm install weui-miniprogram --production
// --production 目的在於可以減少安裝一些業務無關的 npm 包，從而減少整個小程序包的大小

    
    
   
   
           

   
   
  
  
          

步驟三：

勾選“使用 npm 模塊”選項

步驟四：

點擊開發者工具中的菜單欄：工具 --> 構建 npm

如下圖所示構建完成啦

文件目錄中即多了個“miniprogram_npm”的文件夾
文件夾下面即有了我們需要的WeUI件庫

步驟五：在 app.wxss 里面引入 weui.wxss

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

    
    
   
   
           

   
   
  
  
          

步驟六：

頁面中引入 dialog 彈窗組件，
比如在一個初始化的index的page里面引用

（1）、先在index頁面的 json 文件加入 usingComponents 配置字段

{
  "navigationBarTitleText": "首頁",
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

    
    
   
   
           

   
   
  
  
          

（2）、然后在index頁面的 wxml 中直接使用該組件

<!--index.wxml-->
<view class="container">
  <text>我是首頁</text>
  <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '確認'}]}}">
    <view>test content</view>
  </mp-dialog>
</view>

    
    
   
   
           

   
   
  
  
          

結果如下圖所示：

可以選擇“預覽”、“真機調試”用手機來看效果

微信小程序 提示沒有找到可以構建的npm包？

可能會會出現下面這種情況

怎么解決呢？
初始化 微信小程序項目就行啦，進入小程序根目錄，打開cmd，輸入：npm init -y