資料我們有了， 就可以匯入到微信的資料庫了，微信這個功能簡直不要太贊，我們一定要好好利用微信提供的資料庫；
開啟雲開發控制檯， 點選資料庫， 點選新增集合，名稱為funnys，點選匯入，然後就可以匯入剛剛我們匯出的json檔案了；
匯入完成後，我們就可以進入展示了；
首頁index.wxml的程式碼如下：

<!--index.wxml-->
<scroll-view>
  <view class='item '  wx:for="{{datas}}" wx:key="{{index}}">
    <navigator class='flexDownC' url='../itemDetail/itemDetail?id={{item.id}}'>
      <view class='userInfo flexRowL'> <view class='user flexC'> <image src='{{item.userImg || defaultImg}}' class='userImg'></image> {{item.username || '糗皮虎'}}</view> </view>
      <view class='txt'>{{item.content}}</view>
      <view class='img' wx:for="{{item.image}}" wx:for-item='imgItem' > <image lazy-load="{{lazy_load}}" mode='widthFix' src='{{("http://"+imgItem) || ""}}' class='{{item.image.length ==1 ?"dzImg1": item.image.length == 2 ?"dzimg2": item.image.length == 3 ? "dzImg3" : item.image.length == 4 ? "dzImg4": "" }} dzImg' ></image> </view>
    </navigator>
      <view class='btnsRow flexRowL'>
        <view class='ml20  flexC' bindtap='zan' data-index='{{index}}'>
          <image src='{{item.zanUrl}}' class='btns ml20' ></image> 
          <text class='ml10'> {{item.vote || 0}}</text>
        </view>
        <view class='ml60  flexC' bindtap='nav2Detail'  data-id='{{item.id}}'><image src='../../images/comment.png' class='btns ml40'></image> <text class='ml10'> {{item.commentNum || 0}}</text></view>
        <view class='ml60 '><label class='flexC'   > <image src='../../images/share.png' class='btns ml40'></image> <text class='ml10'> {{item.shareNum || 0}}</text> <button open-type='share' hidden='hidden'  data-qiuId='{{item.id}}' data-shareNum='{{item.shareNum}}'></button> </label> </view>
      </view>

      <view class='garyLine'></view>
    
  </view>

<view class='pushTop' bindtap='refresh'>上拉重新整理...</view>
</scroll-view>

 

請注意image的寫法:

 <image lazy-load="{{lazy_load}}" mode='widthFix' src='{{("http://"+imgItem) || ""}}' class='{{item.image.length ==1 ?"dzImg1": item.image.length == 2 ?"dzimg2": item.image.length == 3 ? "dzImg3" : item.image.length == 4 ? "dzImg4": "" }} dzImg' ></image>

首先, 為了讓圖片自適應高,並且寬隨圖片個數而變化, 所以我設定了mode=‘widthFix’, 然後判斷有幾張圖,如果有一張,就100%寬, 如果有兩張,就49%寬,因為圖片之間要有空隙,三張就32%寬,四張就24%寬,讓它可以1行顯示;(後期可以考慮讓它3張圖片以上就分兩行顯示)

我們採用分頁的形式,於是我將頁數pageId設定在本地, 使用wx.setStorageSync()方法,然後上拉重新整理或者點選也可以重新整理;
我們將搜尋的函式獨立出來,方便呼叫:

  //page: 頁數
  search: function(page){
    const db = wx.cloud.database()
    const _ = db.command;
    var that = this;
    console.log('search', page)
    var userId = wx.getStorageSync('userId')
    if (!page ){
      page = this.getPage()
    
    }         
    //設定頁碼
    this.setPage(page);
    
    db.collection('funnys').where(
      {
        id: _.lt((page + 1) * 20).and(_.gt(page * 20)), //一頁20條
        unValid: _.neq(1)
      }
    ).get({
      success: res => {
        wx.hideLoading()
        var D = res.data;
        D.forEach(function(item, i){
          D[i].zanUrl = that.data.zanIcon//預設是灰色的點贊按鈕, 但是不存在資料庫中,所以在這裡加上狀態,點選後變黃色按鈕
        })
        console.log(D)
        this.setData({
          datas: D
        })
        console.log('[資料庫] [查詢記錄] 成功: ', res)
      },
      fail: err => {
        wx.hideLoading()
        wx.showToast({
          icon: 'none',
          title: '查詢記錄失敗'
        })
        console.error('[資料庫] [查詢記錄] 失敗：', err)
      }
    })
    wx.pageScrollTo({
      scrollTop: 0,
    })
  },

 

點選重新整理:

 refresh: function(){
    var page = this.getPage()
    // wx.startPullDownRefresh()
    //搜尋下一頁
    this.search(Number(page)+1)
    wx.showLoading({
      title: '載入中...',
    })
  },

獲得/設定當前的頁數:

  setPage: function (page){
    console.log('setPage', page)
    wx.setStorageSync('page', page)
   
  },
  getPage: function(){
 
    console.log('getPage:', wx.getStorageSync('page'))
    return wx.getStorageSync('page')
  },

onLoad方法:

  onLoad: function() {
    var that = this;
  
    var page = wx.getStorageSync('page')
    // 查詢第一頁
    that.search( that.data.pageId)

 
  },

資料部分:

 data: {

    defaultImg: '../../images/tx.png',
    datas: [],
    zanIcon : '../../images/zan.png',
    zanIcon1: '../../images/zan1.png',
    pageId: 0,
    imgHeight: 225,
    lazy_load: false,
    voteArr:[],
    qiuId: ''
  },

上拉重新整理:

onReachBottom: function(){
    setTimeout(()=>{
      this.refresh()
      
    },500)
  },

大家要記住,在資料庫請求成功/失敗函式,或者其他函式內部也好, 一定要使用ES6的新特性,就是箭頭函式:

success: res=>{
	this.refresh() //this是指向外部的this
}

因為this的指向不變,不需要使用 that = this這樣的庸餘聲明;

大家看在我碼字那麼辛苦的份上,順手給github點一個小星星唄