手把手教你开发电商类小程序 Vol.1 | 实战教程

前段时间,微信正式对外发布了小程序的公测,虽然暂时不支持对外发布,但也意味着有更多的开发者可以参与到小程序的开发中来。

作为第一批获得微信小程序内测资格的媒体,爱范儿(微信号 ifanr)的技术团队曾用一个上午时间,完成了旗下电商平台玩物志(微信号 coolbuy)的小程序 Demo ,并第一时间分享了开发经验,引发广泛关注。

今天知晓程序(微信号 zxcx0101)就以玩物志的小程序为例,演示如何一步步开发一个完整的电商类小程序,并分享小程序开发过程中需要注意的点。

玩物志在内测期间开发的小程序 Demo

注:本系列文章的 Demo 采用微信小程序 2016.10.31 更新的 0.10.102800 版本,因版本升级出现的差异,请注意甄别。

玩物志小程序跟常见的电商平台类似,主要由首页、分类页、商品列表页、商品详情页、购物车、订单结算页和个人中心等几大模块组成。

知晓程序(微信号 zxcx0101)会分几期来对每个模块的关键点作详细说明。

在此过程中,本文也会穿插介绍一些常用简单内置组件的使用,最再后利用小程序的 template 模板,对自定义组件化开发的实现提供三种参考模式。

准备开工

我们先新建一个文件夹 coolbuy 作为项目目录,里面包含:

  • common 目录——用来放置项目公用的文件
  • pages 目录——项目页面开发目录,里面的每个子目录代表一个独立页面,分别包含与目录同名的 .wxml(必须),.wxss.js(必须)和 .json 文件
  • templates 目录——用来放置自定义的组件
  • utils 目录——用来放置工具类 js 文件
  • app.js——小程序逻辑
  • app.json——小程序公共设置
  • app.wxss——小程序公共样式表

轮播 banner 样式定义

接下来,是首页的实现。

首页在 pages/index 目录下,包括 index.wxml, index.wxss, 三个文件。

首页的完整 Demo 图如下:

第一步,实现 banner 轮播图,来看代码:

值得注意的是,image 组件会有一个默认的样式。

官方文档中说 image 组件默认宽度 300px、高度 225px,但是,根据开发者工具 v0.10.102800 版中的测试,image 组件的默认样式为:

这个值可能会在小程序以后的升级中进行修改。

知晓程序(微信号 zxcx0101)提醒: 跟 image 组件类似,大多数小程序内置组件都会有自己的默认样式,初学者可以利用开发都工具中的 Wxml Panel,多了解一下这些组件的默认样式,可以避免很多由组件默认样式引起的问题。

关注知晓程序(微信号 zxcx0101),点击菜单栏「干货合辑」-「开发指南」,获取爱范儿发布的文章《微信小程序组件默认样式优先级 bug 解析》。

我们要根据实际情况给它重新定义一个宽高值:

在这里使用了小程序特有的 rpx 单位,这个尺寸单位会放到第二期的页面布局中来讲。

另一个注意点是,不要将大图片放到项目目录中,因为小程序代码总大小不能超过 1 MB,而大图片会占用大量的空间,所以要尽量避免在项目目录中放置大图片。

如有需要,建议只在项目目录中放置少量 icon 类的小图片,其他大图片可以上传到自己的服务器或者网盘中,然后在 src 中设置图片的网络资源地址。

在手机测试或者正式上线之前,要注意是否有引用了本地大图片导致代码超出大小限制的问题。

准备获取 banner 数据,并绑定到视图层

接下来,我们看看数据的绑定:

Page 里的 data 会以 JSON 的形式由逻辑层传至视图层,然后在视图层中使用 Mustache 语法(双大括号)接收传入的数据,实现动态数据的数据绑定。

经过绑定后的数据变动可以在视图中实时反应,也可以通过开发者工具中的 AppData Panel 中查看和编辑页面中的所有 data 数据。

知晓程序(微信号 zxcx0101)提醒:当你不知道 data 数据是否被设置成功的时候,可以到 AppData Panel 来查看一下,免去了手动打 console.log 进行调试的麻烦。

实现动态数据绑定的另一个方式是使用 this.setData() 方法,this 在这里代表的是 Page,setData 是在 PageX.prototype 中的方法,所以 this.setData() 实际上访问的是 Page.prototype.setData()

它可以用来新增和修改 this.data 里的值,同时还有一个重要的功能是将数据从逻辑层发送到视图层,从而实时改变页面的状态,保持逻辑层和视图层数据的一致性。

需要注意的是,如果使用 this.data.property = value,同样可以设置 this.data 的值,但是它不会将数据发送到视图层,无法改变页面的状态。

知晓程序(微信号 zxcx0101)提醒:一定要避免使用 this.data.property = value 的方式设置数据。

从服务器获取 banner 数据

言归正传,现在我们的目的是要得到一个 banners 数组,然后利用 wx:forbanners 数组中的每一项渲染到 swiper-item 中。

我们可以在页面加载 (onLoad) 时,使用 wx.request() 发起一个 ajax 请求,来获取到所需要的 banner 列表数据。

先来看一下 wx.request(object) 的使用方法。首先是 object 可以接受的参数值:

  • url:发送请求的地址。
  • method:请求方式,默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT。知晓程序(微信号 zxcx0101)提醒,所有值都要使用大写。经过我们测试,若使用小写,在安卓中会导致无法发起请求,而在开发者工具和 iOS 中则正常。
  • data:设置请求的参数。如果 method 值为 GET,这个函数会将 data 转换成 query 字符串,拼接在 url 后面,若 url 本身带有同名的 query 参数,那么 data 中的参数会覆盖 url 中的 query 参数;

小程序执行 wx.request(object) 发送请求并收到 success(成功)的消息后,会自动执行请求成功返回的回调函数。回调函数执行时,会自动收到类似这样的回调参数:

特别注意,在开发者工具和 iOS 中,res.statusCode 的类据类型是一个数值,而在安卓中的数据类型是一个字符串,所以在判断 res.statusCode 时不能直接使用 === 操作符,而应该用 == 操作符,或者是先对 res.statusCode 进行数据类型转换。

现在,就可以在 onLoad 中调用 wx.request() 发起请求,访问获取 banner 列表的服务器 API

我们将各服务器 API 的访问地址都保存在 API_URL 对象,保存在 utils/config.js 中:

然后需要在 index.js 中使用 require 引入 utils/config.js 文件,引入路径为当前文件的相对路径:

于是,我们就知道了在小程序中 js 模块化的方法,模块通过 module.exports 对外暴露接口,在需要使用这些模块的文件中,使用 require(path) 将公共代码引入。

发起 wx.request 请求:

wx.request() 的回调函数中判断 res.statusCode 是否为 200,若为 200 则代表请求成功,接着将数据保存到 banners 数组中。

我们在 success 回调函数中使用 _this.setData({ banners: res.data.objects }); 设置 banners 的值。

知晓程序(微信号 zxcx0101)提醒:这里不能直接使用 this.setData() ,因为 success 回调函数是一个闭包,我们要先在闭包外面定义 var _this = this; ,再调用 _this.setData() ,以保证闭包内能到正确的 this 值。

现在,在视图中我们就能看到完整的 banner 列表了。

本文介绍了小程序中内置组件、数据绑定和发送请求 API 的用法,提醒了初学者一些不容易注意到的坑,通过上面的介绍和实际代码演示,希望能帮助初学者更容易理解和使用小程序的基他组件和 API

下一期,知晓程序(微信号 zxcx0101)将会介绍小程序中 flex 布局结合 rpx 的应用和 template 模板以及交互反馈类 API 的使用。请继续关注我们的内容。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2016-11-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

Android Binder面试详解

目前linux支持的IPC包括传统的管道、System V IPC、即消息队列/共享内存/信号量,以及socket中只有socket支持Client-Serve...

581
来自专栏知晓程序

零基础学开发,她做了款「仿知乎」小程序 | 实战教程

1335
来自专栏移动开发之家

GSYVideoPlayer项目说明

项目目前UI层大部分方法和变量都是protect,虽然就封装性而言这并不是很好,但你可以继承后快捷实现你的自定义。

503
来自专栏大数据钻研

前端面试那些坑之HTML篇

HTML 1、Doctype作用?标准模式与兼容模式各有什么区别? (1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html> 标签之前...

3419
来自专栏从零开始学自动化测试

selenium+python自动化81-报告优化

一、 优化html报告 为了满足小伙伴的各种变态需求,为了装逼提示逼格,为了让报告更加高大上,测试报告做了以下优化: - 测试报告中文显示,优化一些断言失败...

3585
来自专栏知晓程序

如何开发电商类小程序 Vol.3:数据加载和图文排版

1004
来自专栏腾讯Bugly的专栏

Android 内存优化总结&实践

导语 智能手机发展到今天已经有十几个年头,手机的软硬件都已经发生了翻天覆地的变化,特别是Android阵营,从一开始的一两百M到今天动辄4G,6G内存。然而大部...

3857
来自专栏青枫的专栏

day60_BOS项目_12

802
来自专栏用户3211691的专栏

前端面试题1(HTML篇)

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

451
来自专栏QQ音乐技术团队的专栏

React v16 新特性实践

我们在对以上新特性经过一段时间的使用过后,通过本文进行一些细节分享和总结。

5578

扫码关注云+社区