哈喽大家好~今日的这个系列是一个成为官方合作伙伴的考试项目,我在做这个项目的时分感觉很有意义,做的进程中也感觉很风趣。所以就想把制造进程记载下来出一期帮助中心,大家能够借鉴我的教程,有任何问题也能够给我留言一同沟通。接下来我先给大家理一下会运用到的场景。

场景介绍

1、本场景共有「发布朋友圈」和「朋友圈页面」两个页面。

  • 主页以朋友圈页面

点击+时,会依据用户是否登录跳转到不同的界面。

  • 用户登录,跳转朋友圈发布页;
  • 用户未登录,则“获取微信用户基本信息”。
  • 发布后转到朋友圈页面。

2、在朋友圈中会体现发布者的微信头像和用户名。

3、疏忽界面上的点赞、评论,疏忽底部导航栏,做两个一般页面即可。

为了便利理解,本场景朋友圈图片只上传一张。

那咱们先来看一下朋友圈0.5的样子

RPReplay_Final1667358250.MP4

场景包括以下两个页面

11|无代码开发 | 如何使用Zion制作微信朋友圈?

11|无代码开发 | 如何使用Zion制作微信朋友圈?

朋友圈页面

发布页面

页面构成

发布页面

文字输入、图片挑选器

朋友圈页面

图片、文字、条件式容器、按钮

操作步骤

依照一般程序开发咱们是要先来做数据模型的建立,可是咱们这个仍是以新手的角度来做,先把页面建立,页面就像上面说的那样建立。

数据模型

页面建立完咱们就要考虑数据模型了这儿边需求记载朋友圈内容和记载是哪个用户发的,所以这样一来就一望而知需求两张表格,一张朋友圈表,一张账户表。朋友圈表记载你发表的图片和文字还有所发表的用户信息

接下来便是要点:一个用户能够发很多条朋友圈所以这儿边的关系便是账户一对多朋友圈,详细为什么这样讲,帮助中心之前的知识点有讲到。

11|无代码开发 | 如何使用Zion制作微信朋友圈?

11|无代码开发 | 如何使用Zion制作微信朋友圈?

数据模型完成之后咱们要完善页面细节(真实小程序开发,细节很重要)

11|无代码开发 | 如何使用Zion制作微信朋友圈?

demo类型自己做着验证可行功能够随意一点

发布按钮判别用户是否登录

这儿边有一个点要注意便是在「+」按钮

点击「+」按钮时,一共会出现两种情况:用户登录和用户未登录。

也便是需求去进行判别:已登录用户数据用户名非空,跳转朋友圈发布页;不然执行“获取微信用户基本信息”,获取成功后刷新已登录用户数据。

这儿用到两种方法来获取用户信息这一选项

推荐做法(省功能)—— 条件行为

添加按钮组件

在行为中挑选逻辑事情然后再挑选条件,两个条件用户名为空和用户名不为空

这儿边我也不知道怎么说才好,只能说想到这个其实仍是要多做,所以我这边直接介绍这一个做法。

11|无代码开发 | 如何使用Zion制作微信朋友圈?

11|无代码开发 | 如何使用Zion制作微信朋友圈?

yi用户名为空和不为空的时分咱们这边的条件。

11|无代码开发 | 如何使用Zion制作微信朋友圈?

11|无代码开发 | 如何使用Zion制作微信朋友圈?

然后在设置好条件为空的成功时分咱们设置一个对话框来触发这个获取用户的信息,然后再获取用户信息之后咱们再跳转到发布朋友圈页面。

11|无代码开发 | 如何使用Zion制作微信朋友圈?

11|无代码开发 | 如何使用Zion制作微信朋友圈?

条件式容器做法

11|无代码开发 | 如何使用Zion制作微信朋友圈?

11|无代码开发 | 如何使用Zion制作微信朋友圈?

11|无代码开发 | 如何使用Zion制作微信朋友圈?

11|无代码开发 | 如何使用Zion制作微信朋友圈?

再在容器里边放按钮组件,行为里设置点击时行为

11|无代码开发 | 如何使用Zion制作微信朋友圈?

你能够这么理解便是获取微信用户基本信息这一个行为需求组件来触发

获取成功后我设置了切换企图条件到用户名不为空的容器中

11|无代码开发 | 如何使用Zion制作微信朋友圈?

然后再在用户名不为空上设置行为跳转到发布页面

11|无代码开发 | 如何使用Zion制作微信朋友圈?

到了发布页面,你这边的难点便是发布按钮这个组件。

对比

其实两种方法各有优劣,前者愈加的节约功能,究竟这是在封装在按钮中的条件判别,而条件式容器便是一个大方法,你每次用的时分都会去调用这样的话就好比我每次都要请求调用,可能会形成卡顿。

可是两种方法条件式容器归于比较容易想到愈加契合咱们的逻辑思维,而行为中的条件判别归于深一点的运用不容易想到。

发布朋友圈

一般情况都是点击「发布」了之后要记载你发的这条朋友圈,这儿边点击时的行为就应该这么设置。

11|无代码开发 | 如何使用Zion制作微信朋友圈?

图片和内容都是来自于文字输入和图片挑选器这两个组件还有账户这一栏呢其实便是你发的,你就当时登陆的用户,只需读取到你的id就能够记载这一条朋友圈是你写的,然后记载成功后需求跳转到朋友圈那个页面外加刷新朋友圈的那个列表,这儿是为了从头获取一遍朋友圈列表然后显示出你刚刚写的那条朋友圈。

11|无代码开发 | 如何使用Zion制作微信朋友圈?

到这儿朋友圈0.5,能发布一张照片的朋友圈就完成了。大家能够测验去发布一条朋友圈试试效果~