Shulou(Shulou.com)05/31 Report--

This article introduces how to build the Mini Program forum, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

Personally, I feel that the greatest benefit of cloud development is the simplification of the authentication process and the weakening of the backend. So people like me, who have never been in contact with Mini Program development, can also develop a fully functional, closed-loop barely working product in two days on the weekend.

Functional analysis

At present, the Mini Program function is relatively simple (post, browse post, post comment). It can be shown in the following figure. There is no need to repeat it:

As can be seen from the architecture diagram, cloud-developed databases (save posts, save comments), storage (pictures), and cloud functions (read, write, update database, etc.) will all be involved, which well achieve the goal of practicing.

Post a post

If the post does not include a picture, you can simply write to the database. If you do, you need to store the picture in the storage provided by the cloud developer, get the returned fileId (which can be understood as the url of the picture), and then write it to the database. The core code:

For (let I = 0; I

< img_url.length; i++) { var str = img_url[i]; var obj = str.lastIndexOf("/"); var fileName = str.substr(obj + 1) console.log(fileName) wx.cloud.uploadFile({ cloudPath: 'post_images/' + fileName,//必须指定文件名，否则返回的文件id不对 filePath: img_url[i], // 小程序临时文件路径 success: res =>

{/ / get resource ID: console.log (res) / / put the address of the uploaded image into the array img_url_ok.push (res.fileID) / / if all are uploaded Then you can save the image path to the database if (img_url_ok.length = = img_url.length) {console.log (img_url_ok) that.publish (img_url_ok)}}, fail: err = > {/ / handle error console.log ('fail:' + err.errMsg)}})}

Through img_url_ok.length = = img_url.length, we make sure that all images have been uploaded and the corresponding id is returned, and then write to the database:

/ * the picture has been uploaded when the release is executed What is written to the database is the fileId * / publish: function (img_url_ok) {wx.cloud.init () wx.cloud.callFunction ({name: 'publish_post', data: {openid: app.globalData.openId,//), which can actually get author_name: app.globalData.userInfo.nickName, content: this.data.content, image_url: img_url_ok directly on the cloud. Publish_time: ", update_time:" / / currently let the server generate these two times by itself}, success: function (res) {/ / force refresh This parameter pass is very rough var pages = getCurrentPages () / / get page stack var prevPage = pages [pages.length-2]; / / previous page prevPage.setData ({update: true}) wx.hideLoading () wx.navigateBack ({delta: 1})}, fail: console.error})}

Through wx.cloud.callFunction, we call a cloud function (specify the function name through name), and send the post content content and image image_url and other information (publisher nickname, id, etc.) to the cloud. Then take a look at this cloud function:

Exports.main = async (event, context) = > {try {return await db.collection ('post_collection') .add ({/ / data field indicates the JSON data to be added data: {/ / when Mini Program is passed / / author_id: event.openid, do not upload it yourself Use the author_id: event.userInfo.openId, author_name: event.author_name, content: event.content, image_url: event.image_url, / / server time and local time included with sdk to evaluate the last update time of publish_time: new Date (), / / update_time: event.update_time,//. Updates are triggered by posts or comments. Currently, the server time update_time: new Date (), / / default is used. Some of them have not been developed yet, so the number of / / comment_count: 0 prime / comments is not set. Read the database directly. Avoid two data to express the same meaning watch_count: 3 console.error pr / views / / star_count: 0 dagger pare Todo: favorites}})} catch (e) {console.error (e)}}

As you can see, the cloud function is written to a database record, and our parameters are brought in through the variable event.

Get a list of posts

Getting the list of posts means reading the database written in the previous section, but we don't need all the information (such as image url) and need to sort it by time. If you are familiar with the database, you will find that this is just another query statement:

Exports.main = async (event, context) = > {return {postlist: await db.collection ('post_collection'). Field ({/ / specify the fields to be returned _ id: true, author_name: true, content: true, title: true, watch_count: true}). OrderBy (' update_time', 'desc'). Get (), / / specify sorting basis}} browse the content of the post

Browse the content of a post and the id of a given post, and bring it in when the post list is clicked:

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

Then get all the data according to this id in the cloud function:

Exports.main = async (event, context) = > {return {postdetail: await db.collection ('post_collection'). Where ({_ id: event.postid}). Get (),}}

After getting all the data, load the image of the post according to the picture id:

/ / get the content wx.cloud.callFunction ({/ / Cloud function name name: 'get_post_detail', data: {postid: options.postid}, success: function (res) {var postdetail = res.result.postdetail.data [0]) That.setData ({detail: postdetail, contentLoaded: true}) that.downloadImages (postdetail.image_url)}, fail: console.error})

Here that.downloadImages (postdetail.image_url) loads the image:

/ * get the fileId of the image from the database, then download it from cloud storage, and finally load it out * / downloadImages: function (image_urls) {var that = this if (image_urls.length = = 0) {return} else {var urls = [] for (let I = 0; I)

< image_urls.length; i++) { wx.cloud.downloadFile({ fileID: image_urls[i], success: res =>

{/ / get temp file path 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 = > {/ / handle error}})}, comment

The logic of making a comment is similar to posting a post, except that the data written is different and there is no need to repeat it.

On how to build a forum Mini Program to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.