十小程序实战 (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 快速开发教程)的主要内容,如果未能解决你的问题,请参考以下文章

零基础“复刻”经典飞机大战小程序游戏一篇文使用 IVX 轻松实战5

会员管理小程序实战开发教程-会员查询功能

电商小程序实战教程-首页重构

微信小程序教程汇总

基于云开发的微信小程序实战教程

基于云开发的微信小程序实战教程