借助云開發實現小程序朋友圈的發布與展示

隨著小程序云開發越來越成熟，現在用云開發可以做的事情也越來越多，今天就來帶大家實現小程序朋友圈功能。

知識技能點

• 1，小程序云開發
• 2，小程序云存儲
• 3，小程序云數據庫
• 4，圖片大圖預覽
• 5，圖片選擇與刪除

先給大家畫個發布的流程圖

下面是我們真正存到數據庫里的數據。

然后我們在朋友圈頁只需要請求數據庫里的數據，然后展示到頁面就如下圖所示

所以我們接下來就來實現發布和展示的功能

發布朋友圈

一，首先要創建一個小程序項目

這里就不多說了，如果你還不知道如何創建小程序項目可以去翻看下我之前的文章，也可以看下我錄制的《10小時零基礎入門小程序開發》

• 注意：一定要用自己的appid，所以你需要注冊一個小程序（個人的就行）

二，創建發布頁面

我們發布頁布局比較簡單，一個文字輸入框，一個圖片展示區域，一個發布按鈕。

先把發布頁布局wxml貼出來

<textarea class="desc" placeholder="請輸入內容" bindinput="getInput" />
<view class="iamgeRootAll">
  <view class="imgRoot" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
    <view wx:if="{{imgList.length==(index+1)&& imgList.length<8}}" class="imgItem" bindtap="ChooseImage">
      <image class="photo" src="../../images/photo.png"></image>
    </view>
    <view wx:else class="imgItem" data-index="{{index}}">
      <image class="img" src='{{item}}' mode='aspectFill'></image>
      <image class="closeImg" bindtap="DeleteImg" src="../../images/close.png" data-index="{{index}}"></image>
    </view>
  </view>
  <!-- 一開始用來占位 -->
  <view wx:if="{{imgList.length==0}}" class="imgItem" bindtap="ChooseImage">
    <image class="photo" src="../../images/photo.png"></image>
  </view>
</view>

<button type="primary" bindtap="publish">發布朋友圈</button>

這里唯一的難點，就是下面的圖片分布，因為我們每次用戶選擇的圖片個數不固定，這就要去分情況考慮了。
wx:if="{{imgList.length==(index+1)&& imgList.length<8}}"這段代碼是用來控制我們發布的那個? 號的顯示與隱藏的。

這個?號有下面三種情況需要考慮

• 1，沒有添加任何圖片時，只顯示?號
• 2，有圖片，但是不滿8條時，我們需要展示圖片和加號。
• 3，有8張圖片了，加號就要隱藏了。
  仔細看下上面的wxml代碼，代碼里都有體現。

三，實現圖片選擇和顯示功能

圖片選擇很簡單，就用官方的api即可。實現代碼如下

  //選擇圖片
  ChooseImage() {
    wx.chooseImage({
      count: 8 - this.data.imgList.length, //默認9,我們這里最多選擇8張
      sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album'], //從相冊選擇
      success: (res) => {
        console.log("選擇圖片成功", res)
        if (this.data.imgList.length != 0) {
          this.setData({
            imgList: this.data.imgList.concat(res.tempFilePaths)
          })
        } else {
          this.setData({
            imgList: res.tempFilePaths
          })
        }
      }
    });
  },

這里單獨說明下 8 - this.data.imgList.length。因為我這里規定最多只能上傳8張圖片。所以用了count8 ,至于后面為什么要減去this.data.imgList.length。主要是我們用戶不一定一次選擇8張圖片，有可能第一次選擇2張，第二次選擇2張。。。
所以我們做選擇時，每次傳入的數量肯定不一樣的。而這個imgList.length就是用戶已經選擇的圖片個數。用8減去已選擇的個數，就是下次最多能選擇的了。

上面代碼在選擇成功后，會生成一個臨時的圖片鏈接。如下圖所示，這個鏈接既可以用來展示我們已經選擇的圖片，后面的圖片上傳也要用到。

四，實現圖片刪除功能

我們每張圖片的右上角有個刪除按鈕，點擊刪除按鈕可以實現圖片的刪除。

這里比較簡單，把代碼貼給大家

  //刪除圖片
  DeleteImg(e) {
    wx.showModal({
      title: '要刪除這張照片嗎？',
      content: '',
      cancelText: '取消',
      confirmText: '確定',
      success: res => {
        if (res.confirm) {
          this.data.imgList.splice(e.currentTarget.dataset.index, 1);
          this.setData({
            imgList: this.data.imgList
          })
        }
      }
    })
  },

五，發布功能

• 1，發布之前我們需要先校驗下內容和圖片是否為空
  

• 2，由于我們發布的時候要保證所有的圖片都要上傳成功，所以這里我們這么處理。

  const promiseArr = []
  //只能一張張上傳 遍歷臨時的圖片數組
  for (let i = 0; i < this.data.imgList.length; i++) {
    let filePath = this.data.imgList[i]
    let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正則表達式，獲取文件擴展名
    //在每次上傳的時候，就往promiseArr里存一個promise，只有當所有的都返回結果時，才可以繼續往下執行
    promiseArr.push(new Promise((reslove, reject) => {
      wx.cloud.uploadFile({
        cloudPath: new Date().getTime() + suffix,
        filePath: filePath, // 文件路徑
      }).then(res => {
        // get resource ID
        console.log("上傳結果", res.fileID)
        this.setData({
          fileIDs: this.data.fileIDs.concat(res.fileID)
        })
        reslove()
      }).catch(error => {
        console.log("上傳失敗", error)
      })
    }))
  }
  //保證所有圖片都上傳成功
  Promise.all(promiseArr).then(res => {
  //圖片上傳成功了，才會執行到這。。。
  })

  我們這里用Promise來確保所有的圖片都上傳成功了，才執行后面的操作。

  把完整的發布代碼貼給大家吧

  /**
  * 編程小石頭
  * wehchat：2501902696
  */
  let app = getApp();
  Page({
  data: {
  imgList: [],
  fileIDs: [],
  desc: ''
  },
  
  //獲取輸入內容
  getInput(event) {
  console.log("輸入的內容", event.detail.value)
  this.setData({
    desc: event.detail.value
  })
  },
  
  //選擇圖片
  ChooseImage() {
  wx.chooseImage({
    count: 8 - this.data.imgList.length, //默認9,我們這里最多選擇8張
    sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有
    sourceType: ['album'], //從相冊選擇
    success: (res) => {
      console.log("選擇圖片成功", res)
      if (this.data.imgList.length != 0) {
        this.setData({
          imgList: this.data.imgList.concat(res.tempFilePaths)
        })
      } else {
        this.setData({
          imgList: res.tempFilePaths
        })
      }
    }
  });
  },
  //刪除圖片
  DeleteImg(e) {
  wx.showModal({
    title: '要刪除這張照片嗎？',
    content: '',
    cancelText: '取消',
    confirmText: '確定',
    success: res => {
      if (res.confirm) {
        this.data.imgList.splice(e.currentTarget.dataset.index, 1);
        this.setData({
          imgList: this.data.imgList
        })
      }
    }
  })
  },
  
  //上傳數據
  publish() {
  let desc = this.data.desc
  let imgList = this.data.imgList
  if (!desc || desc.length < 6) {
    wx.showToast({
      icon: "none",
      title: '內容大于6個字'
    })
    return
  }
  if (!imgList || imgList.length < 1) {
    wx.showToast({
      icon: "none",
      title: '請選擇圖片'
    })
    return
  }
  wx.showLoading({
    title: '發布中...',
  })
  
  const promiseArr = []
  //只能一張張上傳 遍歷臨時的圖片數組
  for (let i = 0; i < this.data.imgList.length; i++) {
    let filePath = this.data.imgList[i]
    let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正則表達式，獲取文件擴展名
    //在每次上傳的時候，就往promiseArr里存一個promise，只有當所有的都返回結果時，才可以繼續往下執行
    promiseArr.push(new Promise((reslove, reject) => {
      wx.cloud.uploadFile({
        cloudPath: new Date().getTime() + suffix,
        filePath: filePath, // 文件路徑
      }).then(res => {
        // get resource ID
        console.log("上傳結果", res.fileID)
        this.setData({
          fileIDs: this.data.fileIDs.concat(res.fileID)
        })
        reslove()
      }).catch(error => {
        console.log("上傳失敗", error)
      })
    }))
  }
  //保證所有圖片都上傳成功
  Promise.all(promiseArr).then(res => {
    wx.cloud.database().collection('timeline').add({
      data: {
        fileIDs: this.data.fileIDs,
        date: app.getNowFormatDate(),
        createTime: db.serverDate(),
        desc: this.data.desc,
        images: this.data.imgList
      },
      success: res => {
        wx.hideLoading()
        wx.showToast({
          title: '發布成功',
        })
        console.log('發布成功', res)
        wx.navigateTo({
          url: '../pengyouquan/pengyouquan',
        })
      },
      fail: err => {
        wx.hideLoading()
        wx.showToast({
          icon: 'none',
          title: '網絡不給力....'
        })
        console.error('發布失敗', err)
      }
    })
  })
  },
  })

  到這里我們發布的功能就實現了，發布功能就如下面這個流程圖所示。
  
  我們最終的目的是要把文字和圖片鏈接存到云數據庫。把圖片文件存到云存儲。這就是云開發的方便之處，不用我們編寫后臺代碼，就可以輕松實現后臺功能。

接下來講朋友圈展示頁。

這個頁面主要做的就是

• 1，從云數據庫讀取數據
• 2，展示列表數據

1，讀取數據

這里讀取數據挺簡單，就是從云數據庫讀數據，這里我們做了一個排序，就是最新發布的數據在最上面。代碼如下

wx.cloud.database().collection('timeline')
      .orderBy('createTime', 'desc') //按發布視頻排序
      .get({
        success(res) {
          console.log("請求成功", res)
          that.setData({
            dataList: res.data
          })
        },
        fail(res) {
          console.log("請求失敗", res)
        }
      })

云數據庫的讀取也比較簡單，有不會的同學，或者沒有聽說過小程序云開發的同學，可以去翻看下我之前發的文章，也可以看下我錄的《10小時零基礎入門小程序云開發》

2，朋友圈列表的展示

這里也比較簡單，直接把布局代碼貼給大家。dataList就是我們第一步請求到的數據。

<block wx:for="{{dataList}}" wx:key="index">
  <view class="itemRoot">
    <view>
      <text class="desc">{{item.desc}}</text>
    </view>
    <view class="imgRoot">
      <block class="imgList" wx:for="{{item.fileIDs}}" wx:for-item="itemImg" wx:key="index">
        <image class="img" src='{{itemImg}}' mode='aspectFill' data-img='{{[itemImg,item.fileIDs]}}' bindtap="previewImg"></image>
      </block>
    </view>
  </view>
</block>

3，這里還有一個圖片預覽的功能

功能實現很簡單就下面幾行代碼，但是我們從wxml獲取組件上的數據時比較麻煩。

  // 預覽圖片
  previewImg: function(e) {
    let imgData = e.currentTarget.dataset.img;
    console.log("eeee", imgData[0])
    console.log("圖片s", imgData[1])
    wx.previewImage({
      //當前顯示圖片
      current: imgData[0],
      //所有圖片
      urls: imgData[1]
    })
  },

4,點擊圖片時通過 data- 獲取圖片列表和當前圖片數據

我們點擊組件時，可以通過data- 傳遞數據，但是一個點擊如果像傳多條數據呢。這時候可以用 data-xxx='{{[xxx,xxx]}}' 來傳遞數據了。如下代碼

<block wx:for="{{item.fileIDs}}" wx:key="item2" wx:for-item="item2">
     <image  src='{{item2}}' data-img='{{[item2,item.fileIDs]}}' mode='aspectFill' bindtap="previewImg"></image>
</block>

//我們再js里可以接收兩個數據
previewImg: function(e) {
    let imgData = e.currentTarget.dataset.img;
    console.log("item2", imgData[0])
    console.log("item.fileIDs", imgData[1])
    //大圖預覽
    wx.previewImage({
      //當前顯示圖片
      current: imgData[0],
      //所有圖片
      urls: imgData[1]
    })
},

上面代碼就可以實現，一次點擊，通過data- 傳遞多個數據到js里。

到這里我們就完整的實現了，朋友圈的發布與展示了

朋友圈展示的比較簡陋，后期再抽時間做美化吧。

源碼我已經上傳到網盤，需要的同學可以加我微信2501902696獲取

后面我也會錄制一套視頻來專門講解。敬請關注。