借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示

隨著小程序云開發(fā)越來越成熟，現(xiàn)在用云開發(fā)可以做的事情也越來越多，今天就來帶大家實(shí)現(xiàn)小程序朋友圈功能。
創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、赤峰網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為赤峰等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

知識(shí)技能點(diǎn)

1，小程序云開發(fā)
2，小程序云存儲(chǔ)
3，小程序云數(shù)據(jù)庫
4，圖片大圖預(yù)覽
5，圖片選擇與刪除

先給大家畫個(gè)發(fā)布的流程圖

借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示
下面是我們真正存到數(shù)據(jù)庫里的數(shù)據(jù)。

然后我們?cè)谂笥讶撝恍枰?qǐng)求數(shù)據(jù)庫里的數(shù)據(jù)，然后展示到頁面就如下圖所示

所以我們接下來就來實(shí)現(xiàn)發(fā)布和展示的功能

發(fā)布朋友圈

一，首先要?jiǎng)?chuàng)建一個(gè)小程序項(xiàng)目

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

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

二，創(chuàng)建發(fā)布頁面

我們發(fā)布頁布局比較簡(jiǎn)單，一個(gè)文字輸入框，一個(gè)圖片展示區(qū)域，一個(gè)發(fā)布按鈕。
借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示
先把發(fā)布頁布局wxml貼出來

<textarea class="desc" placeholder="請(qǐng)輸入內(nèi)容" 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">發(fā)布朋友圈</button>

這里唯一的難點(diǎn)，就是下面的圖片分布，因?yàn)槲覀兠看斡脩暨x擇的圖片個(gè)數(shù)不固定，這就要去分情況考慮了。
wx:if="{{imgList.length==(index+1)&& imgList.length<8}}"這段代碼是用來控制我們發(fā)布的那個(gè)? 號(hào)的顯示與隱藏的。
借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示

這個(gè)?號(hào)有下面三種情況需要考慮

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

三，實(shí)現(xiàn)圖片選擇和顯示功能

圖片選擇很簡(jiǎn)單，就用官方的api即可。實(shí)現(xiàn)代碼如下

 //選擇圖片
  ChooseImage() {
    wx.chooseImage({
      count: 8 - this.data.imgList.length, //默認(rèn)9,我們這里最多選擇8張
      sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
      sourceType: ['album'], //從相冊(cè)選擇
      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
          })
        }
      }
    });
  },

這里單獨(dú)說明下 8 - this.data.imgList.length。因?yàn)槲疫@里規(guī)定最多只能上傳8張圖片。所以用了count8 ,至于后面為什么要減去this.data.imgList.length。主要是我們用戶不一定一次選擇8張圖片，有可能第一次選擇2張，第二次選擇2張。。。
所以我們做選擇時(shí)，每次傳入的數(shù)量肯定不一樣的。而這個(gè)imgList.length就是用戶已經(jīng)選擇的圖片個(gè)數(shù)。用8減去已選擇的個(gè)數(shù)，就是下次最多能選擇的了。

上面代碼在選擇成功后，會(huì)生成一個(gè)臨時(shí)的圖片鏈接。如下圖所示，這個(gè)鏈接既可以用來展示我們已經(jīng)選擇的圖片，后面的圖片上傳也要用到。
借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示

四，實(shí)現(xiàn)圖片刪除功能

我們每張圖片的右上角有個(gè)刪除按鈕，點(diǎn)擊刪除按鈕可以實(shí)現(xiàn)圖片的刪除。
借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示
這里比較簡(jiǎn)單，把代碼貼給大家

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

五，發(fā)布功能

1，發(fā)布之前我們需要先校驗(yàn)下內(nèi)容和圖片是否為空

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

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

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

把完整的發(fā)布代碼貼給大家吧

/**
* 編程小石頭
* wehchat：2501902696
*/
let app = getApp();
Page({
data: {
imgList: [],
fileIDs: [],
desc: ''
},

//獲取輸入內(nèi)容
getInput(event) {
console.log("輸入的內(nèi)容", event.detail.value)
this.setData({
  desc: event.detail.value
})
},

//選擇圖片
ChooseImage() {
wx.chooseImage({
  count: 8 - this.data.imgList.length, //默認(rèn)9,我們這里最多選擇8張
  sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ['album'], //從相冊(cè)選擇
  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: '要?jiǎng)h除這張照片嗎？',
  content: '',
  cancelText: '取消',
  confirmText: '確定',
  success: res => {
    if (res.confirm) {
      this.data.imgList.splice(e.currentTarget.dataset.index, 1);
      this.setData({
        imgList: this.data.imgList
      })
    }
  }
})
},

//上傳數(shù)據(jù)
publish() {
let desc = this.data.desc
let imgList = this.data.imgList
if (!desc || desc.length < 6) {
  wx.showToast({
    icon: "none",
    title: '內(nèi)容大于6個(gè)字'
  })
  return
}
if (!imgList || imgList.length < 1) {
  wx.showToast({
    icon: "none",
    title: '請(qǐng)選擇圖片'
  })
  return
}
wx.showLoading({
  title: '發(fā)布中...',
})

const promiseArr = []
//只能一張張上傳 遍歷臨時(shí)的圖片數(shù)組
for (let i = 0; i < this.data.imgList.length; i++) {
  let filePath = this.data.imgList[i]
  let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正則表達(dá)式，獲取文件擴(kuò)展名
  //在每次上傳的時(shí)候，就往promiseArr里存一個(gè)promise，只有當(dāng)所有的都返回結(jié)果時(shí)，才可以繼續(xù)往下執(zhí)行
  promiseArr.push(new Promise((reslove, reject) => {
    wx.cloud.uploadFile({
      cloudPath: new Date().getTime() + suffix,
      filePath: filePath, // 文件路徑
    }).then(res => {
      // get resource ID
      console.log("上傳結(jié)果", 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: '發(fā)布成功',
      })
      console.log('發(fā)布成功', res)
      wx.navigateTo({
        url: '../pengyouquan/pengyouquan',
      })
    },
    fail: err => {
      wx.hideLoading()
      wx.showToast({
        icon: 'none',
        title: '網(wǎng)絡(luò)不給力....'
      })
      console.error('發(fā)布失敗', err)
    }
  })
})
},
})

到這里我們發(fā)布的功能就實(shí)現(xiàn)了，發(fā)布功能就如下面這個(gè)流程圖所示。
借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示
我們最終的目的是要把文字和圖片鏈接存到云數(shù)據(jù)庫。把圖片文件存到云存儲(chǔ)。這就是云開發(fā)的方便之處，不用我們編寫后臺(tái)代碼，就可以輕松實(shí)現(xiàn)后臺(tái)功能。

接下來講朋友圈展示頁。

借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示
這個(gè)頁面主要做的就是

1，從云數(shù)據(jù)庫讀取數(shù)據(jù)
2，展示列表數(shù)據(jù)

1，讀取數(shù)據(jù)

這里讀取數(shù)據(jù)挺簡(jiǎn)單，就是從云數(shù)據(jù)庫讀數(shù)據(jù)，這里我們做了一個(gè)排序，就是最新發(fā)布的數(shù)據(jù)在最上面。代碼如下

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

云數(shù)據(jù)庫的讀取也比較簡(jiǎn)單，有不會(huì)的同學(xué)，或者沒有聽說過小程序云開發(fā)的同學(xué)，可以去翻看下我之前發(fā)的文章，也可以看下我錄的《10小時(shí)零基礎(chǔ)入門小程序云開發(fā)》

2，朋友圈列表的展示

這里也比較簡(jiǎn)單，直接把布局代碼貼給大家。dataList就是我們第一步請(qǐng)求到的數(shù)據(jù)。

<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，這里還有一個(gè)圖片預(yù)覽的功能

功能實(shí)現(xiàn)很簡(jiǎn)單就下面幾行代碼，但是我們從wxml獲取組件上的數(shù)據(jù)時(shí)比較麻煩。

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

4,點(diǎn)擊圖片時(shí)通過 data- 獲取圖片列表和當(dāng)前圖片數(shù)據(jù)

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

<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>

//我們?cè)賘s里可以接收兩個(gè)數(shù)據(jù)
previewImg: function(e) {
    let imgData = e.currentTarget.dataset.img;
    console.log("item2", imgData[0])
    console.log("item.fileIDs", imgData[1])
    //大圖預(yù)覽
    wx.previewImage({
      //當(dāng)前顯示圖片
      current: imgData[0],
      //所有圖片
      urls: imgData[1]
    })
},

上面代碼就可以實(shí)現(xiàn)，一次點(diǎn)擊，通過data- 傳遞多個(gè)數(shù)據(jù)到j(luò)s里。

到這里我們就完整的實(shí)現(xiàn)了，朋友圈的發(fā)布與展示了

借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示
朋友圈展示的比較簡(jiǎn)陋，后期再抽時(shí)間做美化吧。

源碼我已經(jīng)上傳到網(wǎng)盤，需要的同學(xué)可以加我微信2501902696獲取
借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示

后面我也會(huì)錄制一套視頻來專門講解。敬請(qǐng)關(guān)注。

本文標(biāo)題：借助云開發(fā)實(shí)現(xiàn)小程序朋友圈的發(fā)布與展示
路徑分享：http://www.chinadenli.net/article32/ishhsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站建設(shè)、外貿(mào)建站、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区