小程序用户协议页面实现

小程序用户协议页面设计思路

  1. 新增用户协议页面
  2. 首页加载(onLoad())的时候,检查是否已经同意过,没有的话则弹出用户协议界面。点击详情跳转到用户协议页面(使用wx.navigateTo)
  3. 用户点击同意后,才能继续使用小程序,并且保存到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>

因此要在首页增加一个全局变量

1
2
// 用户协议
var userAgree = false

更新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;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
}

.tips .tips_box {
display: flex;
flex-direction: column;
align-items: center;
width: 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;
width: 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* pages/licence/licence.wxss */

.title {
text-align: center;
font-size: 20pt;
font-weight : bold;
margin: 20px;
}

.h1 {
text-align: left;
font-size: 16pt;
margin: 10px;
}

参考

 

https://ycwu314.github.io/p/minapp-user-licence-implementation/

posted @ 2019-07-31 11:24 ycwu314 阅读(...) 评论(...) 编辑 收藏