零基础开发小程序第四课-查看功能开发

简介: 零基础开发小程序第四课-查看功能开发



本篇是我们零基础入门课的第四篇,前三篇我们介绍了创建项目、列表功能、新增功能,本篇我们介绍一下查看详情功能的开发。

1 创建页面

打开Zion开发工具,点击已经创建好的项目

点击页面旁边的+号,创建一个新的页面

2 搭建页面

查看页面要根据我们的数据表的字段来进行搭建,商品数据表我们已经建立好了,可以点击顶部导航条的数据模型图标进行查看

我们已经创建了商品名称、描述、图片、价格、库存几个字段,按照字段类型搭建一下页面。首先拖入一个图片组件

然后依次拖入三个文字组件用来显示名称、描述、价格

3 创建数据

Zion中一共有三类数据,链接数据、本地数据和远程数据。链接数据可以接收从其他页面传入的参数,本地数据可以用来存储和显示内容,远程数据可以读取数据库的数据。

先定义一个链接数据,表示从列表页传入数据的ID

然后创建一个远程数据

选择我们的商品数据表,然后定义过滤条件

如果数据限额是1就表示只取一条数据,过滤条件的话,让我们数据表的ID等于我们的链接数据

4 数据绑定

数据定义好之后,将数据依次绑定到我们的组件上

5 页面传参

查看页面定义好之后,需要给列表页面绑定事件,我们要将列表选中行的ID传入到查看页面。先选中列表页面,选中我们的容器视图,定义点击行为

依次选择跳转->跳转->查看页面

然后设置链接参数

传入列表的ID

设置的时候提示了一个错误,因为ID是整数,我们回到查看页面,将链接数据的类型修改成整数

6 预览发布

点击顶部导航条的预览,查看具体的效果,点击列表页面就可以跳转到查看页面,显示出具体的信息来

总结

我们本篇讲解了查看功能的开发,查看功能需要先定义链接数据,然后远程数据的过滤条件依据链接数据进行过滤,字段绑定到远程数据对应的字段即可。还介绍了列表页如何跳转到查看页面,如何进行传参。

使用无代码编程是非常简单的,无需考虑过多的技术概念,只需要简单的按需设置即可,如果感兴趣打开你的Zion试一下吧

相关文章
|
12天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
6天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
11天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
11天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
47 8
|
7天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
3天前
|
小程序 安全 搜索推荐
陪玩小程序的搭建解析与功能需求
陪玩小程序是为玩家提供专业陪玩服务的应用,嵌入社交或游戏平台,具备智能匹配、实时聊天、预约服务等功能,支持便捷高效的游戏体验。源码交付时需提供详细文档、技术支持及定制开发服务,确保客户能顺利维护和升级。选择陪玩小程序时应关注功能需求、用户体验、安全性和成本效益,以确保最佳使用效果。
28 0
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
35 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
348 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
57 0
微信小程序更新提醒uniapp
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
116 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目