隨着小程序雲開發越來越成熟,現在用雲開發可以做的事情也越來越多,今天就來帶大家實現小程序朋友圈功能。
知識技能點
- 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獲取
後面我也會錄製一套視頻來專門講解。敬請關注。