微信小程序 擴展組件的使用 npm

github:https://github.com/wechat-miniprogram/weui-miniprogram

使用之前

擴展組件庫基於小程序自定義組件構建，在使用擴展組件庫之前，建議先閱讀熟悉小程序自定義組件。

引入組件

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

 

一、安裝  weui-miniprogram

1、進入項目根目錄下

2、執行 npm init 一路回車 ，目錄下回生成 package.json 文件

​

3、執行 npm install weui-miniprogram --production 安裝組件，會在目錄下生成 node_modules 目錄，但是在開發工具這是看不到的，可以帶文件目錄下查看。

4、設置使用npm模塊

​

5、選擇開發者工具 選項欄中的  工具 → 構建npm

6、目錄下會生成 miniprogram_npm 目錄

​

weui-miniprogram 安裝完成

二、組件測試 Dialog

1、 測試組件  dialog

index.wxml

<mp-dialog title="test" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"> <view>test content</view> </mp-dialog>

index.json 引用組件

{
	"usingComponents": { "mp-dialog": "../../miniprogram_npm/weui-miniprogram/dialog/dialog" } }

index.js

Page({
    data: { dialogShow: false, buttons: [{text: '取消'}, {text: '確定'}], }, onShow: function () { this.setData({ dialogShow: true }) }, tapDialogButton(e) { console.log('dialog', e.detail) this.setData({ dialogShow: false, showOneButtonDialog: false }) }, }); 

三、顯示效果

​

官網地址:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

關注學習更多技術

​