【小程序】小程序技術訓練營學習筆記-part3

個人筆記部分,無參考意義
雲開發技術訓練營

雲開發快速入門

下載Nodejs

我下載的是二進制文件zip包,解壓然後把目錄添加到環境變量path即可

部署上傳雲函數

如果顯示“npm不是內部或外部命令”
重啓一下開發者工具也行

獲取openid與雲函數login

雲函數的返回結果在日誌的第一行
注意,回調函數的執行端在小程序端

新建雲函數

pages/addFunction/addFunction.wxml頁面裏,result是輸出

體驗雲調用之服務端調用

發送模板消息這個功能需要一些配置,同時上傳雲函數的時候可以選擇依賴上傳,因爲你可以查看package.json裏的依賴,這個依賴在login裏已經上傳過了
在這裏插入圖片描述

體驗前端操作數據庫

頁面裏的模擬操作都在模擬器裏

基礎庫與wx.cloud

雲開發能力

這一節需要一個新項目,請按照上一節末尾從頭搭建一個新的雲開發項目

本地調試與雲端測試

小程序端與服務端

小程序端與雲端的初始化
這裏提到了我們開發小程序的時候,一般會有兩個環境,一個被用作測試,一個被用作生產。
例如我測試的雲環境如下,是個免費版,生產我就弄個基礎版的
在這裏插入圖片描述
那麼如果我們完成了代碼編寫與測試任務,需要正式上線運行了,就需要吧我們的小程序丟到生產環境上去。這就需要我們修改初始化配置
例如,小程序的初始化是在app.js文件裏使用wx.cloud.init來初始化

wx.cloud.init({
  env: 'my-env-id', //可以填寫生產環境或者測試環境的環境ID
  traceUser: true,
})

這裏的 env 只會決定小程序端API調用的雲環境,就是小程序要調用哪個雲環境(生產還是測試)下面的各種東西(如函數和數據庫等),而不會決定雲函數中的 API 調用的環境,個人理解:雲函數裏可能也會調用很多其他的API啊,這些API在哪個環境裏運行,還需要配置的,怎麼配置呢
雲函數中的API調用的環境也可以使用初始化來設置。如下所示,就是在雲函數的index.js頁面

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

在這裏插入圖片描述

獲取用戶信息和登錄

使用open-type=”getUserInfo” 來獲取用戶信息的作用和 wx.getUserInfo API基本效果是一樣的,區別在於wx.getUserInfo 這種方式最好是在用戶允許獲取公開信息(也就是res.authSetting[‘scope.userInfo’]的值爲true)之後再調用,如果用戶拒絕了授權就不會再有彈窗(除非用戶刪掉了你的小程序再使用),調用就會失敗,而使用組件的方式是用戶主動點擊,用戶即使拒絕了,再點擊仍會彈出授權彈窗。所以推薦先使用組件來獲取用戶授權,然後再來使用wx.getUserInfo來獲取用戶信息。

注意大小寫問題

getUserInfomation: function (event) {
    console.log('getUserInfomation打印的事件對象', event)
    let { avatarUrl, city, nickName}= event.detail.userInfo
    this.setData({
      avatarUrl,city, nickName
    })
  },

注意這種取值方式,通過大括號直接獲取json對象的對應屬性值

wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      wx.getUserInfo({
        success: res => {
          let { avatarUrl, city, nickName } =res.userInfo
          this.setData({
            avatarUrl, city, nickName
          })
        }
      })
    }
  }
});

搞清楚這個this是誰

小程序端上傳圖片到雲存儲

微信裏上傳文件的API都是choose開頭的
以及wx.cloud.uploadFile是小程序端API,可以自動上傳到對應的雲端,這是因爲小程序配置了雲端運行環境

渲染雲存儲圖片到組件這一小節裏,注意this是誰,以及用的是函數,還是箭頭函數

我調用雲函數的時候發現每次都不成功,然後日誌裏也沒顯示
在這裏插入圖片描述
後來發現是函數名沒選,這個是Login這個函數的日誌

在這裏插入圖片描述

教程裏說

要本地調試需要使用npm install安裝wx-server-sdk依賴

所以如果不打算本地調試,就不用install直接上傳函數就行了

小程序端調用數據庫,讀取counters能成功,但是讀取zhihu_daily就一直失敗
我想了大概半個小時,解決了

文中提到了openid與數據庫

在雲開發控制檯的數據庫標籤裏,打開上一節內容裏的counters集合,在這個集合裏我們可以看到每條記錄除了有_id字段以外,還有一個_openid字段用來標誌每條記錄的創建者(也就是小程序的用戶)。但是在我們使用管理端(控制檯和雲函數)中創建的數據比如我們之前導入的zhihu_daily,就不會有 _openid 字段,因爲這些記錄屬於管理員(不是用戶)創建的記錄。

也就是說counter集合裏的數據的管理員就是小程序的用戶,而zhihu_daily集合的管理員並不是小程序用戶,所以小程序端如果要讀取數據的話,需要修改權限,如下圖所示
在這裏插入圖片描述

雲數據庫入門

感覺這一章好像漏了點東西

數據庫的權限控制與安全規則

裏面沒講這個配置在哪裏啊,以後再說

一窺數據查詢的全貌

在上一節我們已經將中國城市經濟數據china.csv的數據導入到了集合china之中

並沒有,好像被漏了,但是也比較好導入,
在這裏插入圖片描述
不是在index.js裏寫東西,而是在chinadata.js裏寫讀取數據庫代碼

操作單個記錄doc的字段值

doc指的就是以_id爲key搜尋出來的一條記錄,單個記錄

存儲、數組、對象

雲存儲與數據庫的關係

雲存儲存儲着圖片等資源,數據庫存着雲存儲裏的數據的相關信息,比如說需要展示哪張圖片啊,這張圖片在雲存儲的什麼位置啊是對應用戶的信息啊

相信大家都應該在其他小程序體驗過文件上傳的功能,在交互上這個功能雖然看起來簡單,但是在代碼的邏輯上卻包含着四個關鍵步驟:

  1. 首先把文件上傳到小程序的臨時文件,並獲取臨時文件地址以及文件的名稱;
  2. 將臨時文件上傳到雲存儲指定雲文件裏,並q取到文件的FileID;
  3. 將文件在雲存儲的FileID和文件的名稱上傳到數據庫;
  4. 獲取文件夾內所有文件的信息。

建立用戶與數據的關係

小程序 - 使用async出現regeneratorRuntime is not defined錯誤
async/await的使用說明裏也有說

async 是“異步”的簡寫,async 用於申明一個 function 是異步的,而 await 用於等待一個異步方法執行完成,await 只能出現在 async 函數中。await 在 async 函數中才會有效。假設一個業務需要分步完成,每個步驟都是異步的,而且依賴上一步的執行結果,甚至依賴之前每一步的結果,就可以使用Async Await來完成
之前在寫爬蟲的時候接觸過異步,Async標記異步函數,意思就是當這個函數內部出現等待的時候,CPU可以去執行其他的函數,而await的意思就是說,後面的函數是個異步函數,告訴cpu,我這個函數要等一段時間,你可以去幹別的事兒了

將文件信息存儲到數據庫

  addFiles(fileID) {
    const name = this.data.files[0].name
    const _id= this.data.userData.data[0]._id
    db.collection('clouddisk').doc(_id).update({
      data: {
        'folders.0.files': _.push({
          "name":name,
          "fileID":fileID
        })
      }
    }).then(result => {
      console.log("寫入成功", result)
      wx.navigateBack()
    }
    )
  }

'folders.0.files'的意思是folders列表的第一個元素的files列表

這一章好像還沒寫完,再等等

雲開發與nodejs

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章