订水商城H5实战教程-03用户协议

简介: 订水商城H5实战教程-03用户协议



我们上一篇介绍了打开首页时弹出登录窗口的功能,本篇我们实现一下用户协议。

1 创建页面

功能是点击用户协议的时候打开具体的协议内容,需要先创建一个页面。打开自定义应用,点击新建页面的图标

输入页面名称

在页面里添加一个数据详情组件

数据模型选择用户协议,数据筛选设置为协议名称等于用户协议

然后清空数据详情的组件,我们添加一个富文本展示组件

给内容属性绑定字段,点击fx,绑定为协议内容

现在页面内容是空的,因为还没有录入数据,点击左侧导航条的数据源图标,找到我们的用户协议数据源,点击管理数据

录入我们的测试数据

数据录入后再次刷新页面,数据就加载出来了

2 为文本组件增加事件

我们现在用户协议用蓝色标识,引导用户可以点击,选中文本组件,增加事件

设置打开页面事件

选择我们的用户协议页面

用户协议页面还应该有个导航条引导用户再回到首页,添加一个顶部导航组件

修改我们的导航标题,改为用户协议

3 检查用户协议是否勾选

在登录的时候需要检查用户协议是否勾选,可以在点击确定按钮时候加判断条件。选中确定按钮,设置事件,选中逻辑分支

设置判断条件

If($w.radio1.value==='1', true, false)

这个表达式有三个参数,第一个是条件,第二个和第三个是返回值。逻辑是如果条件为true就返回true,如果条件为false就返回false

我们这里用$w.radio1.value获取单选按钮的选中值,如果值为1表示单选按钮被选中,否则就返回false

如果单选按钮被选中,我们跳转到注册页面,新建一个用户注册的页面

当满足条件时我们打开用户注册页面

当不满足条件时,设置提示信息,提示用户勾选

最终效果

打开首页,点击用户协议跳转到用户协议页面,未勾选的时候点击确认提示信息,勾选之后跳转到注册页面

相关文章
|
缓存 JSON 前端开发
CORS 详解,终于不用担心跨域问题了
CORS 详解,终于不用担心跨域问题了
9363 1
CORS 详解,终于不用担心跨域问题了
|
人工智能 JSON 小程序
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
|
9月前
|
存储 人工智能 自然语言处理
深度解析智能体工作流(Agentic Workflows):核心概念、模式与应用
本文系统解析智能体工作流(Agentic Workflow),结合AI智能体的推理、工具与记忆能力,实现复杂任务的动态执行。内容涵盖核心概念、关键模式及实际应用,帮助读者全面理解其价值与挑战。
7218 1
|
IDE Java 程序员
学生邮箱白嫖/免费安装JetBrains全家桶(IDEA/pycharm等) —— 保姆级教程
本文提供了如何使用学生邮箱免费获取并安装JetBrains全家桶(包括IDEA、PyCharm等)的详细教程,涵盖了学生认证、软件下载、安装及常见问题的解决方法。
7421 0
学生邮箱白嫖/免费安装JetBrains全家桶(IDEA/pycharm等) —— 保姆级教程
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
关系型数据库 Linux 数据库
PostgreSQL 入门指南:安装、配置与基本命令
本文从零开始,详细介绍如何在 Windows、Linux 和 macOS 上安装和配置 PostgreSQL,涵盖30+个实操代码示例。内容包括安装步骤、配置远程访问和用户权限、基础数据库操作命令(如创建表、插入和查询数据),以及常见问题的解决方案。通过学习,你将掌握 PostgreSQL 的基本使用方法,并为后续深入学习打下坚实基础。
14933 1
|
人工智能 算法 大数据
【天池大赛】历届比赛资料
【天池大赛】历届比赛资料
|
JSON 小程序 API
了解API文档
API文档是技术手册,详述了如何使用和集成API。内容涵盖API功能、参数信息、调用方式、返回值及错误码等。其作用在于帮助开发者高效理解和运用API,降低开发成本,提升效率。对于API提供者来说,良好的文档有助于提高API的易用性和稳定性,减少支持成本。常见的文档格式包括HTML、PDF和Markdown,而Swagger和Postman等工具则方便生成和测试API文档。无论是Java官方API还是微信小程序API,理解文档都是使用API的关键步骤。
|
测试技术 持续交付 开发工具
一文掌握:Gitlab的完整使用手册
一文掌握:Gitlab的完整使用手册
|
JavaScript Linux 区块链
使用Ganache搭建本地测试网并实现远程连接
使用Ganache搭建本地测试网并实现远程连接