小程序学习(四)

基本的小程序页面

参考链接:https://blog.csdn.net/qq_35616850/article/details/82495400

设计一个小程序,首先要把基本页面构想出来。今天就是学习设计一个小程序页面的大体框架。,关于这部分的学习先是做一个简单的设计。
1.根据前面的学习,先把需要的目录文件创建完成。
在这里插入图片描述
2.这次学习想要强调的重点,就是关于tabBar(底部标签栏)的学习。为什么要学习tabBar的配置?就是为了实现页面之间进行快速的任意的切换。
首先在全局配置app.json中配置出我们需要的标签栏。小程序有几个tabBar,每个tabBar的具体表现又是怎样的,这都是通过list属性来设置的,根据前面我们构建的目录可知,一共有三个页面,那我对于三个tabBar的设置是这样的:
在这里插入图片描述
设计出来的效果就是这样:
在这里插入图片描述

3.这次只是设计search页面做了简单示范,其余页面的设计后期会继续学习。
关于search页面,呈现的效果如图:(代码就不附上了,参考链接即可)
在这里插入图片描述
至此,一个小程序页面的大体框架的设计就基本完成了,后面会继续完成页面的其他部分的学习。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 概述 本文介绍了如何使用微信小程序实现一个简单的任务管理系统,包括任务的添加、删除、修改和查询等功能。 2. 技术栈 本系统使用了微信小程序自带的框架和组件库,同时使用了云开发能力实现数据的存储和管理。 3. 功能模块 本系统分为个模块,分别是任务列表、添加任务、修改任务和查询任务。下面分别介绍这几个模块的实现方法。 3.1 任务列表 任务列表展示了当前所有的任务,并且可以对任务进行删除和修改操作。任务列表的实现主要包括以下几个步骤: 1. 在页面中引入云开发能力,获取到任务数据。 2. 使用 wx:for 循环遍历任务列表,显示每个任务的标题、内容和截止时间等信息。 3. 使用 button 组件实现删除和修改操作,点击按钮时触发对应的方法。 4. 在删除和修改操作中调用云函数,更新任务数据。 3.2 添加任务 添加任务页面允许用户输入任务的标题、内容和截止时间等信息,并且可以提交保存到数据库中。添加任务的实现主要包括以下几个步骤: 1. 在页面中使用 form 组件实现数据的收集和提交。 2. 使用 input 组件收集任务的标题、内容和截止时间等信息。 3. 在提交表单时调用云函数,将任务数据保存到数据库中。 3.3 修改任务 修改任务页面允许用户修改已有任务的标题、内容和截止时间等信息。修改任务的实现主要包括以下几个步骤: 1. 在页面中引入云开发能力,获取到指定任务的数据。 2. 使用 input 组件展示当前任务的标题、内容和截止时间等信息。 3. 在用户修改任务信息后,调用云函数更新任务数据。 3.4 查询任务 查询任务页面允许用户根据关键字查询符合条件的任务。查询任务的实现主要包括以下几个步骤: 1. 在页面中使用 input 组件实现关键字的输入。 2. 在用户输入关键字后,调用云函数查询符合条件的任务数据。 3. 使用 wx:for 循环遍历查询结果,展示每个任务的标题、内容和截止时间等信息。 4. 总结 本文介绍了如何使用微信小程序实现一个简单的任务管理系统,包括任务的添加、删除、修改和查询等功能。通过这个实例,我们可以了解到微信小程序的基本开发流程和云开发能力的使用方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值