先电云计算软件服务-O2O商城小程序应用开发手册V1.1
先电云计算软件服务-O2O商城小程序应用开发手册
版本：先电Cloud-SaaS-smallprogram-V1.1
发布日期：2018年4月19日
南京第五十五所技术开发有限公司
目录
1.开发环境安装 (4)
1.1.Egret Wing安装 (4)
2.示例工程导入 (7)
2.1.导入O2Omall项目工程 (7)
3.工程说明 (9)
3.1.功能需求 (9)
3.2.小程序的配置 (12)
3.2.1.小程序的配置app.json (12)
3.3.O2O商城小程序界面开发 (16)
3.3.1.主界面编写 (17)
4.技术支持 (36)
1.开发环境安装
小程序O2O商城应用开发采用微信技术平台，在Windows下搭建开发环境需要安装微信web开发者工具或Egret Wing（由于微信小程序开发者工具登录联网的限制，我们在后续开发中采用Egret Wing）。所有的安装软件都在发布的软件包内，无须下载。具体步骤如下：1.1.Egret Wing安装
1）点击软件包下的“EgretWing-v3.2.6.exe”安装程序。
2）点击下一步，接受相关协议。
3) 选择安装路径
在接受完许可证协议后，选择Egret Wing安装位置，选择好后，点击下一步。
4）选择附加服务
在接受完许可证协议后，选择相关附加服务，选择好后，点击下一步。
5）确认相关配置是否正确，确认无误点击“安装”即可。
2.示例工程导入
2.1. 导入O2Omall项目工程
1)打开安装好的Egret Wing程序，进入主界面。
2)点击菜单栏“文件”按钮，选择打开文件夹。
3)找到资源包O2Omall项目文件，选中该文件夹，点击右下角“选择文件夹”按钮，打开
即可。
3.工程说明
3.1. 功能需求
1)微信O2Omall小程序的主要界面列表如下：
2)功能主界面参考截图。
图3-1商城主界面图3-2预约界面
图3-3订单界面图3-4账户界面
图3-5商品详情界面图3-6订单详情界面
图3-7充值界面图3-8消费记录界面
图3-9充值记录界面图3-10我的资料
3.2.小程序的配置
3.2.1. 小程序的配置app.json
3.2.1.1. 配置选项
打开我们之前安装的Egret Wing，选择菜单栏“文件”按钮，选择“打开文件夹”将资源包中“O2Omall”文件夹打开，使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。见表3-1展示了json文件中的配置项。
表3-1 json文件中的配置项
3.2.1.2. pages选项配置
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的“路径+文件名”信息，数组的第一项代表小程序的初始页面。小程序中新增或者减少页面，都需要对pages数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径.json、.js、.wxml、.wxss的4个文件进行整合。
如开发目录为：
pages/
pages/store/account/account/account.wxml
pages/store/account/account/account.js
pages/store/account/account/account.json
pages/store/account/account/account.wxss
......
app.js
app.json
app.wxss
那么，app.json应该这样配置。
{
"pages":[
"pages/store/products/list/list",
"pages/store/booking/detail/detail",
"pages/store/order/myorder/myorder",
"pages/store/account/account/account",
"pages/store/products/detail/detail",
"pages/store/history/payout/payout",
"pages/store/history/payin/payin",
"pages/store/account/profile/profile",
"pages/store/account/income/income",
"pages/store/order/detail/detail" ]
}
3.2.1.3. window选项配置
window用于设置小程序的状态栏、导航条、标题、窗口背景色。window配置见表3-2。
表3-2 window配置项
实例：
{
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "O2O商城",
"navigationBarTextStyle":"black",
"enablePullDownRefresh":false,
"backgroundColor": "#ffffff" }
}
3.2.1.
4. tabbar选项配置
如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），那么可以通过tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。
tabbar中的list是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。tabbar的具体属性说明见表3-3。
表3-3 属性说明
实例：
{
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/store/products/list/list",
"iconPath": "res/manager/tabs/store_normal.png",
"selectedIconPath": "res/manager/tabs/store_select.png",
"text": "商店"
},
{
"pagePath": "pages/store/booking/detail/detail",
"iconPath": "res/manager/tabs/bespeak_normal.png",
"selectedIconPath": "res/manager/tabs/bespeak_select.png",
"text": "预约"
},
{
"pagePath": "pages/store/order/myorder/myorder",
"iconPath": "res/manager/tabs/order_normal.png",
"selectedIconPath": "res/manager/tabs/order_select.png",
"text": "订单"
},
{
"pagePath": "pages/store/account/account/account",
"iconPath": "res/manager/tabs/profile_normal.png",
"selectedIconPath": "res/manager/tabs/profile_select.png",
"text": "账户"
}]
},
}
3.2.1.5. networkTimeout选项配置
networkTimeout可以设置各种网络请求的超时时间。具体配置见表3-4。
表3-4 网络请求超时时间
3.2.1.6. debug选项配置
在开发者工具中可以开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，其信息有Page的注册、页面路由、数据更新和事件触发。它可以帮助开发者快速定位一些常见的问题。
3.3.O2O商城小程序界面开发
O2O即“Online To Offline”，是指将线下的商务机会与互联网结合，让互联网成为线下交易的前台。即用户通过互联网与提供服务的商家在线上进行交易。本次案例我们将介绍如何通过小程序开发工具，来进行商城主界面开发（图3-5）。
图3-11 O2O商城主界面
3.3.1. 主界面编写
使用Egret Wing，打开“O2Omall”项目，点击项目下的app.json文件，可以快速找到主界面文件路径pages/store/products/list/list，打开相应文件目录，可以看到list.wxml，list.js，list.wxss，list.json四个文件。
3.3.1.1. list.wxml界面编写
分析图3-11，整个主界面有三块组成，一块是轮播图，通过轮播图动态展现商城中推荐的精品，吸引人眼球，一块是主体商品列表，显示所有商城商品列表，最后一块是底部导航，由于底部导航在app.json中已经配置过了，所以在所有后缀为.wxml的界面中无需配置。
轮播图实现代码：
主体商品列表实现代码：
mode="widthFix" src="{{item.corver}}">
{{https://www.360docs.net/doc/6712077145.html,}}
3.3.1.2. list.wxss样式编写
在上一部分中，我们已经编写了基础展示代码，但是如同html开发一样，需要有相关样式文件来渲染界面，在小程序中我们也需要编写list.wxss文件。
在本项目中因为有些样式文件属于通用部分，因此我们在pages/store/wxss下面建立一个通用样式文件style.wxss，到时在各具体文件中引入即可。
style.wxss实现代码：
view {
color:#232323;
font-size:32rpx;
}
button[type="primary"][plain] {
border: 1px solid #81c7d1;
color: #81c7d1;
}
button[type="primary"] {
color:#FFFFFF;
background-color:#81c7d1;
}
.topbar{
background: #f5f5f5;
line-height: 64rpx;
position: fixed;
width: 100%;
z-index: 1000;
border-bottom: 2rpx solid #e1e1e1; }
.topbar-2nd {
margin-top:90rpx;
background: #f3f2f7 !important; }
.topbar image {
width: 48rpx;
height: 48rpx;
margin:20rpx;
margin-right: 10rpx;
margin-bottom:0;
}
.topbar .avatar {
border-radius: 50%;
}
.topbar text{
height: 48rpx;
font-size:28rpx;
line-height: 88rpx;
margin-left: 10rpx;
margin-top: 5rpx;
}
.font-bold {