這篇文章給大家介紹如何搭建論壇小程序，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

個人感覺云開發帶來的最大好處是鑒權流程的簡化和對后端的弱化，所以像筆者這種從未接觸過小程序開發的人也能夠在周末兩天時間內開發出一個功能完備、體驗閉環的勉強能用的產品。

功能分析

該小程序功能目前較為簡單（發布帖子、瀏覽帖子、發布評論），可用下圖表示，無需贅述：

由架構圖可知，云開發的數據庫（存帖子、存評論）、存儲（圖片）、云函數（讀、寫、更新數據庫等）都將涉及，很好地達到了練手的目的。

發布帖子

如果帖子不帶圖片，直接寫數據庫即可，如果帶圖片則需要先存入圖片到云開發提供的存儲中，拿到返回的fileId（可理解為圖片的url）再一并寫入數據庫，核心代碼：

for(leti=0;i<img_url.length;i++){
varstr=img_url[i];
varobj=str.lastIndexOf("/");
varfileName=str.substr(obj+1)
console.log(fileName)
wx.cloud.uploadFile({
cloudPath:'post_images/'+fileName,//必須指定文件名，否則返回的文件id不對
filePath:img_url[i],//小程序臨時文件路徑
success:res=>{
//getresourceID:
console.log(res)
//把上傳成功的圖片的地址放入數組中
img_url_ok.push(res.fileID)
//如果全部傳完，則可以將圖片路徑保存到數據庫
if(img_url_ok.length==img_url.length){
console.log(img_url_ok)
that.publish(img_url_ok)
}
},
fail:err=>{
//handleerror
console.log('fail:'+err.errMsg)
}
})
}

通過img_url_ok.length == img_url.length我們確定所有圖片已經上傳完成并返回了對應的id，然后執行寫入數據庫的操作：

/**
*執行發布時圖片已經上傳完成，寫入數據庫的是圖片的fileId
*/
publish:function(img_url_ok){
wx.cloud.init()
wx.cloud.callFunction({
name:'publish_post',
data:{
openid:app.globalData.openId,//這個云端其實能直接拿到
author_name:app.globalData.userInfo.nickName,
content:this.data.content,
image_url:img_url_ok,
publish_time:"",
update_time:""//目前讓服務器自己生成這兩個時間
},
success:function(res){
//強制刷新，這個傳參很粗暴
varpages=getCurrentPages();//獲取頁面棧
varprevPage=pages[pages.length-2];//上一個頁面
prevPage.setData({
update:true
})
wx.hideLoading()
wx.navigateBack({
delta:1
})
},
fail:console.error
})
},

通過wx.cloud.callFunction我們調用了一個云函數（通過name指定函數名），并將帖子內容content和圖片image_url以及其他信息（發布者昵稱、id等）一并傳到云端。然后再看看這個云函數：

exports.main=async(event,context)=>{
try{
returnawaitdb.collection('post_collection').add({
//data字段表示需新增的JSON數據
data:{
//發布時小程序傳入
//author_id:event.openid,不要自己傳，用sdk自帶的
author_id:event.userInfo.openId,
author_name:event.author_name,
content:event.content,
image_url:event.image_url,
//服務器時間和本地時間會造成什么影響，需要評估
publish_time:newDate(),
//update_time:event.update_time,//最近一次更新時間，發布或者評論觸發更新,目前用服務器端時間
update_time:newDate(),
//默認值，一些目前還沒開發，所以沒設置
//comment_count:0,//評論數，直接讀數據庫，避免兩個數據表示同一含義
watch_count:3,//瀏覽數
//star_count:0,//TODO：收藏人數
}
})
}catch(e){
console.error(e)
}
}

可以看到，云函數寫入了一條數據庫記錄，我們的參數通過event這個變量帶了進來。

獲取帖子列表

所謂獲取帖子列表其實就是讀上一節寫入的數據庫，但是我們并不需要全部信息（例如圖片url），并且要求按照時間排序，如果熟悉數據庫的話，會發現這又是一條查詢語句罷了：

exports.main=async(event,context)=>{
return{
postlist:awaitdb.collection('post_collection').field({//指定需要返回的字段
_id:true,
author_name:true,
content:true,
title:true,
watch_count:true
}).orderBy('update_time','desc').get(),//指定排序依據

}
}

瀏覽帖子內容

瀏覽帖子內容及給定一個帖子的id，由帖子列表點擊時帶入：

onItemClick:function(e){
console.log(e.currentTarget.dataset.postid)
wx.navigateTo({
url:'../postdetail/postdetail?postid='+e.currentTarget.dataset.postid,
})
},

然后在云函數中根據這個id拿到全部數據：

exports.main=async(event,context)=>{

return{
postdetail:awaitdb.collection('post_collection').where({
_id:event.postid
}).get(),
}
}

拿到全部數據后，再根據圖片id去加載貼子的圖片：

//獲取內容
wx.cloud.callFunction({
//云函數名稱
name:'get_post_detail',
data:{
postid:options.postid
},
success:function(res){
varpostdetail=res.result.postdetail.data[0];
that.setData({
detail:postdetail,
contentLoaded:true
})
that.downloadImages(postdetail.image_url)
},
fail:console.error
})

這里that.downloadImages(postdetail.image_url)即加載圖片：

/**
*從數據庫獲取圖片的fileId，然后去云存儲下載，最后加載出來
*/
downloadImages:function(image_urls){
varthat=this
if(image_urls.length==0){
return
}else{
varurls=[]
for(leti=0;i<image_urls.length;i++){
wx.cloud.downloadFile({
fileID:image_urls[i],
success:res=>{
//gettempfilepath
console.log(res.tempFilePath)
urls.push(res.tempFilePath)
if(urls.length==image_urls.length){
console.log(urls)
that.setData({
imageUrls:urls,
imagesLoaded:true
})
}
},
fail:err=>{
//handleerror
}
})
}
}
},

發表評論

發表評論和發布帖子邏輯類似，只是寫入的數據不同，不做贅述。

總結

以上是生活随笔為你收集整理的如何搭建论坛小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。