微信小程序 扩展组件的使用 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/

关注学习更多技术

​