国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

小程序云開發實戰小結

來源:懂視網 責編:小采 時間:2020-11-27 22:05:47
文檔

小程序云開發實戰小結

小程序云開發實戰小結:1. 云開發簡介 由于小程序本身存儲數據的能力有限,所以不可能將大量的數據保存在客戶端,而且將數據保存在本地既不安全,也無法與其他小程序用戶共享,所以大多數小程序都需要一個服務端,服務端可以用多種技術實現,如PHP、Node.js、Python、ASP.NE
推薦度:
導讀小程序云開發實戰小結:1. 云開發簡介 由于小程序本身存儲數據的能力有限,所以不可能將大量的數據保存在客戶端,而且將數據保存在本地既不安全,也無法與其他小程序用戶共享,所以大多數小程序都需要一個服務端,服務端可以用多種技術實現,如PHP、Node.js、Python、ASP.NE

1. 云開發簡介

由于小程序本身存儲數據的能力有限,所以不可能將大量的數據保存在客戶端,而且將數據保存在本地既不安全,也無法與其他小程序用戶共享,所以大多數小程序都需要一個服務端,服務端可以用多種技術實現,如PHP、Node.js、Python、ASP.NET、Java EE等。不管使用哪種技術實現服務端,開發一款小程序都需要至少配備兩個程序員,一個是開發小程序的程序員,一個是開發服務端的程序員。而且這兩個程序員之間還需要不斷溝通,以便確認共同遵循的接口。

開發一款小程序需要兩名或更多的程序員參與,一直困擾著很多小的創業公司,因為多雇傭一個人,就會增加很多成本。所以基于這個痛點,很多公司推出了云開發技術,例如Bmob就是較早推出云開發的公司,所謂云開發,就是將服務端的功能都封裝起來,然后向客戶端提供API訪問這些封裝的功能。服務端的主要功能無外乎數據存儲、文件上傳下載、視頻/音頻流等功能。這些功能大多開發都不困難,但比較費時,所以將其封裝起來供客戶端調用是一個非常好的主意。

騰訊最近推出了自己的云開發系統,不過這個云開發系統目前只能用于小程序,而且只提供了如下3種。

  • 云數據庫
  • 云存儲
  • 云函數
  • 云數據庫是指在服務端提供的數據庫服務,小程序云提供的數據庫屬于文檔數據庫,文檔數據庫有別于關系型數據庫。傳統的關系型數據庫中可以保存若干個表,每一個表由若干條記錄組成。但文檔數據庫保存的是JSON格式的數據,每一個JSON文檔相當于關系型數據庫中的一個表。也就是說,文檔數據庫保存的是JSON文檔的集合。非常流行的MongoDB就是典型的文檔數據庫。云數據庫個組成部分對應的關系如下表所示。

    關系數據庫 文檔數據庫
    數據庫(database) 數據庫(database)
    表(table) 集合(collection)
    行(row) 記錄(record/doc)
    列(column) 字段(field)

    云存儲為小程序提供了遠程上傳和下載文件的能力。下載可以提供權限管理,小程序可以通過相應的API實現文件的上傳和下載功能。

    云函數就是一段可以運行在服務端的代碼,之所以要將部分代碼在服務端運行,主要有如下兩個原因:

  • 部署多個用戶共享,且容易維護的代碼
  • 獲取敏感信息,如appid、openid等。
  • 2. 搭建云開發環境

    現在讓我們來開發第一個與云的小程序,首先應該下載最新版的微信開發者工具,然后在小程序后臺獲取AppID。使用云開發功能,必須使用真實的AppID,不能使用測試用的AppID。

    啟動微信開發者工具,新創建一個小程序工程。在創建小程序工程的過程中,需要輸入AppID和項目名稱,然后在最下面的目標列表中選擇“建立云開發快速啟動模板”選項,如下圖所示。

    創建完支持云開發的小程序工程后,工程目錄結構和IDE主界面如下圖所示。當前工程默認帶了一些例子(模板中的例子)來幫助理解和開發基于云的小程序。

    如果第一次使用這個AppID開發基于云的小程序,應該單擊界面上方的“云開發”按鈕,會顯示如下圖所示的頁面。

    這是一個開通云服務的頁面,單擊“開通”按鈕,就會開通用于云開發的服務。在開通的過程中會出現如下圖所示的確認對話框,單擊”確定“按鈕進入下一個設置頁面。

    這個頁面是”新建環境“頁面,如下圖所示。需要輸入”環境名稱“,一個任意的字符串。在下面列出了基礎版的配置。如數據庫存儲空空間、云函數數量等。如果想要更多的資源,那以后肯定是要收費的。天下沒有免費的午餐。不過這個配置做實驗和用戶量不是非常大的小程序還是夠用的。

    單擊”確定“按鈕,就會創建一個環境,然后會進入如下圖所示的云開發控制臺。在這個控制臺中可以管理用戶、云數據庫、云存儲、云函數以及統計分析。并且會顯示相關的信息,如今日API調用

    如果想創建新環境,可以將鼠標放在右側當前環境minicloud上,會彈出如下圖所示的菜單,單擊”創建新環境“菜單項就會創建一個新的環境,目前每個小程序賬號課免費創建兩個新環境。

    3. 部署login云函數

    模板會默認創建一個login云函數,用于返回openid(標識當前微信登錄用戶的ID),所以在開發基于云的小程序之前,首先要先部署login云函數。

    選中login云函數,在右鍵菜單中單擊”上傳并部署“菜單項進行部署,如下圖所示。

    成功部署login云函數后,回到小程序的主頁面,單擊“點擊獲取openid”按鈕,如下圖所示,會通過login云函數獲取openid。

    成功通過login云函數獲取openid后,會顯示如下圖的頁面。現在就可以使用云API來開發小程序了。

    4. 開始實戰

    現在我們來開發第一個基于云的小程序,這個小程序非常簡單,就是在一個集合中插入一條數據,也就是一個JSON格式的文本。

    一個集合就相當于一個表。選擇環境后,小程序就會默認有一個數據庫,所以就不需要單獨創建數據庫了,只需要在該數據庫中創建若干個集合(表)即可。

    首先打開云開發控制臺,切換到”數據庫“頁面,單后單擊左上角的”添加集合“,會彈出如下圖所示的”添加集合“對話框,輸入集合的名字,然后單擊”確定“按鈕添加集合。

    創建一個新集合后的效果如下圖所示??梢酝ㄟ^單擊右側的”添加記錄“導入json或csv文件,每個文件最大50MB。不過本節并不會通過云開發控制臺導入,而是使用代碼來插入文檔。

    由于獲得openid后,會跳到userConsole頁面,所以我們在這個頁面的onLoad函數中向test集合插入一個json文檔。

    在小程序開發工具中定位到userConsole.js文件,并找到onLoad函數,如下圖所示。

    在onLoad函數中會從全局變量(globalData)中獲取openid。操作集合首先要通過init函數初始化環境,init函數的語法格式如下:

    wx.cloud.init({env:envname})

    其中envname是字符串類型的值,表示要使用的環境名,在前面已經創建了一個名為minicloud的環境了,所以本例的envname的值是'minicloud'。

    然后使用下面的代碼獲取數據庫和集合對象。

     const db = wx.cloud.database()
     const test = db.collection('test')

    其中test是前面建立的集合名。

    最后使用add方法插入json格式的數據,完整的代碼如下:

     wx.cloud.init({env:'minicloud'})
     const db = wx.cloud.database()
     const test = db.collection('test')
    
     test.add({
     // data 字段表示需新增的 JSON 數據
     data: {
    
     name: "Bill",
     age:30 
     },
     success: function (res) { 
     // 
    輸出成功插入后的id以及其他信息 console.log(res) } })

    現在重新運行程序,獲取openid后,就會在小程序開發者工具的Console中看到如下圖的信息。

    回到云開發控制臺,會看到test集合多了如下圖所示的數據。這表明json文檔已經插入成功。

    現在來改進前面編寫的基于云的小程序。這個小程序盡管可以向云數據庫中插入數據,不過代碼與模板代碼混在了一起,在真正的小程序項目中,不可能讓用戶先單擊按鈕獲得openid,再進行下面的操作,所以現在重新編寫基于云的小程序。主要包括如下功能。

  • 從文本輸入組件輸入姓名和年齡,單擊“插入數據”按鈕向云數據庫插入包含信命和年齡的數據。
  • 從文本輸入組件輸入記錄ID,單擊“查詢數據”按鈕,從云數據庫中查詢相關的數據,并將查詢到的數據中的姓名和年齡顯示在頁面上。
  • 小程序主界面如下圖所示。

    為了在我們自己頁面上實現這些功能,首先在小程序工程中創建一個main目錄,并創建如下圖所示的文件。

    接下來修改app.json文件,將main頁面變成首頁(第一個顯示的頁面),也就是將 "pages/main/main"放在pages數組的第一個元素的位置,修改后的app.json文件的內容如下:

    {
     "cloud": true,
     "pages": [
     "pages/main/main",
     "pages/userConsole/userConsole",
     "pages/storageConsole/storageConsole",
     "pages/databaseGuide/databaseGuide",
     "pages/addFunction/addFunction",
     "pages/deployFunctions/deployFunctions",
     "pages/chooseLib/chooseLib"
     ],
     "window": {
     "backgroundColor": "#F6F6F6",
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#F6F6F6",
     "navigationBarTitleText": "云開發 QuickStart",
     "navigationBarTextStyle": "black"
     }
    }

    現在重新運行小程序,會看到main頁面已經成為了小程序的首頁。由于本例的頁面需要用到一些組件,所以需要現在main.wxml文件中輸入下面的代碼完成
    main頁面的布局。

    <view>
     <input style='margin-top: 40rpx;' placeholder="請輸入姓名" value="{{name}}" bindinput="bindKeyInputName" />
     <input style='margin-top: 40rpx;' placeholder="請輸入年齡" value="{{age}}" bindinput="bindKeyInputAge" />
     <button style='margin-top: 40rpx;' bindtap='insertData'>插入數據</button>
     <input style='margin-top: 40rpx;' placeholder="請輸入記錄ID" value="{{recordId}}" bindinput="bindKeyInputId" />
    
     <button style='margin-top: 40rpx;' bindtap='queryData'>查詢數據</button>
    
     <text style='margin-top: 40rpx;'>
     姓名:{{nameResult}}
     </text>
     <text style='margin-top: 80rpx;'>
     年齡:{{ageResult}}
     </text>
    </view>

    在main.wxml文件中,包含3個<input>組件和2個text組件,這5個組件分別與age、name、recordId,nameResult和ageResult五個變量綁定,修改和獲取這5個組件的值也只需要考慮這5個變量即可。

    在小程序中調用云API之前,必須要獲取小程序的openid,這個openid表示當前小程序的用戶ID。由于進入小程序必須要通過微信,所以小程序使用與微信相同的用戶驗證體系,因此,小程序就不需要單獨登錄了,而openid就是小程序是否登錄的憑證。

    獲取openid的代碼已經包含在模板中了,只需要找到index.js文件,并搜索onGetOpenid函數,會看到如下的代碼。

     onGetOpenid: function() {
     // 調用云函數
     wx.cloud.callFunction({
     name: 'login',
     data: {},
     success: res => {
     console.log('[云函數] [login] user openid: ', res.result.openid)
     app.globalData.openid = res.result.openid
     wx.navigateTo({
     url: '../userConsole/userConsole',
     })
     },
     fail: err => {
     console.error('[云函數] [login] 調用失敗', err)
     wx.navigateTo({
     url: '../deployFunctions/deployFunctions',
     })
     }
     })
     }

    上面的代碼用于調用名為login的云函數獲取小程序的openid。通常只需要將onGetOpenid函數中的代碼直接復制到main.js文件中的onLoad函數即可。

    向云數據庫插入數據的代碼前面已經學過,一會大家可以看本例完整的代碼。從云數據庫中查詢數據可以使用下面的代碼。

    db.collection(集合名).doc(記錄ID).get(
     {
     // 查詢到數據后觸發,res參數值包含的查詢到 數據
     success:function(res) {
     },
     // 未查詢到數據觸發
     fail:function(res) {
     }
    })

    main.js中完整的實現代碼如下:

    // miniprogram/pages/main/main.js
    const app = getApp()
    Page({
    
     /**
     * 頁面的初始數據
     */
     db:undefined,
     test:undefined,
     data: {
     name:'',
     age:'',
     recordId:'',
     nameResult:'',
     ageResult:'' 
     },
    
     /**
     * 生命周期函數--監聽頁面加載
     */
     onLoad: function (options) {
     var that = this
     // 調用login云函數獲取openid
     wx.cloud.callFunction({
     name: 'login',
     data: {},
     success: res => {
     console.log('[云函數] [login] user openid: ', res.result.openid)
     app.globalData.openid = res.result.openid
     wx.cloud.init({ env: 'minicloud' })
     that.db = wx.cloud.database()
     that.test = that.db.collection('test')
     },
     fail: err => {
     console.error('[云函數] [login] 調用失敗', err)
     wx.navigateTo({
     url: '../deployFunctions/deployFunctions',
     })
     }
     })
    
     },
     // 單擊“插入數據”按鈕調用該函數
     insertData:function() {
     var that = this
     try
     {
     // 將年齡轉換為整數類型值
     var age = parseInt(that.data.age)
     // 如果輸入的年齡不是數字,會顯示錯誤對話框,并退出該函數
     if(isNaN(age))
     {
     // 顯示錯誤對話框
     wx.showModal({
     title: '錯誤',
     content: '請輸入正確的年齡',
     showCancel: false
     })
     return
     } 
     // 向test數據集添加記錄
     this.test.add({
     // data 字段表示需新增的 JSON 數據
     data: {
     name: that.data.name,
     age: age
     },
     // 數據插入成功,調用該函數
     success: function (res) {
     console.log(res)
     wx.showModal({
     title: '成功',
     content: '成功插入記錄',
     showCancel:false
     })
     that.setData({
     name:'',
     age:''
     })
     }
     })
     }
     catch(e)
     {
     wx.showModal({
     title: '錯誤',
     content: e.message,
     showCancel: false
     })
    
     }
     },
     // 單擊“查詢數據”按鈕執行該函數
     queryData:function() {
     var that = this
     // 根據記錄ID搜索數據集 
     this.db.collection('test').doc(this.data.recordId).get({
     // 找到記錄集調用
     success: function (res) { 
     // 將查詢結果顯示在頁面上 
     that.setData({
     nameResult:res.data.name,
     ageResult:res.data.age
     })
    
     },
     // 未查到數據時調用
     fail:function(res) {
     wx.showModal({
     title: '錯誤',
     content: '沒有找到記錄',
     showCancel: false
     })
     }
     })
    
     },
     // 下面的函數用于當更新input組件中的值時同時更新對應變量的值
     bindKeyInputName: function (e) {
     this.setData({
     name: e.detail.value
     })
     },
     bindKeyInputAge:function(e) {
     this.setData({
     age: e.detail.value
     })
     },
     bindKeyInputId:function(e) {
     this.setData({
     recordId:e.detail.value
     })
     },
    
    })

    現在重新運行小程序,并添加一些數據,看到云開發控制臺中的test集合下多了幾條記錄,如下圖所示。這表明已經將數據成功插入test集合。

    現在回到小程序開發界面,在"查詢按鈕“上方的文本輸入框中輸入一條記錄的ID,單擊”查詢數據“按鈕,會看到按鈕下方會顯示如下圖的查詢結果,如果未查詢到結果,會顯示一個提示對話框。

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    小程序云開發實戰小結

    小程序云開發實戰小結:1. 云開發簡介 由于小程序本身存儲數據的能力有限,所以不可能將大量的數據保存在客戶端,而且將數據保存在本地既不安全,也無法與其他小程序用戶共享,所以大多數小程序都需要一個服務端,服務端可以用多種技術實現,如PHP、Node.js、Python、ASP.NE
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 日韩 国产 在线 | 欧美一区二区视频 | 国内精品在线视频 | 亚洲欧美在线观看一区二区 | 日本午夜在线观看 | 国模精品一区二区 | 欧美成人高清视频 | 亚洲精品欧美精品 | 精品一区二区三区在线观看 | 九九九国产在线 | 一级成人a毛片免费播放 | 国内精品久久久久影院不卡 | 国产午夜在线观看 | 波多野结衣在线免费观看 | 欧美一级成人影院免费的 | a国产成人免费视频 | 亚洲第一网站在线观看 | 成人在线一区二区 | 国产激情视频一区二区三区 | 亚洲日本激情综合在线观看 | 亚洲a∨精品一区二区三区下载 | 91中文字幕在线观看 | 亚洲欧美韩国 | 国产精品久久久久9999小说 | 性欧美xxxx乳高跟 | 日韩一区二区三区视频 | 亚洲a毛片 | 成人免费一级毛片在线播放视频 | 久久香蕉国产线看观看乱码 | 欧美亚洲另类在线观看 | 97精品国产91久久久久久 | 亚洲国产精品日韩在线 | 2020精品极品国产色在线观看 | 精品麻豆 | 日韩αv | 国产成人精品久久一区二区三区 | 日韩成人免费在线视频 | 国产成人久久精品二区三区牛 | 亚欧美 | 日韩系列第一页 | 在线国产一区二区 |