百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

喂饭级教程!教你用coze做一个微信小程序之一:如何搭建页面

ccwgpt 2025-04-28 23:39 26 浏览 0 评论

coze最新的更新,可以创建应用并发布到小程序了,虽然目前coze应用目前还处于beta测试版,但我目前体验下来,感觉真的太强大了。

从此我一个从来没折腾过微信小程序的,也可以通过拖拉拽轻松搭建一个自己想要的应用了,这种感觉真的太好了。

如果你也有自己的创意,却苦于开发成本太大。

那么,现在!可以跟着我的脚步,来试试亲手做一个微信小程序吧!

今天的目标是,教大家把页面建设起来,come on!

一、如何创建一个应用

1、进入coze,创建一个空白应用

2、点击创建,选择创建应用

3、接着点击创建空白应用

4、然后根据你的需要填写相关信息,点确认


二、规划功能

为了方便零基础搭建,我这里不设计太复杂的功能,这个海报生成器,我只设计两个功能点

1、首页,里面就是一个生成海报的页面

2、我的、里面保存历史生成的记录

以上功能的具体逻辑,都将使用工作流来实现,后面我会细说,今天的目标主要是完成页面的设计。

三、如何搭建一个移动端的UI界面

应用有了,那么接下来,就是设计页面了。

1、选择UI搭建类型

进入应用之后,点击上方的“用户界面”,选“小程序和H5”,然后点“开始搭建”

2、设计“首页”,一个海报生成页面

①、添加一个表单,用来做请求生成

②、设计表单

我的页面很简单,就是用户提供一个24节气的节气名称,然后填写一下生成的图像要求,然后点击生成,就生成一个海报。所以将表单修改之后如下图:

内容的修改很简单,就是点击你要修改的地方,右边就会出现属性什么的,基本一看就会,所以我就不细说了。

③、添加一个用于显示生成图片的位置

点击生成之后,会生成图片,因此我们需要设计一个地方来预览这个图片,我这里就简单做,不做多个层级,我直接在表单下方添加一个图片用来显示。

因为我们做的手机的壁纸,所以图片比例需要修改为9:16

这样一个简单是首页就搭建完毕了,有的人可能会问了,那页面上一进来就有这个图片,看着也很奇怪呀。没错,

确实很奇怪,所以后续我们在做业务逻辑的时候,还需要对图片的可见性进行控制。现在先不着急改。

3、设计“我的”页面,展示历史生成记录

海报生成之后,我希望将生成的数据记录下来,这样后续可以看到之前生成的图像,这应该算是基础功能吧。

①、新建一个页面

点击页面下方这个按钮,新建一个页面,我们命名为“我的”

②、关联菜单项到“我的”

点击页面下方的菜单栏,然后将“我的”按钮页面跳转跟新建的页面关联

记得,前面是首页那里的菜单也要同样设置一下,否则菜单会有问题。

都设置完成之后,点击一下预览查看一下点击菜单的切换是否正常。

③、添加一个纵向列表

用来展示历史生成图片

④、增加标题和时间显示

我希望,图片在上,然后图片下方是节气名称加上生成时间最终效果是这样子的

那要怎么做呢?

我们如果需要改变一些布局,我们需要用到“容器”控件,这个控件专门用于我们灵活排版的。现在,我加一个容器到内容下方,只需要拖动到一个,其他列表一样就会出现了。

接下来我们单击标题,不要放开,将它拖动到容器中,现在变成这样子:

由于我还需要显示一个时间,所以我还需要拖进来一个文本显示

文本是进来了,但是我们发现这样子的排版看着有点奇怪吧,所以我需要再调整,点击控件位置

然后调整右边这些参数,高度改成:适应内容,排列方向选择横向,内边距调整成0,大家可以自己随便改改看看效果,后面就知道每个功能大体什么意思了。

经过上面一顿操作,现在页面就变成这样子了

⑤、增加图片显示

因为我们需要显示的是图片记录,因此我们还需要将内容替换成图片,我们把图片拖进来,然后把原来的内容删掉

最终效果就变成这样子了:

到这里,我们的页面搭建就基本完成了。当然大家如果要求高的话,可以自己再动手美化美化。

干货内容太多,本期就先分享页面搭建了,下一期将带大家实现海报生成的业务逻辑。敬请期待!

相关推荐

2025南通中考作文解读之四:结构框架

文题《继续走,迈向远方》结构框架:清晰叙事,层层递进示例结构:1.开头(点题):用环境描写或比喻引出“走”与“远方”,如“人生如一条长路,每一次驻足后,都需要继续走,才能看见更美的风景”。2.中间...

高中数学的知识框架(高中数学知识框架图第三章)

高中数学的知识框架可以划分为多个核心板块,每个板块包含具体的知识点与内容,以下为详细的知识框架结构:基础知识1.集合与逻辑用语:涵盖集合的概念、表示方式、性质、运算,以及命题、四种命题关系、充分条件...

决定人生的六大框架(决定人生的要素)

45岁的自己混到今天,其实是失败的,要是早点意识到影响人生的六大框架,也不至于今天的模样啊!排第一的是环境,不是有句话叫人是环境的产物,身边的环境包括身边的人和事,这些都会对一个人产生深远的影响。其次...

2023年想考过一级造价师土建计量,看这30个知识点(三)

第二章工程构造考点一:工业建筑分类[考频分析]★★★1.按厂房层数分:(1)单层厂房;(2)多层厂房;(3)混合层数厂房。2.按工业建筑用途分:(1)生产厂房;(2)生产辅助厂房;(3)动力用厂房;(...

一级建造师习题集-建筑工程实务(第一章-第二节-2)

建筑工程管理与实务题库(章节练习)第一章建筑工程技术第二节结构设计与构造二、结构设计1.常见建筑结构体系中,适用建筑高度最小的是()。A.框架结构体系B.剪力墙结构体系C.框架-剪力墙结构体系D...

冷眼读书丨多塔斜拉桥,这么美又这么牛

”重大交通基础设施的建设是国民经济和社会发展的先导,是交通运输行业新技术集中应用与创新的综合体现。多塔斜拉桥因跨越能力强、地形适应性强、造型优美等特点,备受桥梁设计者的青睐,在未来跨越海峡工程中将得...

2021一级造价师土建计量知识点:民用建筑分类

2021造价考试备考开始了,学霸君为大家整理了一级造价师备考所用的知识点,希望对大家的备考道路上有所帮助。  民用建筑分类  一、按层数和高度分  1.住宅建筑按层数分类:1~3层为低层住宅,4~6层...

6个建筑结构常见类型,你都知道吗?

建筑结构是建筑物中支承荷载(作用)起骨架作用的体系。结构是由构件组成的。构件有拉(压)杆、梁、板、柱、拱、壳、薄膜、索、基础等。常见的建筑结构类型有6种:砖混结构、砖木结构、框架结构、钢筋混凝土结构、...

框架结构设计经验总结(框架结构设计应注意哪些问题)

1.结构设计说明主要是设计依据,抗震等级,人防等级,地基情况及承载力,防潮抗渗做法,活荷载值,材料等级,施工中的注意事项,选用详图,通用详图或节点,以及在施工图中未画出而通过说明来表达的信息。2.各...

浅谈混凝土框架结构设计(混凝土框架结构设计主要内容)

浅谈混凝土框架结构设计 摘要:结构设计是个系统的全面的工作,需要扎实的理论知识功底,灵活创新的思维和严肃认真负责的工作态度。钢筋混凝土框架结构虽然相对简单,但设计中仍有很多需要注意的问题。本文针...

2022一级建造师《建筑实务》1A412020 结构设计 精细考点整理

历年真题分布统计1A412021常用建筑结构体系和应用一、混合结构体系【2012-3】指楼盖和屋盖采用钢筋混凝土或钢木结构,而墙和柱采用砌体结构建造的房屋,大多用在住宅、办公楼、教学楼建筑中。优点:...

破土动工!这个故宫“分院”科技含量有点儿高

故宫“分院”设计图。受访者供图近日,位于北京海淀区西北旺镇的故宫北院区项目已开始破土动工,该项目也被称作故宫“分院”,筹备近十年之久。据悉,故宫本院每年展览文物的数量不到1万件,但是“分院”建成后,预...

装配式结构体系介绍(上)(装配式结构如何设计)

PC构件深化、构件之间连接节点做法等与相应装配式结构体系密切相关。本节列举目前常见的几种装配式结构体系:装配整体式混凝土剪力墙结构体系、装配整体式混凝土框架结构体系、装配整体式混凝土空腔结构体系(S...

这些不是双向抗侧结构体系(这些不是双向抗侧结构体系的特点)

双向抗侧土木吧规范对双向抗恻力结构有何规定?为何不应采用单向有墙的结构?双向抗侧土木吧1.规范对双向抗侧力结构体系的要求抗侧力体系是指抵抗水平地震作用及风荷载的结构体系。对于结构体系的布置,规范针对...

2022一级建造师《建筑实务》1A412020 结构设计 精细化考点整理

1A412021常用建筑结构体系和应用一、混合结构体系【2012-3】指楼盖和屋盖采用钢筋混凝土或钢木结构,而墙和柱采用砌体结构建造的房屋,大多用在住宅、办公楼、教学楼建筑中。优点:抗压强度高,造价...

取消回复欢迎 发表评论: