开发一个电商的电商小程序开发要多少钱

来源：蜘蛛抓取(WebSpider) 时间：2018-09-21 09:26 标签： 电商小程序开发
知晓程序（微信号 zxcx0101）是爱范儿旗下专注于小程序生态的公众号。我们提供最全面、新鲜的小程序资讯（消息、观点、指南、活动）和服务，在这里你能了解到关于小程序的一切。
前段时间，微信正式对外发布了小程序的公测，虽然暂时不支持对外发布，但也意味着有更多的开发者可以参与到小程序的开发中来。
作为第一批获得微信小程序内测资格的媒体，爱范儿（微信号 ifanr）的技术团队曾用一个上午时间，完成了旗下电商平台玩物志（微信号 coolbuy）的小程序 Demo ，并第一时间分享了开发经验，引发广泛关注。

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


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

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

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

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

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

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

  • common 目录——用来放置项目公用的文件

  • pages 目录——项目页面开发目录，里面的每个子目录代表一个独立页面，分别包含与目录同名的 .wxml（必须），.wxss，.js（必须）和 .json 文件

  • app.js——小程序逻辑

  • app.json——小程序公共设置

  • app.wxss——小程序公共样式表

接下来，是首页的实现。
首页的完整 Demo 图如下：

第一步，实现 banner 轮播图，来看代码：

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

这个值可能会在小程序以后的升级中进行修改。
知晓程序（微信号 zxcx0101）提醒： 跟 image 组件类似，大多数小程序内置组件都会有自己的默认样式，初学者可以利用开发都工具中的 Wxml Panel，多了解一下这些组件的默认样式，可以避免很多由组件默认样式引起的问题。
关注知晓程序（微信号 zxcx0101），点击菜单栏「干货合辑」-「开发指南」，获取爱范儿发布的文章《微信小程序组件默认样式优先级 bug 解析》。
我们要根据实际情况给它重新定义一个宽高值：

在这里使用了小程序特有的 rpx 单位，这个尺寸单位会放到第二期的页面布局中来讲。
另一个注意点是，不要将大图片放到项目目录中，因为小程序代码总大小不能超过 1 MB，而大图片会占用大量的空间，所以要尽量避免在项目目录中放置大图片。
如有需要，建议只在项目目录中放置少量 icon 类的小图片，其他大图片可以上传到自己的服务器或者网盘中，然后在 src 中设置图片的网络资源地址。
在手机测试或者正式上线之前，要注意是否有引用了本地大图片导致代码超出大小限制的问题。
准备获取 banner 数据，并绑定到视图层
接下来，我们看看数据的绑定：

经过绑定后的数据变动可以在视图中实时反应，也可以通过开发者工具中的 AppData Panel 中查看和编辑页面中的所有 data 数据。
它可以用来新增和修改 this.data 里的值，同时还有一个重要的功能是将数据从逻辑层发送到视图层，从而实时改变页面的状态，保持逻辑层和视图层数据的一致性。

  • url：发送请求的地址。

  • CONNECT。知晓程序（微信号 zxcx0101）提醒，所有值都要使用大写。经过我们测试，若使用小写，在安卓中会导致无法发起请求，而在开发者工具和 iOS 中则正常。

  • data：设置请求的参数。如果 method 值为 GET，这个函数会将 data 转换成 query 字符串，拼接在 url 后面，若 url 本身带有同名的

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

特别注意，在开发者工具和 iOS


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

现在，在视图中我们就能看到完整的 banner 列表了。
本文介绍了小程序中内置组件、数据绑定和发送请求 API 的用法，提醒了初学者一些不容易注意到的坑，通过上面的介绍和实际代码演示，希望能帮助初学者更容易理解和使用小程序的基他组件和 API。
下一期，知晓程序（微信号
关注知晓程序（微信号 zxcx0101），回复「解读」，获取小程序官方文档的浓缩版解读文章。
爱范儿「未来小程序 · 黑客马拉松」第三期火热报名中！关注知晓程序（微信号 zxcx0101），点击菜单栏中的「活动报名」，即可报名参加。

知晓程序（微信号 zxcx0101）是爱范儿旗下专注于小程序生态的公众号。我们会提供最全面、新鲜的小程序资讯（消息、观点、指南、活动）和服务，你可以在这里了解到关于小程序的一切。

快速关注知晓程序↓↓↓

↓点击「阅读原文」，花更少时间精通小程序设计。

我要回帖

更多关于 电商小程序开发 的文章

 

随机推荐