先电云计算软件服务o2商城小程序应用开发手册v

1、南京第五十五所技术开发先电云计算软件服务-O2O 商城小程序应用开发手册版本：先电 Cloud-saas-smallprogram-v1.0发布日期：2018 年 1 月 30 日南京第五十五所技术开发1南京第五十五所技术开发版本修订说明2修订版本修订时间修订说明Cloud-SaaS-smallprogram-v1.02018 年 1 月 29 日初次修订。南京第五十五所技术开发目 录1.开发环境安装41.1.小程序开发者工具安装41.2. Egret Wing 安装62.示例工程导入102.1. 导入 O2Omall 项目工程103.工程说明113.1. 功能需求113.2. 小程序的配置1

2、53.2.1. 小程序的配置 app.json153.3. O2O 商城小程序界面开发193.3.1. 主界面编写204.技术支持393南京第五十五所技术开发1. 开发环境安装小程序 O2O 商城应用开发采用技术平台，在 Win7 下搭建开发环境需要安装web 开发者工具和 Egret Wing（由于小程序开发者工具登录联网的限制，我们在后续开发中采用 Egret Wing）。所有的安装软件都在发布的软件包内，无须。具体步骤如下：1.1.小程序开发者工具安装1)点击软件包下的“wechat_devtools_1.02.1801081_x64.exe”安装程序。2)点击，接受相关协议。4南京第五

3、十五所技术开发3)选择安装路径在接受完证协议后，选择web 开发者工具安装位置，选择好后，点击安装。5南京第五十五所技术开发4)此表web 开发者工具安装好了，点击“完成”即可。1.2.Egret Wing 安装1）点击软件包下的“EgretWing-v3.2.6.exe”安装程序。6南京第五十五所技术开发2）点击，接受相关协议。3) 选择安装路径在接受完证协议后，选择 Egret Wing 安装位置，选择好后，点击。7南京第五十五所技术开发4）选择附加服务在接受完证协议后，选择相关附加服务，选择好后，点击。8南京第五十五所技术开发5）确认相关配置是否正确，确认无误点击“安装”即可。9南京第五

4、十五所技术开发2. 示例工程导入2.1. 导入 O2Omall 项目工程1)打开安装好的 Egret Wing 程序，进入主界面。2)点击菜单栏“文件”按钮，选择打开文件夹。10南京第五十五所技术开发3)找到包 O2Omall 项目文件，选中该文件夹，点击右下角“选择文件夹”按钮，打开即可。3. 工程说明3.1.功能需求1)O2Omall 小程序的主要界面列表如下：11O2Omall商城商店商城主界面，显示所有的商城商品商品详情显示具体商品详情预约实现预约到店服务时间订单显示个人的所有商品订单列表订单详情显示具体的订单详情内容账户显示个人账户页相关信息账户充值用户充值页消费显示个人相关消费充值

5、显示个人相关充值南京第五十五所技术开发2)功能主界面参考截图。图 3-1 商城主界面图 3-2 预约界面12资料显示个人相关资料南京第五十五所技术开发图 3-3 订单界面图 3-4 账户界面图 3-5 商品详情界面图 3-6 订单详情界面13南京第五十五所技术开发图 3-7 充值界面图 3-8 消费界面图 3-9 充值界面图 3-10资料14南京第五十五所技术开发3.2.小程序的配置3.2.1. 小程序的配置 app.json. 配置选项打开我们之前安装的 Egret Wing，选择菜单栏“文件”按钮，选择“打开文件夹”将资源“O2Omall”文件夹打开，使用 app.json

6、文件来对小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。见表 3-1 展示了 json 文件中的配置项。表 3-1 json 文件中的配置项. pages 选项配置接受一个数组，每一项都是字符串，来指定小哪些页面组成。每一项代表对应页面的“路径+文件名”信息，数组的第一项代表小程序的初始页面。小新增或者减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json、.js、.wxml、.wxss 的 4 个文件进行整合。如开发目录为：15pages/ pages/store/account/acco

7、unt/account.wxml pages/store/account/account/account.js pages/store/account/account/account.json pages/store/account/account/account.wxss.app.js属性类型必填描述pagesString Array是设置页面路径windowObject否设置默认页面的窗口表现tabBarObject否设置底部 tab 的表现networkTimeoutObject否设置网络超时时间debugBoolean否设置是否开启 debug 模式南京第五十五所技术开发那么，app.

8、json 应该这样配置。. window 选项配置window 用于设置小程序的状态栏、导航条、标题、窗口背景色。window 配置见表 3-2。表 3-2 window 配置项实例：16属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色navigationBarTextStyleStringwhite导航栏标题颜色navigationBarTitleTextString导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringda

9、rk下拉背景字体、loading图的样式enablePullDownRefreshBooleanfalse是否开启下拉刷新"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/

10、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"app.jsonapp.wxss南京第五十五所技术开发. tabbar 选项配置如果小程序是一个

11、多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么可以通过 tabbar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。tabbar 中的list 是一个数组，只能配置最少 2 个、最多 5 个tab，tab 按数组的顺序排序。tabbar 的具体属性说明见表 3-3。表 3-3 属性说明实例：17"tabBar": "color": "#dddddd",注意：icon 大小限制为 40 KB，建议为 81 px×81 px，当 postion 为 top 时，此参数无效。属性类型

12、必填默认值描述colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上边框的颜色listArray是tab 的列表positionString否bottom可选值 bottom、top注意：当设置 position 为 top 时，将显示 icon。"window": "backgroundTextStyle":"light","na

13、vigationBarBackgroundColor": "#fff", "navigationBarTitleText": "O2O 商城", "navigationBarTextStyle":"black", "enablePullDownRefresh":false, "backgroundColor": "#ffffff"南京第五十五所技术开发18"selectedColor": "#3c

14、c51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": "pagePath": "pages/store/products/list/list", "iconPath": "res/manager/tabs/store_normal.png","selectedIconPath": "res/ma

15、nager/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&quo

16、t;: "预约","pagePath": "pages/store/order/myorder/myorder", "iconPath": "res/manager/tabs/order_normal.png", "selectedIconPath": "res/manager/tabs/order_select.png", "text": "订单","pagePath": "pages

17、/store/account/account/account", "iconPath": "res/manager/tabs/profile_normal.png", "selectedIconPath": "res/manager/tabs/profile_select.png", "text": "账户",南京第五十五所技术开发. networkTimeout 选项配置networkTimeout 可以设置各种网络请求的超时时间。具体配置见表 3-

18、4。表 3-4 网络请求超时时间. debug 选项配置在开发者工具中可以开启 debug 模式，在开发者工具的台面板，调试信息以 info 的形式给出，其信息有 Page 的、页面路由、数据更新和触发 。它可以帮助开发者快速一些常见的问题。3.3.O2O 商城小程序界面开发O2O 即“Online To Offline”，是指将线下的商务机会与互联网结合，让互联网成为线下的前台。即用户通过互联网与提供服务的商家上进行。本次案例介绍如何通过小程序开发工具，来进行商城主界面开发（图 3-5）。19属性类型必填说明requestNumber否wx request 的超时时间conne

19、ctSocketNumber否wx.connectSocket 的超时时间uploadFileNumber否wx.uploadFile 的超时时间downloadFileNumber否wx.downloadFile 的超时时间南京第五十五所技术开发图 3-11 O2O 商城主界面3.3.1. 主界面编写使用 Egret Wing，打开“O2Omall”项目，点击项目下的 app.json 文件，可以快速找到主界面文件路径 pages/store/products/list/list，打开相应文件目录，可以看到 list.wxml，list.js，list.wxss，list.json 四个文件

20、。. list.wxml 界面编写分析图 3-5，整个主界面有三块组成，一块是轮播图，通过轮播图动态展现商城中推荐的精品，吸引人眼球，一块是主体商品列表，显示所有商城商品列表，最后一块是底部导航，由于底部导航在 app.json 中已经配置过了，所以在所有后缀为.wxml 的界面中无需配置。轮播图实现代码：20<view class="top"><!-小程序轮播组件 swiper，其中相关参数由list.js-><swiper indicator-dots="indicatorDots" autoplay=&q

21、uot;autoplay" interval="interval" duration="duration"><block wx:for="imgUrls" wx:key="_imgUrls"><swiper-item>南京第五十五所技术开发主体商品列表实现代码：21<!-实现相关界面调整功能，bindtap 绑定相关跳转方法-><view class="myrow" ><view class="img" w

22、x:for="bar" wx:key="_bar"><image src="item.img" bindtap="item.link" class="imgbar" ></image><view class="name"> </view></view></view><view class="table-list"><!-循环获取相关货物列表并显

23、示,通过 wx:for 循环遍历货品信息-><view class="row border-item-1 pad-10" style="padding-top:26rpx;" wx:for="goods" wx:key="_id" ><view style="width:200rpx;" class="push-r-10"><imagebindtap="detail"style="height:70rpx;wi

24、dth:100rpx"data-id="item._id" mode="widthFix" src="item.corver"></image></view><view style="width:50%" class="push-r-10"><view class="hiddenover"><text bindtap="detail" data-id="item._id&quo

25、t; class="font-s15 item-name"></text></view><view><navigator hover-class="navigator-hover"><image src="item.url" class="slide-image"/></navigator></swiper-item></block></swiper></view>南京第五

26、十五所技术开发. list.wxss 样式编写在上一部分中，我们已经编写了基础展示代码，但是如同 html 开发一样，需要有相关样式文件来渲染界面，在小我们也需要编写 list.wxss 文件。在本项目中因为有些样式文件属于通用部分，因此我们在 pages/store/wxss 下面建立一个通用样式文件 style.wxss，到时在各具体文件中引入即可。style.wxss 实现代码：22view color:#232323; font-size:32rpx;buttontype="primary"plain border: 1px solid #81c7d1

27、; color: #81c7d1;buttontype="primary" color:#FFFFFF; background-color:#81c7d1;<text bindtap="detail" data-id="item._id" class="price">￥item.show_price</text></view></view><view style="width:30%;min-width:160rpx;"><but

28、ton size="mini" bindtap="addtocard" data-id="item._id" type="primary"data-price="item.sale_price" class="buybutton" data-amount="1" bindtap="detail"></button></view></view></view>南京第五十五所技术开发.to

29、pbarbackground: #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:

30、50%;.topbar textheight: 48rpx;font-size:28rpx;line-height: 88rpx;margin-left: 10rpx;margin-top: 5rpx;.font-bold 23南京第五十五所技术开发font-weight: 500;.font-s16 font-size:32rpx;.font-s15 font-size:30rpx;.font-s14 font-size:28rpx;line-height: 36rpx;.text-primary color:#FF6347;.view-rowdisplay: flex;flex-direc

31、tion:row;.block display: flex; flex-direction:column; .block .row flex-direction: row; .block .column flex-direction: column; .block .block-content padding: 20rpx;width: 100%;padding-left:0; padding-right:0; .block .block-title padding: 20rpx; width: 100%; padding-left:0; padding-right:0;font-size:3

32、6rpx; font-weight: 500; .block .form-group margin-top:20rpx;margin-left:40rpx;margin-bottom:20rpx;24南京第五十五所技术开发.block .form-group label margin-top:10rpx;.block .form-group input margin-top:10rpx;border-bottom: 2rpx solid #f2f2f2;.block .form-group picker padding-top:10rpx;padding-bottom: 20rpx;borde

33、r-bottom: 2rpx solid #f2f2f2;.table-list display: flex;flex-direction:column;.table-list .rowdisplay: flex;flex-direction:row;.table-list .column flex-direction: column; .table-list .row imagewidth:100%;.table-list .row viewheight: auto;.view-column display: flex;25南京第五十五所技术开发flex-direction:column;.

34、border-1 border: 2rpx solid #f2f2f2;.border-t-1 border-top: 2rpx solid #f2f2f2;.border-b-1 border-bottom: 2rpx solid #f2f2f2;.border-l-1 border-left: 2rpx solid #f2f2f2;.border-r-1 border-right: 2rpx solid #f2f2f2;.border-item-1 border-top: 2rpx solid #ffffff;border-bottom: 2rpx solid #f2f2f2;.pull-

35、left float: left;.pull-rightfloat: right;.push-t-5 margin-top:10rpx;26南京第五十五所技术开发.push-l-5 margin-left:10rpx;.push-t-10 margin-top:20rpx!important;.push-t-15 margin-top:30rpx !important;.push-b-10 margin-bottom:20rpx;.push-l-10 margin-left:20rpx;.push-l-20 margin-left:40rpx;.push-r-10 margin-right:2

36、0rpx;.push-r-20margin-right:40rpx;.pad-5-t padding-top:10rpx;.pad-5 padding:10rpx;27南京第五十五所技术开发.pad-10 padding:20rpx;.pad-20 padding:40rpx;.pad-40 padding:80rpx;.rm-padding padding:0 !important;.clear clear: both;.text-muted color: #a2a2a2 !important;.text-warn color:#E64340 !important;.text-right t

37、ext-align: right !important;.bg-grey border: 1px solid #f5f5f5;background: #f5f5f5;28南京第五十五所技术开发.bg-primary color: #ffffff;border: 1px solid #81c7d1;background: #81c7d1;.overhidden overflow: hidden;white-space:nowrap;text-overflow:ellipsis.hiddendisplay: none !important;.numinput input display:inlin

38、e-block;font-size:28rpx;height:32rpx;min-height: 1em;width:32rpx;border:2rpx solid #81c7d1;padding:0px;text-align:center;.phrow line-height: 100rpx;height:100rpx;.bottombar bottom: 0px;position: fixed;29南京第五十五所技术开发list.wxss 实现代码：30import "././wxss/style.wxss"/*导入外部通用样式*/.slide-image width:

39、400px; height:150px;.imgbarposition: relative; left:10rpx;width: 35px; height: 35px;background-color: #ffffff;.bottombar bottom: 0px;line-height: 100rpx; height:100rpx; width: 100%;z-index: 1000;.bottombar text font-weight: 400; font-size: 30rpx;.bottombar image width: 60rpx; height: 60rpx; margin:2

40、0rpx; margin-bottom:0;南京第五十五所技术开发border: 1px solid #ffffff;border-top: 1px solid #EEEEE0;background: #ffffff;color:#ffffff;position: fixed;line-height: 100rpx;height:100rpx;width: 100%;z-index: 1000;.bottombar text color: #ffffff;font-weight: 400;font-size: 30rpx;.bottombar image width: 60rpx;height

41、: 60rpx;margin:20rpx;margin-bottom:0;.text-mimifont-size: 25rpx;color: #81c7d1;margin-left: 10rpx;.hiddenoverwidth: 400rpx;overflow: hidden;text-overflow: ellipsis;31南京第五十五所技术开发white-space: nowrap;margin-top: -5px;.pricecolor: #ff2150;position: absolute;margin-top:10rpx;font-size:30rpx;.item-namefon

42、t-size: 28rpx;.myrowheight: 180rpx;margin-top: 70rpx;width: 780rpx;.imgposition: relative;display: inline;margin-left: 20rpx;.nameposition: relative;font-size: 23rpx;display: inline;top: 40rpx;left:-70rpx;z-index: 100;32南京第五十五所技术开发. list.js 编写界面编写好后，为了实现相应的数据显示及相应功能实现，我们需要在 list.js 文件中编写相关代码，

43、实现数据绑定。在编写 list.js 之前我们先来了解下整个小程序的生命周期。Page()函数用来一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、处理函数等。参数说明：33.slide-imagewidth: 100%;南京第五十五所技术开发onLoad: 页面加载一个页面只会调用一次。接收页面参数可以获取 wx.navigateTo 和 wx.redirectTo 及<navigator/>中的 query。34属性类型描述onLoadFunction生命周期函数onReadyFunction生命周期函数-页面初次渲染完成onShowFunction生命周

44、期函数-页面显示onHideFunction生命周期函数-页面隐藏onUnloadFunction生命周期函数-页面卸载onPullDownRefreshFunction页面相关处理函数-用户下拉动作onReachBottomFunction页面上拉触底的处理函数onShareAppMessageFunction用户点击右上角转发onPageScrollFunction页面滚动触发的处理函数其他Any开发者可以添加任意的函数或数据到object 参数中，在页面的函数中用 this 可以南京第五十五所技术开发onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成一个

45、页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。onHide: 页面隐藏当 navigateTo 或底部 tab 切换时调用。onUnload: 页面卸载当 redirectTo 或 navigateBack 的时候调用。我们可以根据的实际需要，在 page()不同的生命周期中去执行处理不同的方法。list.js 实现代码：35Page(data:/*商品列表数据* param Number id 商品的 id 标识;* param String corver 商品的封面;* param String name 商品名称;* param String show_price 商品显

46、示的价格;* param String sale_price 商品价格;*/ goods: id: "1",corver:"/res/manager/tabs/bg1.jpg",name:"openstack 课程",show_price:"120",sale_price:"120", id: "2",corver:"/res/manager/tabs/bg2.jpg",name:"云计算课程",show_price:"120

47、", sale_price:"120",/*轮播图片* param Array imgUrls 首页轮播图片;* param Boolean indicatorDots 商品的封面;* param Boolean autoplay 是否自动;* param Number interval 自动切换时间间隔;南京第五十五所技术开发* param Number duration 滑动动画时长;*/imgUrls: url: '/res/manager/tabs/bg1.jpg',url: '/res/manager/tabs/bg2.jpg',indicatorDots: true,autoplay: true,interval: 5000,duration: 1000,/*首页导航图片及跳转* pa