微信小程式接入LeanCloud

yuzhou1234發表於2020-03-18
微信小程式Cloud
大家在做小程式或者客戶端開發的時候肯定會想使得資料進行聯網，但這樣就必須有對應的後臺伺服器以及資料庫，再加上linux運維等各種細節，往往會對新手比較勸退，在這裡給大家推薦一種**bass(後端即服務)**，不僅支援小程式，還支援網頁端，android，ios多平臺呼叫，支援Java，python，c#等多種語言，最重要的是`懂球帝`的後端就是託管在這個平臺上的，安全性有很大的保障

**LeanCloud微信小程式官方接入教程** https://leancloud.cn/docs/weapp.html

微信小程式JavaScript語言資料儲存教程 leancloud.cn/docs/leanst…

上來先不管原理，擼一把能直接用的教程

開啟LeanCloud控制檯網址 leancloud.cn/dashboard/a…

第一步：建立應用

第二步：填寫應用相關資訊

應用名稱必須填寫 個人使用的小型的專案就選擇開發版

開發版的使用限制：以物件儲存為例，其他可檢視官方價格說明

具體解釋一下每日的總請求數與雲端併發執行緒數

工作執行緒數指的是服務端可同時處理的請求數量。絕大多數應用需要的服務端工作執行緒數都不會超過 3 個。

假設服務端響應時間是 20 毫秒，那麼每個工作執行緒每秒鐘可以處理 1,000 / 20 = 50 個請求。

一個日活一萬的應用，如果每個使用者都產生 50 個請求，而且這一萬個使用者每天都集中在兩個小時內開啟應用，這兩小時內平均每秒鐘發生的請求數就是 10,000 × 50 / 2 / 60 / 60 = 69 個，只需要 69 / 50 = 1.15 個工作執行緒就足以應對這兩個小時的請求高峰。

考慮到可能出現的峰值，實際執行的產品應當儘量預留一定的冗餘。商用版應用預設擁有 30 個工作執行緒，足以應對絕大部分需求，如有需要也可以按需調整。

資料 API 每天累計請求超過 30,000 次後，後續的請求會無法得到資料，並返回錯誤碼 429，這個限制每日重置。***

服務端工作執行緒數 超過 3 時，後續的請求會無法得到資料，並返回錯誤碼 429，這個限制在工作執行緒數小於 3 時解除。複製程式碼

第三步：可以看到我們建立的應用管理控制檯

第四步：在圖示介面進行管理

第五步：微信小程式開發工具SDK下載安裝

leancloud.cn/docs/start.…

前往 releases.leanapp.cn/#/leancloud… 下載最新版本的 av-weapp-min.js，移動到 libs 目錄。

在 app.js 中使用 const AV = require('./libs/av-weapp-min.js'); 獲得 AV 的引用。在其他檔案中使用時請將路徑替換成對應的路徑。

這裡牽扯到的一個問題就是路徑問題，這裡普及一下路徑的表示方法

所以相對於程式程式碼所在的檔案，利用好這個關係一定可以找到對應的路徑。

第六步

在 app.js 中使用 const AV = require('./libs/av-weapp-min.js');獲得 AV 的引用

並在app.js中初始化應用

//app.js
const AV = require('./libs/av-weapp-min.js');
AV.init({
  appId: 'Cl2HGjUA2177jyaUblh54MBi-gzGzoHsz',
  appKey: '6l8aMu7nsr6wNQau5TmczImP',
});
App({});複製程式碼

第七步

在index.js中實現物件儲存，具體詳細的之後再說，我們這裡進行一個簡單的上傳工作在頁面載入完成之後

//獲取應用例項
const app = getApp();
const AV = require('../../libs/av-weapp-min.js');

Page({
  onLoad: function() {
    // 生命一個Todo型別
    var Todo = AV.Object.extend('Todo'); //Todo即為資料表名稱(或類名)
    // 新建一個Todo物件
    var todo = new Todo();
    // set方法:第一個引數為欄位名，第二個引數為該欄位的值
    todo.set('title', '部長會議'); //title為欄位名，工程師週會為該欄位的值
    todo.set('content', '週五晚上8點半');
    // 只要新增這一行程式碼，服務端就會自動新增這個欄位
    todo.set('location', '507教室');
    todo.save().then(function(todo) {
    // 成功儲存之後，執行其他邏輯.
    console.log('New object created with objectId: ' + todo.id);
    }, function(error) {
      // 異常處理
      console.error('Failed to create new object, with error message: ' + error.message);
    });

  }
})複製程式碼

第八步

實現完上邊的功能之後，介面開啟代表資料已經上傳成功，可以在控制檯進行相關的檢視

第九步：問題解決

** 如果出現下面問題**

** 找到工具 -> 專案詳情 -> 進入**

最後再按照這個域名設定進入我們微信公眾平臺 -> 小程式 -> 設定 -> 開發設定 -> 伺服器域名

第十步上傳檔案

首先在檢視層進行頁面程式碼編寫，建立一個按鈕，設定一個按鈕點選事件upload

<!--index.wxml-->
<view class="container">
<button bindtap='upload'>點選上傳圖片</button>
</view>複製程式碼

第十一步、js程式碼中實現按鈕點選上傳選擇圖片

//按鈕點選事件上傳圖片
upload: function() {
    wx.chooseImage({
      count: 9,//最多可選擇的圖片張數，最多為9張
      sizeType: ['original', 'compressed'],//所選圖片尺寸，原圖、壓縮圖
      sourceType: ['album', 'camera'],//選擇圖片的來源，從相簿選圖、使用相機
        //介面呼叫成功的回撥函式
        success: function(res) {
        var tempFilePath = res.tempFilePaths[0];    //圖片的本地臨時檔案路徑列表
        new AV.File('love', {                       //呼叫API介面上傳檔案，之後進行詳細講解
          blob: {
            uri: tempFilePath,
          },
        }).save().then(
          file => console.log(file.url())
        ).catch(console.error);
      }
    });
  }複製程式碼

第十二步：執行小程式,上傳圖片

第十三步：使用者系統一鍵登入

  //介面開始顯示時LeanCloud一鍵登入
  onShow: function() {
    AV.User.loginWithWeapp().then(user => {
      this.globalData.user = user.toJSON();
    }).catch(console.error);
  },複製程式碼

第十四步：檢視使用者資訊

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">檢視使用者資訊</button>複製程式碼
 //獲取使用者資訊
  bindGetUserInfo:function(e) {
  console.log(e.detail.userInfo);
  }複製程式碼

瞭解更多技術文章，歡迎關注我的個人公眾號

相關文章