1.在index.json中引入对话框组件 //index.json文件{"usingComponents": {// 引入weUI的dialog对话框组件到这个页面"mp-dialog":"weui-miniprogram/dialog/dialog"},"navigationBarTitleText":"weUI学习"} 2.在index.wxml中使用这个mp-dialog标签 <viewclass="page"data-weui-theme="{{theme}}"><viewclass="pa...
https://developers.weixin.qq.com/s/I3uh28m37BMs 引用weui 使用 mp-dialog,发现在页面 onLaunch 阶段,如果使用了 wx.request 请求异步设置 dialog 的 show 字段,mp-dialog 会闪一下立刻消失。 代码片段 https://developers.weixin.qq.com/s/I3uh28m37BMs 回答关注问题邀请回答 收藏 分享 3 个回答 石伊...
最近项目业务升级,有些按钮防止误触还是要加wx.showModal的。但wx.showModal样式并不好看,在官方推荐的weui库上有一个Dialog弹窗组件可以实现和wx.showModal一样的效果并且样式要好看一点。 于是我打算直接用dialog组件,并且将之前的wx.showModal修改
在test.json 中写入配置 {"navigationBarTitleText":"测试页面","usingComponents":{"mp-dialog":"weui-miniprogram/dialog/dialog"}} 在test.wxml 中写入控件 <viewclass="test_button"><buttontype="default"bindtap="btn_clicked">{{btn_name}}</button></view><mp-dialogtitle="测试弹窗"show="{{dialog...
于是我打算直接用dialog组件,并且将之前的wx.showModal修改,封装一下让dialog组件使用方式和wx.showModal相同,这样只改个调用函数名字就可以了。 在 页面.json 中引入组件 "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } 1. 2. ...
"mp-dialog":"/miniprogram_npm/weui-miniprogram/dialog/dialog" } 1. 2. 3. 例如我的pages/demoweui/demoweui.wxml页面要用, 那么我需要把这段代码写在pages/demoweui/demoweui.json里 完整代码: { "usingComponents": { "mp-dialog":"/miniprogram_npm/weui-miniprogram/dialog/dialog" ...
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"> <view>test content</view> </mp-dialog> 完整的组件的使用文档请参考具体的组件的文档。 修改组件内部样式 每个组件可以设置ext-class这个属性,该属性提供设置在组件WXML...
首先,在manifest.json文件中对应的小程序平台(如mp-weixin)配置中添加useExtendedLib字段,并启用weui库: json { "mp-weixin": { "useExtendedLib": { "weui": true } } } 2. 在页面中引入weui组件 在需要使用weui组件的页面配置中,添加对应的usingComponents声明。以mp-dialog组件为例: json { "pages": ...
设置weui为true就行,为了验证是否引入成功,我们在index页面增加一个弹出框。 先在index.json中增加自定义组件 {"usingComponents": {"mp-dialog": "weui-miniprogram/dialog/dialog"}} 然后在index.wxml中引入需要的组件 <!--index.wxml--><view class="container"><text>这是一个云开发</text><mp-dialog ti...
{ "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog", "mp-cells": "weui-miniprogram/cells/cells", "mp-cell": "weui-miniprogram/cell/cell", "mp-badge": "weui-miniprogram/badge/badge" } } 预览效果 扩展组件的用法 使用扩展组件比较麻烦一点,因为涉及到外部的npm模块的使用 先在...