十、小程序实战

使用小程序完成一个二手信息站点与 WebApp 实现流程类型，只是部分内容使用了微信小程序特有的组件，例如微信登录与 WebApp 略有差别，其它逻辑实现较为类似。我们先制作页面，之后再实现功能。

由于之前已经完成了一个 Web 站点的编写，在此为了节省阅读成本，同样重复的内容不再进行赘述。

10.1 完成小程序二手交易站点首页开发

首先我们创建一个二手交易小程序程序：

创建完毕后添加一个页面，作为小程序的登录界面。该登录界面需要授权微信账户直接进行登录，在此我们就不需要额外的登录页和注册页了。

该页面如下：

对象树信息如下：

之后则是一个首页信息，首页比起 web 端站点更加简易：

在页面中直接添加了 for 循环组件，对象树如下：

接下来是信息发布页页面：

信息发布页页面对象树如下：

最后一个页面则是商品详情页：

商品详情页对象树如下：

10.2 完成小程序二手交易站点后台开发

10.2.1 完成小程序二手交易站点微信登录开发

在小程序中需要使用后台对账户进行登录，这时跟 web 端一样，需要在后台添加一个私有用户组件：

添加了私有用户组建后，我们需要在页面的微信登录按钮上添加一个点击事件；在这里需要注意，小程序授权微信用户登录一定要点击按钮后进行发起，否则将会出错。

我们此时为登录按钮添加了点击事件后，使用私有用户对象进行发起小程序登录操作，获取用户头像与昵称：

接下来为这个动作添加回调事件。在回调事件中，我们需要创建两个文本变量存储头像与昵称，并且跳转到首页：

此时即完成了登录操作，若该账户没有进行注册将会自动进行注册。

10.2.2 完成小程序二手交易站点微信首页功能开发

首页的功能包括数据获取，数据获取需要创建一个数据库，该逻辑与 web 端实现一致：

接下来创建一个服务命名为获取数据，此实现流程与 web 端实现一致，不在赘述，直接贴出服务逻辑：

该页面还需一个对象变量，创建一个对象变量命名为商品数据，在商品数据中依旧创建与数据库一致的字段：

随后调取服务后设置该变量的值为数据库返回的结果即可：

最后为商品信息行使用for循环组件进行循环遍历，数据来源则是刚刚创建的对象变量：

再为接下来的数据绑定内容即可：

10.2.3 完成小程序二手交易站点微信信息发布页功能开发

信息发布页的图片上传实现与 web 端有所区别，我们先为选择图片按钮添加事件。点击图片选择按钮后使用文件接口对象读取本地图片：

接着为该动作创建一个回调，创建一个变量命名为上传图片路径，该变量用于获取文件的临时本地路径，并且使用这个这个变量作为文件接口上传的必要参数：

接着为上传动作添加回调，创建一个文本变量命名为已上传图片路径，将上传得到的图片 url 地址用于图片显示，并且记录该 url 路径到已上传图片路径变量：

这样就完成了基本的图片上传，接着为最后的信息提交创建一个服务：

发布信息的逻辑如下：

最后给发布按钮添加事件调用该服务即可：

10.2.4 完成小程序二手交易站点详情页功能开发

详情页实现与 web 端详情页实现一致。添加一个服务用数据ID作为信息检索条件，创建一个服务命名为某商品数据：

服务逻辑如下：

接着详情页添加事件为页面加载时进行触发：

触发后调用某商品数据服务，依靠一个 id 作为参数进行检索。此时我们创建一个变量为 数据ID：

随后该页面的页面加载触发事件逻辑则如下：

最后我们在首页图片中添加一个点击事件，这个点击事件将会设置 数据ID 变量的值为点击图片所对应的 ID 值即可：

最后为各个按钮设置跳转连接即可完成小程序的制作。