用Baas在腾讯云上开发小程序-系列4：实现客户侧商品列表、商品详情页程序 ...

一、实验简介
通过实现商品列表、商品详情页程序，熟练掌握云端数据表查询操作。

二、实验目标

1. 掌握小程序调试方法
2. 掌握小程序操作云端数据方法
3. 掌握云端数据表增删改查操作

三、实验步骤
3.1 Hello World

1. 应用设置
   第一步: 修改 app.js ，初始化全局对象

   1. App({
   2. onLaunch: function () {
   3. // 创建 xpm 对象
   4. this.xpm = require('xpmjs/xpm.js').option({
   5. 'host':'wss.appcook.cn',
   6. 'https':'wss.appcook.cn',
   7. 'wss': 'wss.appcook.cn/ws-server',
   8. 'table.prefix': 'hello',
   9. 'user.table':'user'
   10. });
       12.
   11. // 创建全局对象 this.wss = this.xpm.require('wss'); // 信道
   12. this.session = this.xpm.require('session'); // 会话
   13. this.stor = this.xpm.require('stor'); // 存储17. this.utils = this.xpm.require('utils'); // 工具
   14. this.user = this.xpm.require('user'); // 用户19. },
   15. xpm:null,
   16. user:null,
   17. utils:null,
   18. session:null,
   19. stor:null,
   20. wss:null
   21. })

第二步: 修改 app.json 添加页面清单，修改标题栏默认属性

1. {
2. "pages":[
3. "pages/index/index"
4. ],
5. "window":{
6. "backgroundTextStyle":"light",
7. "navigationBarBackgroundColor": "#ffffff",
8. "navigationBarTitleText": "Hello World",
9. "navigationBarTextStyle":"black"
10. }
11. }

第三步: 修改 app.wxss 设定全局样式

1. .container {
2. height: 100%;
3. display: flex;
4. flex-direction: column;
5. align-items: center;
6. justify-content: space-between;
7. padding: 100rpx 0;
8. box-sizing: border-box;
9. }

2. 用户登录
第一步: 修改 pages/index/index.js 用户登录代码

1. var app = getApp();
2. Page({
3. data: {
4. hello: 'hello world',
5. userInfo: {
6. avatarUrl:'http://of2is3ok3.bkt.clouddn.com/nopic.gif',
7. nickName:'载入中..'
8. }
9. },
10. onLoad: function () {
11. var that = this;
12. app.user.login().then(function( uinfo ){
13. that.setData({userInfo:uinfo});
14. });
15. }
16. });

第二步: 修改 pages/index/index.wxml 更新页面布局

> 1. <view class="container">
> 2. <view bindtap="bindViewTap" class="userinfo">
> 3. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" backgro und-size="cover"></image>
> 4. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
> 5. </view>
> 6. <view class="usermotto">
> 7. <text class="user-motto">{{hello}}</text>
> 8. </view>
> 9. </view>

第三步: 修改 pages/index/index.wxss 微调页面样式

1. .userinfo {
2. display: flex;
3. flex-direction: column;
4. align-items: center;
5. }
6.
7. .userinfo-avatar {
8. width: 128rpx;
9. height: 128rpx;
10. margin: 20rpx;
11. border-radius: 50%;
12. }
13.
14. .userinfo-nickname {
15. color: #aaa;
16. }
17.
18. .usermotto {
19. margin-top: 120px;
20. }

第五步: 修改 pages/index/index.json 设置页面名称

1. {
2. "navigationBarTitleText": "用户登录

效果预览: 通过微信开发者工具，通过模拟器可以实时预览效果

3.2 商品列表页
1. 全局样式表
在小程序中有两种方式使用全局样式。在 app.wxss中定义的样式为全局样式；也可以通过
@import "common.wxss"; 方法引用样式表文件。为了便于修改前台样式，我们定义一个通用的样式文件 pages/wxss/style.wxss 。
创建 pages/store/wxss/style.wxss 前台通用样式文件； 下为代码片段，完成代码参见源码。

1. view {
2. color:#232323;
3. font-size:32rpx;
4. }
5.
6. button[type="primary"][plain] {
7. border: 1px solid #81c7d1;
8. color: #81c7d1;
9. }
10.
11. button[type="primary"] {
12. color:#FFFFFF;
13. background-color:#81c7d1;
14. }
15.
16. .topbar{
17. background: #f5f5f5;
18. line-height: 64rpx;
19. position: fixed;
20. width: 100%;
21. z-index: 1000;
22. border-bottom: 2rpx solid #e1e1e1;
23. }
24. ...

2. 购物车布局
因为有多个页面，用到了购物车底栏； 所以将购物车布局代码抽离成独立文件使用

标签引入。
创建购物车 pages/store/common/cart.wxml 代码文件。

1. <view class="bottombar view-row">
2. <view style="width:88rpx;">
3. <image mode="widthFix" src="/res/icons/shop.png"></image>
4. </view>
5. <view style="width:40%">
6. <text style="padding-left:20rpx;"> {{cart.total}} 件商品 {{cart.show
_price}} 元 </text>
7. </view>
8. <view class="text-right" style="width:50%">
9.
10. <button
11. class="push-t-10 push-r-10"
12. type="default" size="mini" loading="{{loading}}"
13. disabled="{{disabled}}"
14. bindtap="cleanup"> 清空 </button>
15. <button
16. class="push-t-10 push-r-10"
17. type="warn" size="mini" loading="{{loading}}"
18. disabled="{{disabled}}"
19. data-link="{{order}}" bindtap="payout"> 结算 </button>
20.