小程序用户协议页面实现

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

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

效果图如下

控制显示用户协议窗口

在首页新增一个view，根据全局userAgree的值，决定是否显示弹窗

1 2 3 4 5 6 7 8 9 10 11 12

点击查看《xx小程序》使用协议 我已阅读并同意

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

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

用户授权协议 使用条款及声明 xxx 小程序用途 yyy

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/