订阅消息整体设计
由于微信小程序订阅消息时一次性模板，每次推送都需要用户授权才可推送，故整体设计后增加体验感，也更方便退送消息的使用
demo
wxml代码：
<!-- 订阅消息设置 -->
<view class="weui-cells mt-2 mb-2 ditan-cells" style="margin:20rpx">
<view class=" weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell" style="padding: 10px 2px 2px 2px;">
<view class="weui-cell__hd" style="margin:0 0 0 10px">
<i class="iconfont icon-iconset0218"></i>
<!-- <image class="my-cell-icon" src="../../resource/images/bulb-outline@3x.png" mode="cover"></image> -->
</view>
<view class="weui-cell__bd teamy-cell-text" style="font-size:34rpx">
<text>开通【订阅消息】推送</text>
</view>
<view class="weui-cell__ft">
<switch color="" checked="{{switchChecked}}" bindchange="switchChange" style="transform:scale(0.6);" />
</view>
</view>
<view class="" style="margin:0 6px 0 6px">
<view class="weui-cell__bd teamy-cell-text" style="font-size:32rpx">
<view class="border">
将向你发送小程序订阅消息，消息内容为当天订阅新的招标信息
</view>
</view>
</view>
</view>
<view class=" weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell" style="padding: 10px 2px 2px 2px;">
<view class="weui-cell__hd" style="margin:0 0 0 10px">
<i class="iconfont icon-iconfontzhizuobiaozhun023108"></i>
</view>
<view class="weui-cell__bd teamy-cell-text" style="font-size:34rpx;display:flex">
<view>订阅次数</view>
<view class="cishu">{{number}}次</view>
</view>
<view class="dingyue" bindtap="shouquan">
<view>订阅+1</view>
</view>
</view>
<view class="" style="margin:0 6px 0 6px">
<view class="weui-cell__bd teamy-cell-text" style="font-size:32rpx">
<view class="border">
点击订阅按钮增加【订阅消息】推送次数，当点击次数为0时，您将无法接收到消息提醒
</view>
</view>
</view>
</view>
<view class=" weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell" style="padding: 10px 2px 2px 2px;">
<view class="weui-cell__hd" style="margin:0 0 0 10px">
<i class="iconfont icon-shijian"></i>
</view>
<view class="weui-cell__bd teamy-cell-text" style="font-size:34rpx;display:flex">
<view>推送时间</view>
</view>
<view class="dingyue">
<view class="section">
<!-- <view class="section__title">时间选择器</view> -->
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
{{time}}
</view>
</picker>
</view>
<!-- <view>7:00</view> -->
<!-- <i class="iconfont icon-xiangyou"></i> -->
</view>
</view>
<view class="" style="margin:0 6px 0 6px">
<view class="weui-cell__bd teamy-cell-text" style="font-size:32rpx">
<view class="border">设置您期望接收【订阅消息】的时间</view>
</view>
</view>
</view>
<view class=" weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell" style="padding: 10px 2px 2px 2px;">
<view class="weui-cell__hd" style="margin:0 0 0 10px">
<i class="iconfont icon-shouye"></i>
</view>
<view class="weui-cell__bd teamy-cell-text" style="font-size:34rpx;display:flex">
<view>订阅页提醒</view>
</view>
<view class="weui-cell__ft">
<switch color="" checked="{{switch1Checked}}" bindchange="switch1Change"
style="transform:scale(0.6);" />
</view>
</view>
<view class="" style="margin:0 6px 0 6px">
<view class="weui-cell__bd teamy-cell-text" style="font-size:32rpx">
<view class="border" style="border-bottom: none;">
当推送次数不足5次时，将在订阅页弹出增加【订阅消息】推送次数的对话框
</view>
</view>
</view>
</view>
</view>
<!-- 订阅消息设置 -->
<view class="weui-cells mt-2 mb-2 ditan-cells" style="margin:20rpx">
<view class=" weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell" style="padding: 10px 2px 2px 2px;">
<view class="weui-cell__hd" style="margin:0 0 0 10px">
<i class="iconfont icon-ceshi"></i>
</view>
<view class="weui-cell__bd teamy-cell-text" style="font-size:34rpx;display:flex">
<view>测试订阅消息</view>
</view>
<view class="dingyue" bindtap="ceshi">
<view>测试</view>
</view>
</view>
<view class="" style="margin:0 6px 0 6px">
<view class="weui-cell__bd teamy-cell-text" style="font-size:32rpx">
<view class="border">
将为您下发一条订阅消息，如果下发失败，请检查是否关闭了小程序订阅消息授权。如果授权开启且未接收到订阅消息，请重置订阅次数，并重新订阅
</view>
</view>
</view>
</view>
<view class=" weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell" style="padding: 10px 2px 2px 2px;">
<view class="weui-cell__hd" style="margin:0 0 0 10px">
<i class="iconfont icon-zhongzhi"></i>
</view>
<view class="weui-cell__bd teamy-cell-text" style="font-size:34rpx;display:flex">
<view>重置订阅次数</view>
</view>
<view class="chongzhi" bindtap="chongzhi">
<view>重置</view>
<!-- <i class="iconfont icon-xiangyou"></i> -->
</view>
</view>
<view class="" style="margin:0 6px 0 6px">
<view class="weui-cell__bd teamy-cell-text" style="font-size:32rpx">
<view class="border" style="border-bottom: none;">测试时未收到订阅消息且推送次数大于0时，请重置订阅次数，并重新订阅</view>
</view>
</view>
</view>
</view>
js代码：
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
Page({
data: {
switchChecked: true,
number: 0,
time: "8:00"
},
onLoad: function (options) {
wx.hideHomeButton({});
var that = this;
wx.getStorage({
key: 'shouquancishu',
success: function (res) {
that.setData({
number: res.data
});
console.log("缓存数据：", res.data);
}
});
},
switchChange: function (e) {
console.log("switch\u53D1\u751Fchange\u4E8B\u4EF6\uFF0C\u643A\u5E26\u503C\u4E3A", e.detail.value);
this.data.switchChecked = e.detail.value;
},
bindTimeChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
this.setData({
time: e.detail.value
});
},
shouquan: function () {
var that = this;
var cs = 0;
wx.getStorage({
key: 'shouquancishu',
success: function (res) {
cs = res.data;
console.log("缓存数据：", res.data);
}
});
wx.requestSubscribeMessage({
tmplIds: ['模板'],
success: function (res) {
if (res['模板'] == "accept") {
console.log("同意授权");
wx.setStorage({
key: "shouquancishu",
data: cs + 1
});
that.setData({
number: cs + 1
});
}
}
});
},
ceshi: function () {
wx.showToast({
title: '暂未开通',
icon: 'none',
duration: 2000
});
},
chongzhi: function () {
wx.setStorage({
key: "shouquancishu",
data: 0
});
this.setData({
number: 0
});
wx.showToast({ title: '已重置' });
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
},
onPageScroll: function () {
},
onTabItemTap: function (item) {
}
});
wxss:
.cishu{
font-size: 28rpx;
border-style: solid;
border-width: 1rpx;
padding: 5rpx 10rpx 5rpx 10rpx;
margin-left: 20rpx;
color: #938CB5;
}
.dingyue{
font-size: 30rpx;
background-color:#07c160;
color: #fff;
border-radius: 10rpx;
padding: 6rpx 16rpx 6rpx;
margin-right: 34rpx;
}
.chongzhi{
font-size: 30rpx;
background-color: #fa5151;
color: #fff;
border-radius: 10rpx;
padding: 6rpx 16rpx 6rpx;
margin-right: 34rpx;
}
.border{
margin:10rpx;
color:rgb(207, 203, 203);
border-bottom: 1px solid;
border-bottom: 0.5rpx dashed;
padding-bottom: 10px;
}
弹框：
wxml
<block wx:if="{{showMask}}">
<view class="mask-view" catchtouchmove="onPreventTouchMove"></view>
<view class="popup-view" catchtouchmove="onPreventTouchMove">
<view class="popup-content-view" style="margin:0">
<view class="hint-title-text title">
<view class="tit">订阅次数不足提醒</view>
<view class="close" bindtap="close">关闭</view>
</view>
<view class="num">{{number}}</view>
<view class="txt">当前订阅次数</view>
</view>
<view class="content">您未订阅最新招标信息或订阅次数已消耗完，请您点击订阅按钮增加订阅次数，或点击设置关闭该提示</view>
<view style="display: flex;margin-top: 10px;height: 40px;">
<view style="width:50%">
<view class="btn" bindtap="more">更多设置</view>
</view>
<view style="width:50%">
<view class="btn1" bindtap="shouquan">订阅+1</view>
</view>
</view>
</view>
</block>
wxss:
/* 弹窗 */
/* 遮罩的样式 */
.mask-view {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
background-color: #000;
width: 100%;
height: 100%;
}
.popup-view {
position: fixed;
background-color: #fff;
border-radius: 12rpx;
left: 60rpx;
top: 237rpx;
width: 630rpx;
height: 630rpx;
text-align: center;
}
.popup-content-view {
margin: 0 63rpx 0 63rpx;
}
.hint-title-text {
display: block;
color: #000;
font-size: 36rpx;
font-weight: 500;
margin-bottom: 55rpx;
}
.hint-content-text {
display: block;
color: #555;
font-size: 30rpx;
text-align: left;
}
.confirm-button-text {
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
font-size: 36rpx;
height: 100rpx;
line-height: 100rpx;
font-weight: 500;
border-top: 1rpx solid #b5b5b5;
}
.title{
font-weight:bold;
margin-top: 20rpx;
display: flex;
}
.num{
display: block;
width: 40px;
height: 50px;
color: #fff;
background-color: #000000;
font-size: 72rpx;
font-weight: bold;
border-radius: 8px;
margin-left: 41%;
}
.txt{
font-size: 30rpx;
color:rgb(207, 203, 203);
margin-top: 20rpx;
}
.content{
padding:20rpx 72rpx;
text-align: left;
font-size: 28rpx;
}
.btn{
width: 100px;
margin-left: 20%;
font-size: 32rpx;
font-weight: bold;
height: 28px;
background-color: rgb(207, 203, 203);
border-radius: 20px;
padding-top: 10px;
color: rgb(133, 131, 131);
}
.btn1{
width: 100px;
margin-left: 5%;
font-size: 32rpx;
font-weight: bold;
height: 28px;
background-color: #07c160;
border-radius: 20px;
padding-top: 10px;
color: #fff;
}
.close{
margin-left: 18%;
font-size: 26rpx;
font-weight: normal;
color: rgb(207, 203, 203);
}
.tit{
margin-left: 24%;
}
浙公网安备 33010602011771号