一、實驗簡介
通過實現商品列表、商品詳情頁程序，熟練掌握云端數據表查詢操作。

二、實驗目標

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.