微信小程序 之组件的引用

1. 通过 useExtendedLib 扩展库 的方式引入weui组件库

//在项目的app.json文件中写入以下代码
"useExtendedLib": {
    "kbone": true,
    "weui": true
  }

2. 在目标页面的 json 文件加入 usingComponents 配置字段

//如下所示：
//mp-dialog是命令的组件名称，使用时直接用以组件名称开头的标签即可
{
  "navigationBarTitleText": "账单",
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

3. 然后可以在目标页面的 wxml 中直接使用该组件

//当show="{{false}}"时，model框不显示
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
	<view>test contenttest content</view>
</mp-dialog>

4. 最终效果如图所示