十小程序实战 （IVX 快速开发教程）
Posted 1_bit
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了十小程序实战 （IVX 快速开发教程）相关的知识，希望对你有一定的参考价值。
十、小程序实战
使用小程序完成一个二手信息站点与 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 值即可：
最后为各个按钮设置跳转连接即可完成小程序的制作。
以上是关于十小程序实战 （IVX 快速开发教程）的主要内容，如果未能解决你的问题，请参考以下文章