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

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

效果图如下

控制显示用户协议窗口

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

<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字段

var that = this
var userAgree = wx.getStorageSync('userAgree') || false
that.setData({userAgree
})

因为用户协议很长，因此点击查看会导航到另一个页面

goToUserLicence: function(){wx.navigateTo({url: '/pages/licence/licence',success: function(res) {},fail: function(res) {},complete: function(res) {},})
}

首页用户协议弹窗用到的css

.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

<view><view class='title'>用户授权协议</view><view class='h1'>使用条款及声明</view><view>xxx</view><view class='h1'>小程序用途</view><view>yyy</view>
<view>

licence.wxss

/* 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/

小程序用户协议页面实现相关推荐

微信小程序用户协议和隐私协议
<template><view class="myOne"><view class="my-div"><text cl ...
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js o ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
【微信小程序控制硬件⑦ 进阶篇】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为心里全栈工程师梦想浇水。
文章目录一.前言: 二.涉及的技术点: 三.框架的运行原理: 四.框架代码流程: 4.1 主线程: 4.2 获取设备列表显示设备,以及订阅在线的设备: 4.3 点击某设备如何实现携带此设备信息到控制 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
小程序用户拒绝授权解决方法
众所周知,小程序进入首先都要进行微信授权的,那万一用户不小心点了拒绝按钮怎么办呢?不要慌,官方早已预料到此情况,并提供了api供开发者使用,下面就一起来研究下api吧一.API接口 wx.openS ...
webform窗体怎么实现session唯一标识_微信小程序用户登录和登录态维护的实现_javascript技巧...
这篇文章主要介绍了微信小程序用户登录和登录态维护的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧让用户登录,标识用户和获取 ...
微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...

小程序用户协议页面实现

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

控制显示用户协议窗口

用户协议页面设计

参考

小程序用户协议页面实现相关推荐

最新文章

热门文章