藉助雲開發實現小程序朋友圈的發佈與展現
隨着小程序雲開發愈來愈成熟，如今用雲開發能夠作的事情也愈來愈多，今天就來帶你們實現小程序朋友圈功能。正則表達式
知識技能點
- 1，小程序雲開發
- 2，小程序雲存儲
- 3，小程序雲數據庫
- 4，圖片大圖預覽
- 5，圖片選擇與刪除
先給你們畫個發佈的流程圖
發佈朋友圈
一，首先要建立一個小程序項目
這裏就很少說了，若是你還不知道如何建立小程序項目能夠去翻看下我以前的文章，也能夠看下我錄製的《10小時零基礎入門小程序開發》數據庫
- 注意：必定要用本身的appid，因此你須要註冊一個小程序（我的的就行）
二，建立發佈頁面
咱們發佈頁佈局比較簡單，一個文字輸入框，一個圖片展現區域，一個發佈按鈕。 編程
<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}}"這段代碼是用來控制咱們發佈的那個➕ 號的顯示與隱藏的。 小程序
這個➕號有下面三種狀況須要考慮api
- 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減去已選擇的個數，就是下次最多能選擇的了。promise
上面代碼在選擇成功後，會生成一個臨時的圖片連接。以下圖所示，這個連接既能夠用來展現咱們已經選擇的圖片，後面的圖片上傳也要用到。 bash
四，實現圖片刪除功能
咱們每張圖片的右上角有個刪除按鈕，點擊刪除按鈕能夠實現圖片的刪除。 網絡
//刪除圖片
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來確保全部的圖片都上傳成功了，才執行後面的操做。app
把完整的發佈代碼貼給你們吧
/**
* 編程小石頭
* 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裏。
到這裏咱們就完整的實現了，朋友圈的發佈與展現了
源碼我已經上傳到網盤，須要的同窗能夠留言獲取
後面我也會錄製一套視頻來專門講解。敬請關注。
相關文章
- 1. 藉助雲開發實現小程序朋友圈的發佈與展現
- 2. 藉助雲開發實現小程序朋友圈的發佈與展現丨實戰
- 3. 小程序實現分享朋友圈
- 4. 藉助小程序雲開發實現小程序的登錄註冊功能
- 5. 微信小程序轉發朋友圈
- 6. 藉助小程序雲開發實現小程序支付功能（含源碼）
- 7. 藉助雲開發實現小程序短信驗證碼的發送
- 8. 朋友圈小程序實戰教程
- 9. 微信小程序藉助雲開發實現數據庫的「增刪改查」
- 10. 藉助小程序雲開發獲取小程序用戶openid
- 更多相關文章...
- • RSS 發佈您的 Feed - RSS 教程
- • 現實生活中的 XML - XML 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章