WeUI for 小程序Msg提示页

2018年10月22日 09:35 | 72次浏览 作者原创 版权保护

微信小程序weui msg提示页组件有两种提示页,分别是成功提示页和失败提示页,在下面的内容中一一做介绍。

 一、引入小程序weui css样式库,请参考第一章


二、在pages目录中新建目录msg以及文件msg.wxml,msg_success.wxml,msg_fail.wxml,注意新建了三个页面

msg.wxml

<view class="page">
<view class="page__hd">
<view class="page__title">Msg</view>
<view class="page__desc">提示页(www.vxzsk.com V型知识库原创)</view>
</view>
<view class="page__bd">
<view class="weui-btn-area">
<button class="weui-btn" type="default" bindtap="openSuccess">成功提示页</button>
<button class="weui-btn" type="default" bindtap="openFail">失败提示页</button>
</view>
</view>
</view>


msg_success.wxml

<view class="page">
<view class="weui-msg">
<view class="weui-msg__icon-area">
<icon type="success" size="93"></icon>
</view>
<view class="weui-msg__text-area">
<view class="weui-msg__title">操作成功</view>
<view class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></view>
</view>
<view class="weui-msg__opr-area">
<view class="weui-btn-area">
<button class="weui-btn" type="primary">推荐操作</button>
<button class="weui-btn" type="default">辅助操作</button>
</view>
</view>
<view class="weui-msg__extra-area">
<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">底部链接文本</navigator>
</view>
<view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
</view>
</view>
</view>
</view>


msg_fail.wxml

<view class="page">
<view class="weui-msg">
<view class="weui-msg__icon-area">
<icon type="warn" size="93"></icon>
</view>
<view class="weui-msg__text-area">
<view class="weui-msg__title">操作失败</view>
<view class="weui-msg__desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></view>
</view>
<view class="weui-msg__opr-area">
<view class="weui-btn-area">
<button class="weui-btn" type="primary">推荐操作</button>
<button class="weui-btn" type="default">辅助操作</button>
</view>
</view>
<view class="weui-msg__extra-area">
<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">底部链接文本</navigator>
</view>
<view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
</view>
</view>
</view>
</view>


三、在根目录app.json配置文件中配置msg,msg_success,msg_fail文件路径,保存后会自动生成对应的js、css等文件

"pages/msg/msg",
"pages/msg/msg_success",
"pages/msg/msg_fail",


四、msg.js代码实现,两个跳转页面的js函数

Page({
openSuccess: function () {
wx.navigateTo({
url: 'msg_success'
})
},
openFail: function () {
wx.navigateTo({
url: 'msg_fail'
})
}
});

openSuccess函数是跳转成功页面实现,openFail函数是跳转失败页面实现。


五、预览效果

msg.wxml

msg_success.wxml

msg_fail.wxml



此文章本站原创,地址 https://www.vxzsk.com/1913.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程