小程序中weui组件使用

     一. 引入下载组件 

1. 可以通过npm方式下载构建，npm包名为weui-miniprogram
   命令行: npm i weui-miniprogram 如果没有npm前去http://nodejs.cn官网下载

2. 也可以通过微信平台官网文档 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html 去下载想要的组件

   二. 使用组件
   

示例: 弹窗组件
假设组件的目录为weui-miniprogram
3. 首先要在全局的app.wxss里面引入weui.wxss
@import ‘/weui-miniprogram/src/weui-wxss/dist/style/weui.wxss’;
.choose_style{} /可改组件样式/
4. 在当前页面的index. json 文件 usingComponents 字段中配置
{
“usingComponents”: {
“mp-dialog”: “…/weui-miniprogram/miniprogram_dist/components/dialog/dialog”
}
}
5. 在对应页面的 index.wxml 中直接使用该组件

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

6. 对应页面的index.js中
   Page({
   data: {
   dialogShow: false,
   buttons: [{text: ‘取消’}, {text: ‘确定’}]
   },
   openConfirm: function () {
   this.setData({
   dialogShow: true
   })
   },
   tapDialogButton(e) {
   this.setData({
   dialogShow: false
   })
   }
   });