案例一：統計用戶的訪問次數

業務需求：

• 統計每個用戶對程序的訪問次數
• 將訪問次數存儲到數據庫中
• 訪問次數應該與用戶進行關聯

業務邏輯：

• 如果用戶是第一次訪問此程序，向數據庫添加一條記錄：{openid：45454545，count：1}
• 如果用戶不是第一次訪問，首先獲取數據庫中改用戶的訪問次數然后+1，再保存到數據庫中，然后更新頁面中的訪問次數

實現步驟：

在項目的pages中創建count_demo

在項目的pages中創建count_demo文件夾 在count_demo文件夾中創建page命名為count_demo

設置程序的主顯示頁面

• 將程序主頁設置為剛添加的count_demo

• 將app.json中剛添加的"pages/count_demo/count_demo"放到開始位置
  

• 查看剛剛創建的count_demo中的count_demo.js文件

    /*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {}
  

  • 頁面編譯時執行的下面函數
    • onload函數—onshow函數–onready
  • 當頁面切換時執行
    • onhide函數 切換回來時執行 onshow函數

創建數據庫（counters）

編輯count_demo.wxml

編輯count_dome.js

• 在count_demo.js中定義變量實現數據的綁定

  Page({data: {count:0},})
  

• 在onload函數中 查詢登錄用戶的訪問次數

  • 獲取數據庫的引用

    const db=wx.cloud.database()

  • 獲取要操作的集合

    const counters=db.collection(‘counters’)

  • 查詢用戶在counters集合中的數據

    //查詢用戶在counters集合中的數據db.collection('counters').get().then(res=>{console.log(res)})
    

  • 輸出結果
    

  • 可以根據返回data數組的長度來判斷用戶是否是第一次訪問

    • 如果長度大于0說明已經登陸過就更新數據
      • 創建更新指令
        
      • 更新訪問次數

         if(res.data.length>0){//更新訪問次數db.collection('counters').doc(res.data[0]._id).update({data:{count:_.inc(1)}})//在頁面上顯示的訪問次數this.setData({count:++res.data[0].count})}else
        

    • 如果沒有數據說明未訪問過就插入數據 并更新本地數據

      else{//新增數據db.collection('counters').add({data:{count:1}}).then(res=>{this.setData({count:1})})}
      

案例二：查詢并展示數據

業務需求：

• 查詢數據庫中的數據并展示
• 頁面加載時查詢第一頁的數據
• 向上拉動頁面到底部時查詢下一頁數據
• 如果數據庫中沒有更多數據時，向上拉動不進行查詢

實現步驟:

創建集和導入數據（demo_list）為集合設置權限

創建demo_list

• 之間在app.json中的pages配置中的第一行寫入保存即可創建并且訪問主頁也為該頁面
  

編輯demo_list.js文件

• 自定義函數getListData分頁查詢數據

  // pages/demo_list/demo_list.js
  Page({data: {page_size: 8, //每頁顯示的數量page_count: 0, //頁碼dataList: [],isRequest:true,//是否請求，放數據庫中沒有更多數據時不再請求},onLoad() {this.getListData()},//分頁獲取數據getListData() {if(!this.data.isRequest){return}//獲取數據庫const db = wx.cloud.database()//計算skip函數的參數值let offset = this.data.page_count * this.data.page_size//查詢集合中的數據db.collection('demo_list').skip(offset).limit(this.data.page_size).get().then(res => {this.setData({dataList:this.data.dataList.length===0 ? res.data :this.data.dataList.concat(res.data)})res.data.length!==this.data.page_size?this.setData({isRequest:false}):true})},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {this.setData({page_count:++this.data.page_count})this.getListData()}
  })
  

  1. 獲取數據庫
  2. 查詢數據 skip是查詢時跳過的條數 limit是查詢時要查詢的條數
  3. skip的參數值就是定義的查詢的條數*頁碼數=已經查詢出來的條數
  4. 當用戶第一次訪問時（dataList中沒有數據）將數據賦值給dataList變量 如果有數據將兩個數組進行合并。
  5. 當請求數組返回時數據的數量不等于我們的設置值時 說明數據沒有更多了，我們將isRequest的值設置為false，當他的值為true的時候才允許查詢數據

• 頁面刷新時調用

    onLoad() {this.getListData()},
  

• 當用戶下拉到底部時（onReachBottom事件觸發）調用 并且請求頁碼累加

  /*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {this.setData({page_count:++this.data.page_count})this.getListData()}
  

編輯demo_list.wxml文件

點我進入下載壓縮包

• 壓縮包中找到dis目錄進入example\panel\panel.wxml文件中復制代碼

  <view class="page"><view class="weui-panel weui-panel_access"><view class="weui-panel__bd"><view class="weui-media-box weui-media-box_text" wx:for="{{dataList}}" wx:key="_id"><h4 class="weui-media-box__title">{{item.title}}</h4><view class="weui-media-box__desc">{{item.description}}</view></view></view></view>
  </view>
  

• 將style文件夾中的樣式文件復制到我們的項目中并且全局引用
  

• 最后遍歷數據即可