🧑🏻‍💻 作者：中国 - 苏州- 科兰网络保洁

导语

这系列是一个成为官方合作伙伴的考试项目，项目很有趣味意义所以就想着出一期帮助中心，以便大家更好的去借鉴。

场景介绍

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

• 首页以朋友圈页面点击+时，会根据用户是否登录跳转到不同的界面。

• 用户登录，跳转朋友圈发布页；

• 用户未登录，则“获取微信用户基本信息”。
• 发布后转到朋友圈页面。2、在朋友圈中会体现发布者的微信头像和用户名。 3、忽略界面上的点赞、评论，忽略底部导航栏，做两个普通页面即可。 为了方便理解，本场景朋友圈图片只上传一张。 那我们先来看一下朋友圈0.5的样子

场景包含以下两个页面

img	img

朋友圈页面 发布页面

页面构成

发布页面 文字输入、图片选择器 朋友圈页面 图片、文字、条件式容器、按钮

操作步骤

按照一般程序开发我们是要先来做数据模型的搭建，但是我们这个还是以新手的角度来做，先把页面搭建，页面就像上面说的那样搭建。

数据模型

页面搭建完我们就要考虑数据模型了这里面需要记录朋友圈内容和记录是哪个用户发的，所以这样一来就一目了然需要两张表格，一张朋友圈表，一张账户表。朋友圈表记录你发表的图片和文字还有所发表的用户信息 接下来就是重点：一个用户可以发很多条朋友圈所以这里面的关系就是账户一对多朋友圈，具体为什么这样讲，帮助中心之前的知识点有讲到。

img	img

数据模型完成之后我们要完善页面细节（真实小程序开发，细节很重要）

demo类型自己做着验证可行性可以随意一点

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

这里面有一个点要注意就是在「+」按钮 点击「+」按钮时，一共会出现两种情况：用户登录和用户未登录。 也就是需要去进行判断：已登录用户数据用户名非空，跳转朋友圈发布页；否则执行“获取微信用户基本信息”，获取成功后刷新已登录用户数据。 这里用到两种方法来获取用户信息这一选项

推荐做法（省性能）—— 条件行为

添加按钮组件 在行为中选择逻辑事件然后再选择条件，两个条件用户名为空和用户名不为空 这里面我也不知道怎么说才好，只能说想到这个其实还是要多做，所以我这边直接介绍这一个做法。

img	img

用户名为空和不为空的时候的条件设置。

img	img

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

img	img

条件式容器做法

img	img	img	img

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

你可以这么理解就是获取微信用户基本信息这一个行为需要组件来触发 获取成功后我设置了切换试图条件到用户名不为空的容器中

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

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

对比

其实两种方法各有优劣，前者更加的节省性能，毕竟这是在封装在按钮中的条件判断，而条件式容器就是一个大方法，你每次用的时候都会去调用这样的话就好比我每次都要请求调用，可能会造成卡顿。 但是两种方法条件式容器属于比较容易想到更加符合我们的逻辑思维，而行为中的条件判断属于深一点的运用不容易想到。

发布朋友圈

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

图片和内容都是来自于文字输入和图片选择器这两个组件还有账户这一栏呢其实就是你发的，你就当前登陆的用户，只要读取到你的id就可以记录这一条朋友圈是你写的，然后记录成功后需要跳转到朋友圈那个页面外加刷新朋友圈的那个列表，这里是为了重新获取一遍朋友圈列表然后显示出你刚刚写的那条朋友圈。

到这里朋友圈0.5，能发布一张照片的朋友圈就完成了。你可以尝试去发布一条朋友圈试试效果。