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

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

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


1 创建页面


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

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


2 搭建页面


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

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

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


3 创建数据


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


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

然后创建一个远程数据

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

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

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
2天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
12 3
|
8天前
|
小程序
|
8天前
|
小程序
|
28天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
186 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
44 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
99 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
3月前
|
存储 小程序 JavaScript

热门文章

最新文章