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

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



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

1 创建页面

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

输入页面名称

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

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

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

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

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

录入我们的测试数据

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

2 为文本组件增加事件

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

设置打开页面事件

选择我们的用户协议页面

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

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

3 检查用户协议是否勾选

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

设置判断条件

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

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

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

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

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

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

最终效果

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

相关文章
|
6月前
|
安全 JavaScript 前端开发
多商户商城/多商家入驻系统开发指南教程/稳定版/功能需求/项目源码
Developing a multi merchant mall/multi merchant entry system involves multiple modules such as user management, merchant management, product management, and order management. Here is a simple development guide tutorial to help you build such a system
|
6月前
|
移动开发 容器
订水商城H5实战教程-02系统登录
订水商城H5实战教程-02系统登录
|
6月前
|
移动开发 小程序 数据安全/隐私保护
订水商城H5实战教程-05权限控制
订水商城H5实战教程-05权限控制
|
6月前
|
移动开发 容器
订水商城H5实战教程-04用户注册
订水商城H5实战教程-04用户注册
|
JSON 小程序 数据可视化
手把手带你开发一款云开发版点餐小程序,微信扫码点餐,用户端和后厨端都有
手把手带你开发一款云开发版点餐小程序,微信扫码点餐,用户端和后厨端都有
420 0
|
7天前
|
JSON BI API
商城上货API接口的实战案例
在商城上货过程中,API接口扮演着至关重要的角色。以下是对商城上货API接口的实战分析,涵盖其主要功能、类型、安全性以及实战案例等方面。
|
6月前
|
小程序 JavaScript 前端开发
基于微信小程序的商城购物系统的设计与实现(论文+源码)_kaic
基于微信小程序的商城购物系统的设计与实现(论文+源码)_kaic
|
6月前
|
小程序 JavaScript Java
商城|商城小程序|基于微信小程序的智慧商城系统设计与实现(源码+数据库+文档)
商城|商城小程序|基于微信小程序的智慧商城系统设计与实现(源码+数据库+文档)
135 1
|
5月前
|
JSON 安全 API
电商开发者必读:微店商品详情API接口全解析
微店商品详情API让开发者能通过商品ID获取包括名称、价格、库存、描述和图片在内的详细信息。开发者需注册账号、获取API密钥和访问权限,并熟悉HTTP请求。请求示例为GET方法,响应数据以JSON格式返回。注意错误处理、保密性、频率限制和数据验证,以确保安全和高效使用。
|
6月前
|
存储 JSON API
如何教会小白使用淘宝API接口获取商品数据
随着互联网的普及,越来越多的人开始接触网络购物,而淘宝作为中国最大的电商平台之一,成为了众多消费者首选的购物平台。然而,对于一些小白用户来说,如何通过淘宝API接口获取商品数据可能是一个难题。本文将详细介绍如何教会小白使用淘宝API接口获取商品数据。