小程序雲開發全套實戰教程（最全）

時間  2019-11-12
標籤 程序 開發 全套 實戰 教程 简体版
原文   原文鏈接

####前言： 在學習雲開發的時候將本身的學習過程記錄下來了，放在了網上，收穫了一波好評，今天下午在辦公室沒有事情，也發現以前有人在博客裏面評論，你這個教程還有一半哩，多是csdn的自動搬運功能出來一點小問題，沒有搬運成功吧，這裏就手動複製粘貼成爲一篇了，篇幅比較長，若是有不足或者不注意寫錯的地方，歡迎你們提出糾正哦。html

####小程序雲開發實戰一：小程序掃一掃獲取到圖書ISBN碼（圖書條形碼）前端

接觸到雲函數已經有一段時間了，以前一直在看api，如今本身跟着網絡上的資料和視頻學習，作了一個小項目，相似於豆瓣讀書系列。 具體是這樣的一個流程，後面會一步步的實現。node

小程序掃碼實現讀取isbn，獲取圖書的各類信息 1：用戶端小程序調用 wx.scanCode接口,獲取到ISBN碼 2：使用ISBN碼調用雲函數，在請求雲函數的時候，雲函數會請求豆瓣的API，獲取豆瓣圖書信息。 3：圖書信息請求到以後，會將其中無用的信息返回給小程序中，小程序中再拿出獲取到的信息，建立圖書條目 4：將對應的數據直接存儲到雲開大的數據庫裏面git

以前用過微信掃一掃功能，調用二維碼，掃描本身生成的二維碼，並將二維碼的內容顯示在界面的兩個例子：github

微信小程序掃一掃的功能實現：www.jianshu.com/p/e00b44293… 小程序掃碼成功後帶着參數跳轉到指定頁面：www.jianshu.com/p/413c5831d…數據庫

如今是用戶端小程序調用 wx.scanCode接口,獲取到圖書ISBN碼（圖書條形碼），在辦公室找了一圈，找到了一本圖書ISBN碼，能夠自動忽略我這渣渣的像素。npm

####demo的示例:

在下面的示例代碼裏面，我是使用了小程序的組件庫的，若是有遇到引入庫的問題的能夠查看：小程序動端組件庫Vant Weapp的使用https://www.jianshu.com/p/10d75a3ca3d0編程

1：wxmljson

<van-button type="primary" bind:click="scanCode">掃碼加書</van-button>
複製代碼

2:json小程序

{
 "usingComponents": {
  "van-button": "../../vant/button/index"
}
}
複製代碼

3:js（page自動生成默認的各個函數，能夠本身手動刪除）

// pages/scanCode/scanCode.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
   
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  },

scanCode: function (event) {
console.log(1)
  // 容許從相機和相冊掃碼
  wx.scanCode({
   onlyFromCamera:true,
   scanType:['barCode'],
   success:res=>{
     console.log(res.result)
   },
   fail:err=>{
     console.log(err);
   }
  })
  }

})
複製代碼

ok，獲取到信息

關於參考的視頻資料：能夠跟着視頻後面學習一下：cloud.tencent.com/developer/e…

####小程序雲開發實戰二：小程序雲開發雲函數安裝依賴步驟

1：安裝nodejs,準備好環境，這一步就不細說了，沒有安裝的能夠自行百度，不知道有沒有安裝的能夠輸入 node -v 查看一下。

2：新建一個雲函數模板，在cloudfunctions目錄底下，新建一個雲函數的文件bookinfo。

3：在新建文件上右擊文件，選擇在終端打開。

這個時候會彈出一個cmd窗口。

4：在cmd 打開雲函數目錄中，安裝依賴。 輸入命令：

npm install --production
複製代碼

依賴安裝成功以後，文件裏面多會出現package-lock.json這個文件。

5：因爲要請求網絡，因此要安裝請求網絡的庫，請求網絡的庫可使用node.js中的request庫，方便快捷：github.com/request/req…

在小程序裏面要使用的雲函數是同步的，因此使用promise，由於使用傳統的callback沒有辦法在控制檯之中返回數據。

github.com/request/req… 安裝方法： 經過這兩行命令進行安裝，複製命令 

npm install --save request
npm install --save request-promise
複製代碼

ok，完成，依賴已經放置在package.json文件之中了

ok，當文件上傳到雲端的時候，就會自動安裝相關依賴了。

####小程序雲開發實戰三：編寫雲函數代碼

1：在雲函數之中，拿到小程序端掃一掃獲取到的傳的編碼，該如何傳參？

雲函數API: developers.weixin.qq.com/miniprogram…

經過看文檔能夠學會，在雲函數裏，咱們能夠經過傳遞一份data來獲取這裏面的數據，而後再經過event來拿到對應的數據。

2：複製這個api裏面的方法：

圖片.png

打開實戰一里面寫的小程序端的掃碼的js界面，把這個方法放在success裏面。 要調用的雲函數的名稱name：要改爲成實戰二教程裏面創建的雲函數bookinfo

3：繼續修改咱們要傳遞的參數 傳遞的參數是isbn，結果是掃碼獲得的result

4：將result的結果打印出來，ok,用戶端（小程序端）代碼寫好了。

用戶端（小程序端）代碼寫完了，就這些：

// pages/scanCode/scanCode.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

scanCode: function(event) {
    console.log(1)
    // 容許從相機和相冊掃碼
    wx.scanCode({
      onlyFromCamera: true,
      scanType: ['barCode'],
      success: res => {
        console.log(res.result)

        //
        wx.cloud.callFunction({
          // 要調用的雲函數名稱
          name: 'bookinfo',
          // 傳遞給雲函數的參數
          data: {
            isbn: res.result
          },
          success: res => {
            console.log(res)
         
          },
          fail: err => {
            console.error(res)
          }
        })
      },
      fail: err => {
        console.log(err);
      }
    })
  }

})
複製代碼

####5：而後開始寫雲函數端代碼 打開bookinfo裏面的index.js,將event結果打印出來,請求雲函數，將雲函數之中的isbn返回回來

寫好了

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



// 雲函數入口函數

//var rp = require('request-promise')

exports.main = async (event, context) => {
 console.logI(event);
return event.isbn
  
  // var res = rp('https://api.douban.com/v2/book/isbn/' + event.isbn).then(html => {
  //   return html;
  // }).catch(err => {
  //   console.log(err)
  // })
  //return res
  // const wxContext = cloud.getWXContext()
  // return {
  //   event,
  //   openid: wxContext.OPENID,
  //   appid: wxContext.APPID,
  //   unionid: wxContext.UNIONID,
  // }
}
複製代碼

右擊，上傳而且部署雲函數

測試一下，雲函數調用成功,返回的結果(控制檯打印)是isbn。

好的，雲函數代碼編寫已經完成。 接下來就是實戰四，調用豆瓣的API,實現具體的數據。

####小程序雲開發實戰四：調用豆瓣API獲取具體的數據

在網上找了一下，找到了一個能夠用的豆瓣API： api.douban.com/v2/book/isb…

1：打開雲函數文件夾，index.js裏面編寫代碼，引用request promise。

var rp = require('request-promise')
複製代碼

2：自定義的isbn，使用一個+號來鏈接，在傳遞一個catch來處理錯誤狀況。

var res = rp('https://api.douban.com/v2/book/isbn/'+event.isbn).then(html=>{
return html;
}).catch(err=>{
console.log(err)
})
複製代碼

3:return resres就是對應的html,將html傳給用戶端。

圖片.png 

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

// 雲函數入口函數
var rp = require('request-promise')
exports.main = async(event, context) => {
  // console.logI(event);
  // return event.isbn

  var res = rp('https://api.douban.com/v2/book/isbn/' + event.isbn).then(html => {
    return html;
  }).catch(err => {
    console.log(err)
  })

  return res
  // const wxContext = cloud.getWXContext()

  // return {
  //   event,
  //   openid: wxContext.OPENID,
  //   appid: wxContext.APPID,
  //   unionid: wxContext.UNIONID,
  // }
}
複製代碼

4:寫完以後上傳雲函數。

圖片.png

好了，繼續測試一下，拿到這個條形碼的信息了（書本的信息）。

5：對於這些信息，進一步處理，拿到本身想要的信息:，打開小程序端scanCode.js。

//進一步的處理方法
        var bookString=res.result;
        console.log(JSON.parse(bookString))
複製代碼

看到了整本圖書上面的全部信息，修改這些信息，存入雲數據庫之中便可。

####小程序雲開發實戰五：如何將獲取到的API數據存入雲數據庫裏面

以前的文章裏面已經詳細寫過像雲數據庫裏面插入數據的方法，如今用在實際項目裏面再寫一遍。

1：使用數據庫的時候，首先要進行初始化 雲開發數據庫文檔：

developers.weixin.qq.com/miniprogram… 2：打開雲開發控制檯 老規矩，建立一個集合 books

3：打開小程序端js, 初始化數據庫

//雲數據庫初始化
         const db = wx.cloud.database({});
         const book = db.collection('books');
複製代碼

4：添加數據（插入數據） js代碼流程

// pages/scanCode/scanCode.js
Page({
  data: {
  },

  scanCode: function (event) {
    console.log(1)
    // 容許從相機和相冊掃碼
    wx.scanCode({
      onlyFromCamera: true,
      scanType: ['barCode'],
      success: res => {
        console.log(res.result)

        //
        wx.cloud.callFunction({
          // 要調用的雲函數名稱
          name: 'bookinfo',
          // 傳遞給雲函數的參數
          data: {
            isbn: res.result
          },
          success: res => {
            //  console.log(res)
            //進一步的處理
            var bookString = res.result;
            console.log(JSON.parse(bookString))


            //雲數據庫初始化
            const db = wx.cloud.database({});
            const book = db.collection('books')

            db.collection('books').add({
              // data 字段表示需新增的 JSON 數據
              data: JSON.parse(bookString)

            }).then(res => {
              console.log(res)
            }).catch(err => {
              console.log(err)
            })
          },
          fail: err => {
            console.error(res)
          }
        })
      },
      fail: err => {
        console.log(err);
      }
    })
  }

})
複製代碼

5：代碼邏輯 1:點擊按鈕以後調用掃一掃scanCode 2：讀取照相機傳遞過來的圖片，拿到barCode的代碼 3：將拿到的barCode代碼傳遞給雲函數中的bookinfo，傳遞後將結果獲取到本地 4:用雲數據庫的示例去建立新的字段添加到數據庫之中

6：測試一下，好了，小程序端獲取的豆瓣API數據存入雲數據庫裏面了。

附上：

主要思路：
1：經過調用小程序的掃碼的api
2：調用雲函數獲取到圖書的信息，並將圖書信息傳遞到小程序
3：在小程序中 調用雲數據庫來添加


可能會有不少人有問，爲啥不直接在雲函數中完成添加？會更加簡單方便啊，暫時留個懸念啊啊哈。


複製代碼

####小程序雲開發實戰六：雲數據庫讀取的數據顯示在小程序端列表裏

讀取數據在以前也有詳細的寫過案例了，如今用在項目裏面，很容易就能理解了。

參考的讀取api,請點擊：developers.weixin.qq.com/miniprogram…

1：初始化 實例和book方法

//雲數據庫初始化
    const db = wx.cloud.database({});
    const book = db.collection('books')
複製代碼

2：複製API這段代碼獲取多個記錄的數據的方法，放在項目到onload方法之中 

const db = wx.cloud.database({});
const cont = db.collection('books');
Page({
  data: {},
  onLoad: function(options) {
    db.collection('books').get({
      success(res) {
        console.log(res.data)
      }
    })
  },

})

複製代碼

3：打印在控制檯

4:拿到res.data以後，要賦值給page實例裏面的data 因此在data裏面設置一個默認的空數組

5：建立一個變量來保存頁面page示例中的this,方便後續使用 也可使用箭頭函數 來打印一下this,看是否是page示例

const db = wx.cloud.database({});
const cont = db.collection('books');
Page({
  data: {
    book_list:[]
  },
  onLoad: function(options) {
   // 建立一個變量來保存頁面page示例中的this, 方便後續使用
    var _this=this;
    db.collection('books').get({
      success: res =>{
         console.log(res.data);
         console.log(this);
      } 
    })
  },
})
複製代碼

6:直接使用this來設置data

7：顯示和佈局： 使用組件庫引入，能夠省略本身寫不少代碼的樣式，簡單方便，固然也能夠本身寫。youzan.github.io/vant-weapp/…

由於數據不止一條，循環，因此要用到小程序框架的列表渲染 developers.weixin.qq.com/miniprogram…

寫好以後 wxml以下：

<text>私家書櫃</text>
<view wx:for="{{book_list}}">
  <van-card num="2" price="2.00" desc="描述信息" title="商品標題" />
</view>
複製代碼

8：先在js裏面打印一條具體的數據，方便渲染的時候寫出item.xxx的內容

9：小程序wxml界面

主要demo wxml:

<view wx:for="{{book_list}}">
  <van-card num="2" 
  price="{{item.price}}" 
  desc="{{item.author}}" 
  title="{{item.title}}"  
  thumb="{{item.image }}" />
</view>
複製代碼

js

const db = wx.cloud.database({});
const cont = db.collection('books');
Page({
  data: {
    book_list:[]
  },
  onLoad: function(options) {
   // 建立一個變量來保存頁面page示例中的this, 方便後續使用
    var _this=this;
    db.collection('books').get({
      success: res =>{
        console.log(res.data[0]);
       
        this.setData({
          book_list:res.data
        })
      } 
    })
  },
})
複製代碼

ok,雲數據庫讀取的數據顯示在小程序端列表裏.

附錄：更多的雲開發參考資料和視頻 一個雲開發的demo：github.com/LWJcoder/qi… 雲開發圖書私房櫃：cloud.tencent.com/developer/e…

####小程序雲開發實戰七：雲開發首頁列表跳轉詳情頁

1：實戰六之中，列表頁已經完成，如今新建一個詳情頁，打開app.json,"pages/details/details",，自動生成了一個詳情頁

2：打開首頁列表頁代碼，綁定詳情按鈕跳轉事件 wxml:

<view wx:for="{{book_list}}">
  <van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}">
    <view slot="footer">
      <van-button size="mini" bind:click="viewitem">詳情按鈕</van-button>
    </view>
  </van-card>
</view>
複製代碼

3:繼續寫js裏面的綁定事件，在控制檯打印一下event，方便後續測試

viewitem: function(event) {
    console.log(event)
  }
複製代碼

4：如何知道要跳轉列表圖書中的哪一個詳情頁？要在雲開發裏面寫一個特定的id，打開雲開發控制檯，數據庫，須要用到這個下劃線是_id的字段

5：給這個字段設置一個值，data-id="{{item._id}}"

圖片.png

點擊按鈕，能夠看到，點擊不一樣的列表，打印的是不一樣的id，經過不一樣的id就能夠看到不一樣的內容了。

6：下面實現點擊詳情按鈕跳轉詳情頁面，看到想要的具體的內容，看完控制檯，由於具體數據是來自於event，currentTarget

因此js裏面聲明一下 

var id = event.currentTarget.dataset.id;
複製代碼

而且寫好跳轉頁面的跳轉方法和url，帶參數跳轉

7：在detail.js的onLoad方法裏面打印接收到的參數

8：測試,列表界面帶參數跳轉成功

分割線======分割線=======分割線=======分割線 ####開始寫詳情頁的一些代碼 1：初始化db的實例 

const db = wx.cloud.database({});
複製代碼

2：打開雲函數文檔裏面的讀取數據apihttps://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html 複製此段讀取數據記錄的代碼，放在onload裏面

onLoad: function (options) {
   // console.log(options)
    db.collection('books').doc(options.id).get({
      success(res) {
        // res.data 包含該記錄的數據
        console.log(res.data)
      }
    })
  },
  
複製代碼

能夠看到，具體數據已經打印過來了

圖片.png

這個時候尚未將數據傳遞到一個具體的頁面實例中

因此，success開始改爲使用箭頭函數

// pages/details/details.js
const db = wx.cloud.database({});
Page({
  /**
   * 頁面的初始數據
   */
  data: {

  },
  onLoad: function (options) {
    //  console.log(options)
    db.collection('books').doc(options.id).get({
      success: res => {
        console.log(res.data)
        this.setData({
          book: res.data
        })
      }
    })
  },
})
複製代碼

ok，進入頁面的時候，能夠看到appdata裏面的book

3:具體展現 在wxml裏面寫上想要拿到的數據，ok，詳情頁面展現的數據

4：效果以下

原文做者：祈澈姑娘 技術博客：www.jianshu.com/u/05f416aef… 90後前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。 堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，對於博客上面有不會的問題，能夠加入qq羣聊來問我：473819131。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程