微信小程序仿朋友圈功能開發（發佈、點贊、評論等功能）

• 2020 年 3 月 18 日
• 筆記

微信小程序仿朋友圈功能開發（發佈、點贊、評論等功能）

1.項目分析

項目整體分為三個部分

• 發佈
• 展示
• 詳情頁

2.數據庫設計分析

所有表共有字段 com

• create_time 記錄的創建時間
• update_time 記錄最近的一次修改時間

動態表設計 circles_list

既然是仿朋友圈功能實現，那麼數據實體必然包括 文字（主題內容） 和 圖片。

• content
• images

發佈的信息還要攜帶上發佈者的身份識別碼、昵稱 和 頭像 , 可以選擇性的帶上位置信息（不需要要進行功能拓展的話就不用加上該字段）。

• userid
• nickname
• avatar
• location

功能中存在 點贊 ， 評論等功能，需要的字段有 點贊數，評論數。

• thumbsnum
• remarksnum

對於每一條記錄，都要設置一個主鍵，唯一識別碼 _id

• _id

點贊表設計 thumbs_list

設計該表的主要功能是 判斷 該用戶 是否對某個動態點過贊

• circle_id 點贊的文章id
• userid
• cancle true / false 用於配置多次點擊取消點贊
• _id

評論表設置 remarks_list

• circle_id 評論的文章id
• userid
• content 評論的內容
• avatar 評論者頭像
• nickname 評論者昵稱
• _id

3.項目效果

使用的框架 ColorUI

按照順序展示

1.發佈界面

2.展示界面

3.詳情展示頁

4.項目關鍵問題

1. 獲取用戶信息授權

我是在點擊發佈的圖片按鈕處做的處理

 <button    open-type="getUserInfo"    bindgetuserinfo="topub">      <image class="add_icon" src="../../images/add.png"></image>  </button>

topub(e){      if (e.detail.errMsg == "getUserInfo:ok") {        console.log('獲得授權成功')        app.globalData.userInfo = e.detail.userInfo;        wx.setStorageSync('wxuserinfo', e.detail.userInfo)        //console.log(e.detail.userInfo)        wx.navigateTo({          url: 'SocialCirclePub/SocialCirclePub',        })      } else {        console.log('獲得授權失敗')      }      }

1. 點贊評論數目增加處理

通過雲函數解決 inc 解決

// 雲函數入口文件  const cloud = require('wx-server-sdk')    cloud.init({    env: cloud.DYNAMIC_CURRENT_ENV  })    const db = cloud.database()  const _ = db.command  exports.main = async (event, context) => {    var opr = event.opr;    if(opr == 'incthumb'){      try{        return db.collection('circles_list').doc(event.id).update({          data:{            thumbsnum:_.inc(1)          }        })      }catch(e){        console.error(e)      }    }else if (opr == 'incremark') {      try {        return db.collection('circles_list').doc(event.id).update({          data: {            remarksnum: _.inc(1)          }        })      } catch (e) {        console.error(e)      }    }  }