微信小程序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
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程