Day8-微信小程序實戰-交友小程序-首頁用戶列表渲染及多賬號調試及其點贊功能的實現

Posted on 2020-10-132020-10-13 by admin

在這之前已經把編輯個人的所有信息的功能已經完成了

之後先對首頁的列表搞動態的，之前都是寫死的靜態

1、之前都是把好友寫死的，現在就在js裏面定義一個數組，用循環來動態的綁定

在onReady中定義，取真實的數據給定義的列表數組list　　

通過調用 db.collection(‘users’).get() 這裏沒有加其他的限制，得到的就是所有的數據了，拿到全部的數據之後就會觸發then方法了

用then返回的res中有一個data的列表集合，有一個注意的點就是，這樣子讀取是吧數據庫中的數據的全部字段，但是我們需要用的只是

用戶的頭像和點贊數、用戶昵稱，其他的數據其實是不需要的

可以加一個field方法，可以要求返回的字段是哪些的

可以看到是只有一個用戶，我們為了模擬的話，就可以多賬號進行調試，

1、創立多賬號

　　　　①首先這個多賬號的一定要是測試號，所以先進入微信的管理後台 https://mp.weixin.qq.com/

　　　　②進入【成員管理】添加項目成員

　　　　③回到微信開發者工具中-》工具-》多賬號調試-》可以通過添加虛擬測試號來進行測試的，不用真實的微信號都可以

之後就是對點贊的功能進行設計了（就可以在index.wxml中給點贊的小心上加一個點擊事件即可了

（小細節在小程序中規定，在客戶端中讀取用戶列表的時候，一般不會把整個數據庫的用戶都讀取出來的，是有一個限制的

一般都是把前二十條數據給讀取出來的，如果數據一多的話，一般都是進行分頁處理了–一般都是用數據庫中的collection.skip和collection.limit,這兩個東西一起配合的話就可以做下拉加載的功能了）

由於這個點贊是要對找到用戶的id地址的，所以在wxml中給點贊這個圖標加上一個id自定義屬性的掛載

data-id="{{ item._id}}"

這個東西的用處就是，在點擊這個心心的時候就可以拿到這個自定義的屬性id了　　

通過把handleLinks（ev）函數中把ev打印出來發現，這個自定義屬性id 的位置在

 ev.target.dataset.id

console.log就是用來測試的，如果沒效果的話，一般都是直接在點擊事件後面通過promise 的then把res打印出來看看情況是怎麼樣的

***有時候這些點擊事件無法觸發的話，就可以在檢查一下樣式，可能這個區域在前端显示是在這裏，但是實際上是在其他的地方，

也就是布局引起的問題了

可以看到這裏就是碰到的是點贊的這個圖標，但是這個樣式是在左上角進行了渲染的

這個時候為了演示把，就把自定義屬性，和點擊事件放在點贊圖標還有點贊數包含的這個text裏面了

<text bindtap="handleLinks" data-id="{{ item._id}}" >
          <!-- 點贊圖標 -->
              <text class="iconfont icondianzan"
              ></text>
          <!-- 點贊數 -->
              <text>{{ item.links }}</text>
          </text>

改完之後，再點擊心心或者是數量，就可以正常的進行點贊了

　　但是發現只有給自己點贊的時候才可以改變點贊的數量，而改其他人點贊的時候就改不了

比如：

這就是一個權限的問題了也就是只能改自己的數據（點贊數）改不了別人的數據l

因為在小程序端中，由於用戶可以直接對數據庫進行操作，所以會有一定的風險，所以就通過這個訪問權限來進行了限制

那？

怎麼修改別人的數據呢？—這個操作就要在服務端來進行操作了！　　也就是在雲函數中去完成一個雲函數的操作了

下面就是講解如何在服務端來對数字字段來進行更改！

二、點贊功能實現與update雲函數

由於要在服務端來做的話，就可以把這一塊的部分代碼刪掉了

  handleLinks(ev){
    let id = ev.target.dataset.id;
    db.collection('users').doc(id).update({
      data : {
        links : 5
      }
    }).then((res)=>{
      console.log(res)
    }); 
  }

需要新創一個雲函數（新建一個node.js雲函數

這些默認的結構都是可以刪掉的了

之後就是參考微信開放文檔雲開發-》SDK文檔->數據庫-》collection->update-》示例代碼demo

其中：這個就是指定了數據庫的環境

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

然後就是在服務端拿到數據庫db

const db = cloud.database()

然後可以在示例代碼中看到async這個異步的操作

直接複製 try catch

try {
    return await db.collection('todos').where({
      done: false
    })
    .update({
      data: {
        progress: _.inc(10)
      },
    })
  } catch(e) {
    console.error(e)
  }

return就是返回一個異步的數據，而catch就是返回錯誤信息

主要修改的就是 db.collecion()中要反問那個數據庫表單，這裏不能寫死為users，因為可能其他的地方也是要用到更新的這個功能的

所以最好就是把update這個雲函數寫成一個通用的方式

其中雲函數入口函數

exports.main = async (event, context) => { 這個裡面的event就是前端傳參過來的對象了就訪問 event.colletion,然後不用where而是用doc 再把event的doc也傳進來，這 ***小知識點：ES6的擴展運算符。。。 (三個點）

更新成功了之後，就可以返回結果到前台了

這個就是update雲函數中js文件的代碼（傳進去的doc實際上是用戶的_id

 // 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
// 雲函數入口函數
exports.main = async (event, context) => {
  try {
    return await db.collection(event.collection).doc(event.doc)
      .update({
        data: {
         ...event.data 
        },
      })
  } catch (e) {
    console.error(e)
  }
}

View Code

把雲函數寫好之後，這個時候雲函數還是在本地，要把這個雲函數傳到雲開發平台上

上傳了之後一定要去雲平台-》雲函數中去檢查一下

之後就可以調用這個雲函數了

再回到index.js 點贊的方法 handleLinkes方法中進行設置即可；

如果雲函數沒問題，可能是雲函數裏面定義的env出了問題，就可以寫死了，傳入自己的那個環境，就不用默認的那個環境了

【注意】修改了雲函數記得要重新上傳到雲平台才行

（因為在服務端是不會受到數據庫權限的限制的）

後面要優化的就是（上面的點贊是寫死給多少links的，並且不能點完之後立馬更新

可以把數據庫的links讀出來，+1之後再寫入，但是這樣的話就多了一個數據庫的操縱了　　，但是數據庫本身就提供了累加或者累減等運算的操作的

（這樣的話就只需要一次的數據庫讀取即可了）

在開放文檔 db.command裏面就有很多的方法

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/command/Command.inc.html

示例代碼
將一個 todo 的進度自增 10：

const _ = db.command
db.collection('todos').doc('todo-id').update({
  data: {
    progress: _.inc(10)
  }
})

為了在服務端不把運算給寫死了，一般都是把運算直接通過前端來傳入的

由於前端不認識下劃線這種操作，因為前端要先解析，之後再把東西傳到服務端的，所以就可以在前端給服務端傳一個字符串的話

然後再在服務端解析即可

 data : "{links : _.inc(1)}"

在前端把這個字符串傳入到服務端中，之後就可以在服務端那邊對這個字符串進行解析了

所以在update雲函數中就要對event.data這個傳過來的數據進行判斷，判斷它的類型，是普通的還是字符串類型的，如果是字符串類型的話就要進行解析

用js裏面的eval方法，它是把字符串轉成 js 語句的

 if(typeof event.data == 'string'){
      event.data =  eval('(' + event.data + ')')
    }

即可了（點一下心心就可以讓點贊數+1）

後面有空的話，可以繼續進行優化，也就是對一次的點贊數進行限制，或者是點一下加+1，再點一下就是取消了就-1了

後面就是要把點贊了之後，實時的把點贊數進行更新

可以看到給服務端那邊上傳之後，對數據庫進行了更新之後，then返回的結果res，中有一個是updated==1，就可以進行if判斷了

再用for循環對列表中的每一個元素判斷，是不是現在被點擊點贊的這個id

let updated = res.result.stats.updated;
    if(updated){
      // 先用擴展運算符 克隆一份數組
      let cloneListData = [...this.data.listData];
      for(let i = 0;i < cloneListData.length ; i++){
        if( cloneListData[i]._id == id){ 
          cloneListData[i].links++;
        }
      }
      this.setData({
        listData : cloneListData
      });
    }

點贊數增加就是通過_inc 但是在服務端中的update函數中是用全局的，不能寫死，所以運算的規則就通過前端傳過去

為了以後其他的頁面也有更新功能的話做準備了

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

※南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

※教你寫出一流的銷售文案?

※超省錢租車方案

近期文章

標籤