小程序用户协议页面设计思路
- 新增用户协议页面
- 首页加载（
onLoad()）的时候，检查是否已经同意过，没有的话则弹出用户协议界面。点击详情跳转到用户协议页面(使用wx.navigateTo)
- 用户点击同意后，才能继续使用小程序，并且保存到storage
效果图如下
控制显示用户协议窗口
在首页新增一个view，根据全局userAgree的值，决定是否显示弹窗
1
2
3
4
5
6
7
8
9
10
11
12
|
<view wx:if='{{userAgree==false}}'>
<view catchtouchmove="catchtouchmove" class="tips">
<view class="tips_box">
<view class="hint_view">
<view class="text">
<view class="hint1" bindtap='goToUserLicence'>点击查看《xx小程序》使用协议</view>
</view>
</view>
<button bindtap='tipAgree' class="agreeBtn" type='primary'>我已阅读并同意</button>
</view>
</view>
</view>
|
因此要在首页增加一个全局变量
更新onLoad()事件从storage读取userAgree字段
1
2
3
4
5
|
var that = this
var userAgree = wx.getStorageSync('userAgree') || false
that.setData({
userAgree
})
|
因为用户协议很长，因此点击查看会导航到另一个页面
1
2
3
4
5
6
7
8
|
goToUserLicence: function(){
wx.navigateTo({
url: '/pages/licence/licence',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}
|
首页用户协议弹窗用到的css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
.tips {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
z-index: 100;
100%;
height: 100%;
background: rgba(0,0,0,0.7);
}
.tips .tips_box {
display: flex;
flex-direction: column;
align-items: center;
75%;
height: auto;
border-radius: 45rpx;
background: #fff;
overflow: hidden;
}
.tips .tips_box .hint_view {
display: flex;
align-items: center;
}
.tips .tips_box .hint_view .text {
display: flex;
flex-direction: column;
margin: 12rpx 24rpx;
}
.tips .tips_box .hint1 {
margin-top: 38rpx;
text-align: center;
font-size: 30rpx;
color: #1a1a1a;
line-height:52rpx;
border-bottom:1px solid;
}
.agreeBtn {
display: flex;
justify-content: center;
align-items: center;
margin: 32rpx 0 32px;
70%;
line-height: 64rpx;
border-radius: 80rpx;
font-size: 32rpx;
letter-spacing: 6rpx;
color: #fff;
}
.isTipShow {
display: block;
}
.isTipHide {
display: none;
}
|
用户协议页面设计
作为Java后端架构汪，写起前端页面也就hehehe的水平，仅供参考。
css在线调试，用到这个工具 https://tool.chinaz.com/tools/cssdesigner.aspx
licence.wxml
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<view>
<view class='title'>用户授权协议</view>
<view class='h1'>使用条款及声明</view>
<view>
xxx
</view>
<view class='h1'>小程序用途</view>
<view>
yyy
</view>
<view>
|
licence.wxss
参考
https://ycwu314.github.io/p/minapp-user-licence-implementation/