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

关注学习更多技术

​