####前言：
在學(xué)習(xí)云開(kāi)發(fā)的時(shí)候?qū)⒆约旱膶W(xué)習(xí)過(guò)程記錄下來(lái)了，放在了網(wǎng)上，收獲了一波好評(píng)，今天下午在辦公室沒(méi)有事情，也發(fā)現(xiàn)之前有人在博客里面評(píng)論，你這個(gè)教程還有一半哩，可能是csdn的自動(dòng)搬運(yùn)功能出來(lái)一點(diǎn)小問(wèn)題，沒(méi)有搬運(yùn)成功吧，這里就手動(dòng)復(fù)制粘貼成為一篇了，篇幅比較長(zhǎng)，如果有不足或者不注意寫(xiě)錯(cuò)的地方，歡迎大家提出糾正哦。

####小程序云開(kāi)發(fā)實(shí)戰(zhàn)一：小程序掃一掃獲取到圖書(shū)ISBN碼（圖書(shū)條形碼）

接觸到云函數(shù)已經(jīng)有一段時(shí)間了，之前一直在看api，現(xiàn)在自己跟著網(wǎng)絡(luò)上的資料和視頻學(xué)習(xí)，做了一個(gè)小項(xiàng)目，類(lèi)似于豆瓣讀書(shū)系列。
具體是這樣的一個(gè)流程，后面會(huì)一步步的實(shí)現(xiàn)。

小程序掃碼實(shí)現(xiàn)讀取isbn，獲取圖書(shū)的各種信息
1：用戶(hù)端小程序調(diào)用 wx.scanCode接口,獲取到ISBN碼
2：使用ISBN碼調(diào)用云函數(shù)，在請(qǐng)求云函數(shù)的時(shí)候，云函數(shù)會(huì)請(qǐng)求豆瓣的API，獲取豆瓣圖書(shū)信息。
3：圖書(shū)信息請(qǐng)求到之后，會(huì)將其中無(wú)用的信息返回給小程序中，小程序中再拿出獲取到的信息，創(chuàng)建圖書(shū)條目
4：將對(duì)應(yīng)的數(shù)據(jù)直接存儲(chǔ)到云開(kāi)大的數(shù)據(jù)庫(kù)里面

之前用過(guò)微信掃一掃功能，調(diào)用二維碼，掃描自己生成的二維碼，并將二維碼的內(nèi)容顯示在界面的兩個(gè)例子：

微信小程序掃一掃的功能實(shí)現(xiàn)：https://www.jianshu.com/p/e00b44293fe0
小程序掃碼成功后帶著參數(shù)跳轉(zhuǎn)到指定頁(yè)面：https://www.jianshu.com/p/413c5831ddd6

現(xiàn)在是用戶(hù)端小程序調(diào)用 wx.scanCode接口,獲取到圖書(shū)ISBN碼（圖書(shū)條形碼），在辦公室找了一圈，找到了一本圖書(shū)ISBN碼，可以自動(dòng)忽略我這渣渣的像素。

####demo的示例:

在下面的示例代碼里面，我是使用了小程序的組件庫(kù)的，如果有遇到引入庫(kù)的問(wèn)題的可以查看：小程序動(dòng)端組件庫(kù)Vant Weapp的使用https://www.jianshu.com/p/10d75a3ca3d0

1：wxml

<van-button type="primary" bind:click="scanCode">掃碼加書(shū)</van-button>

2:json

{
 "usingComponents": {
  "van-button": "../../vant/button/index"
}
}

3:js（page自動(dòng)生成默認(rèn)的各個(gè)函數(shù)，可以自己手動(dòng)刪除）

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

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
   
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  alt="" />
 
關(guān)于參考的視頻資料：可以跟著視頻后面學(xué)習(xí)一下：https://cloud.tencent.com/developer/edu/learn-100005-1244/3154
 
####小程序云開(kāi)發(fā)實(shí)戰(zhàn)二：小程序云開(kāi)發(fā)云函數(shù)安裝依賴(lài)步驟
 
1：安裝nodejs,準(zhǔn)備好環(huán)境，這一步就不細(xì)說(shuō)了，沒(méi)有安裝的可以自行百度，不知道有沒(méi)有安裝的可以輸入 node -v 查看一下。
 
2：新建一個(gè)云函數(shù)模板，在cloudfunctions目錄底下，新建一個(gè)云函數(shù)的文件bookinfo。
 
 
3：在新建文件上右擊文件，選擇在終端打開(kāi)。
 
 
這個(gè)時(shí)候會(huì)彈出一個(gè)cmd窗口。
 
 
4：在cmd 打開(kāi)云函數(shù)目錄中，安裝依賴(lài)。
 輸入命令：
 
npm install --production
 
依賴(lài)安裝成功之后，文件里面多會(huì)出現(xiàn)package-lock.json這個(gè)文件。
 
 
5：由于要請(qǐng)求網(wǎng)絡(luò)，所以要安裝請(qǐng)求網(wǎng)絡(luò)的庫(kù)，請(qǐng)求網(wǎng)絡(luò)的庫(kù)可以使用node.js中的request庫(kù)，方便快捷：https://github.com/request/request
 
在小程序里面要使用的云函數(shù)是同步的，所以使用promise，因?yàn)槭褂脗鹘y(tǒng)的callback沒(méi)有辦法在控制臺(tái)之中返回?cái)?shù)據(jù)。
 

 https://github.com/request/request-promise
 安裝方法：
 通過(guò)這兩行命令進(jìn)行安裝，復(fù)制命令
 
npm install --save request
npm install --save request-promise
 
 

 ok，完成，依賴(lài)已經(jīng)放置在package.json文件之中了
 
 
ok，當(dāng)文件上傳到云端的時(shí)候，就會(huì)自動(dòng)安裝相關(guān)依賴(lài)了。
 
####小程序云開(kāi)發(fā)實(shí)戰(zhàn)三：編寫(xiě)云函數(shù)代碼
 
1：在云函數(shù)之中，拿到小程序端掃一掃獲取到的傳的編碼，該如何傳參？
 
 
 
云函數(shù)API:
 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/functions/callFunction.html
 
 
通過(guò)看文檔可以學(xué)會(huì)，在云函數(shù)里，我們可以通過(guò)傳遞一份data來(lái)獲取這里面的數(shù)據(jù)，然后再通過(guò)event來(lái)拿到對(duì)應(yīng)的數(shù)據(jù)。
 
 
2：復(fù)制這個(gè)api里面的方法：
 
 
打開(kāi)實(shí)戰(zhàn)一里面寫(xiě)的小程序端的掃碼的js界面，把這個(gè)方法放在success里面。
 要調(diào)用的云函數(shù)的名稱(chēng)name：要改成成實(shí)戰(zhàn)二教程里面建立的云函數(shù)bookinfo
 
 
3：繼續(xù)修改我們要傳遞的參數(shù)
 傳遞的參數(shù)是isbn，結(jié)果是掃碼得到的result
 
 
4：將result的結(jié)果打印出來(lái)，ok,用戶(hù)端（小程序端）代碼寫(xiě)好了。
 
 
用戶(hù)端（小程序端）代碼寫(xiě)完了，就這些：
 
// pages/scanCode/scanCode.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {

  },

scanCode: function(event) {
    console.log(1)
    // 允許從相機(jī)和相冊(cè)掃碼
    wx.scanCode({
      alt="" />
 
寫(xiě)好了
 
// 云函數(shù)入口文件
// const cloud = require('wx-server-sdk')
// cloud.init()



// 云函數(shù)入口函數(shù)

//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,
  // }
}
 
右擊，上傳并且部署云函數(shù)
 
 
測(cè)試一下，云函數(shù)調(diào)用成功,返回的結(jié)果(控制臺(tái)打印)是isbn。
 
 
好的，云函數(shù)代碼編寫(xiě)已經(jīng)完成。
 接下來(lái)就是實(shí)戰(zhàn)四，調(diào)用豆瓣的API,實(shí)現(xiàn)具體的數(shù)據(jù)。
 
####小程序云開(kāi)發(fā)實(shí)戰(zhàn)四：調(diào)用豆瓣API獲取具體的數(shù)據(jù)
 
 
 
在網(wǎng)上找了一下，找到了一個(gè)可以用的豆瓣API：
 https://api.douban.com/v2/book/isbn/:9787111128069
 
 
1：打開(kāi)云函數(shù)文件夾，index.js里面編寫(xiě)代碼，引用request promise。
 
var rp = require('request-promise')
 
2：自定義的isbn，使用一個(gè)+號(hào)來(lái)連接，在傳遞一個(gè)catch來(lái)處理錯(cuò)誤情況。
 
var res = rp('https://api.douban.com/v2/book/isbn/'+event.isbn).then(html=>{
return html;
}).catch(err=>{
console.log(err)
})
 
3:return resres就是對(duì)應(yīng)的html,將html傳給用戶(hù)端。
 
 
// 云函數(shù)入口文件
// const cloud = require('wx-server-sdk')
// cloud.init()

// 云函數(shù)入口函數(shù)
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:寫(xiě)完之后上傳云函數(shù)。
 
 
 
好了，繼續(xù)測(cè)試一下，拿到這個(gè)條形碼的信息了（書(shū)本的信息）。
 
 
 
5：對(duì)于這些信息，進(jìn)一步處理，拿到自己想要的信息:，打開(kāi)小程序端scanCode.js。
 
  //進(jìn)一步的處理方法
        var bookString=res.result;
        console.log(JSON.parse(bookString))
 
 
看到了整本圖書(shū)上面的所有信息，修改這些信息，存入云數(shù)據(jù)庫(kù)之中即可。
 
####小程序云開(kāi)發(fā)實(shí)戰(zhàn)五：如何將獲取到的API數(shù)據(jù)存入云數(shù)據(jù)庫(kù)里面
 
之前的文章里面已經(jīng)詳細(xì)寫(xiě)過(guò)像云數(shù)據(jù)庫(kù)里面插入數(shù)據(jù)的方法，現(xiàn)在用在實(shí)際項(xiàng)目里面再寫(xiě)一遍。
 
1：使用數(shù)據(jù)庫(kù)的時(shí)候，首先要進(jìn)行初始化
 云開(kāi)發(fā)數(shù)據(jù)庫(kù)文檔：
 
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html
 2：打開(kāi)云開(kāi)發(fā)控制臺(tái)
 老規(guī)矩，創(chuàng)建一個(gè)集合
 books
 
 
3：打開(kāi)小程序端js,
 初始化數(shù)據(jù)庫(kù)
 
 //云數(shù)據(jù)庫(kù)初始化
         const db = wx.cloud.database({});
         const book = db.collection('books');
 
4：添加數(shù)據(jù)（插入數(shù)據(jù)）
 js代碼流程
 
// pages/scanCode/scanCode.js
Page({
  data: {
  },

  scanCode: function (event) {
    console.log(1)
    // 允許從相機(jī)和相冊(cè)掃碼
    wx.scanCode({
      alt="" />
 
 
附上：
 
主要思路：
1：通過(guò)調(diào)用小程序的掃碼的api
2：調(diào)用云函數(shù)獲取到圖書(shū)的信息，并將圖書(shū)信息傳遞到小程序
3：在小程序中 調(diào)用云數(shù)據(jù)庫(kù)來(lái)添加


可能會(huì)有很多人有問(wèn)，為啥不直接在云函數(shù)中完成添加？會(huì)更加簡(jiǎn)單方便啊，暫時(shí)留個(gè)懸念啊啊哈。


 
####小程序云開(kāi)發(fā)實(shí)戰(zhàn)六：云數(shù)據(jù)庫(kù)讀取的數(shù)據(jù)顯示在小程序端列表里
 
讀取數(shù)據(jù)在之前也有詳細(xì)的寫(xiě)過(guò)案例了，現(xiàn)在用在項(xiàng)目里面，很容易就能理解了。
 
參考的讀取api,請(qǐng)點(diǎn)擊：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
 
1：初始化
 實(shí)例和book方法
 
  //云數(shù)據(jù)庫(kù)初始化
    const db = wx.cloud.database({});
    const book = db.collection('books')
 
2：復(fù)制API這段代碼獲取多個(gè)記錄的數(shù)據(jù)的方法，放在項(xiàng)目到onload方法之中
 
 
 
const db = wx.cloud.database({});
const cont = db.collection('books');
Page({
  data: {},
  alt="" />
 
4:拿到res.data之后，要賦值給page實(shí)例里面的data
 所以在data里面設(shè)置一個(gè)默認(rèn)的空數(shù)組
 
 
5：創(chuàng)建一個(gè)變量來(lái)保存頁(yè)面page示例中的this,方便后續(xù)使用
 也可以使用箭頭函數(shù)
 來(lái)打印一下this,看是不是page示例
 
const db = wx.cloud.database({});
const cont = db.collection('books');
Page({
  data: {
    book_list:[]
  },
  alt="" />
 
6:直接使用this來(lái)設(shè)置data
 
 
7：顯示和布局：
 使用組件庫(kù)引入，可以省略自己寫(xiě)很多代碼的樣式，簡(jiǎn)單方便，當(dāng)然也可以自己寫(xiě)。https://youzan.github.io/vant-weapp/#/card
 
因?yàn)閿?shù)據(jù)不止一條，循環(huán)，所以要用到小程序框架的列表渲染
 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
 
寫(xiě)好之后
 wxml如下：
 
<text>私家書(shū)柜</text>
<view wx:for="{{book_list}}">
  <van-card num="2" price="2.00" desc="描述信息" title="商品標(biāo)題" />
</view>
 
8：先在js里面打印一條具體的數(shù)據(jù)，方便渲染的時(shí)候?qū)懗鰅tem.xxx的內(nèi)容
 
 
 
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:[]
  },
  alt="" />
 
附錄：更多的云開(kāi)發(fā)參考資料和視頻
 一個(gè)云開(kāi)發(fā)的demo：https://github.com/LWJcoder/qiupihu
 云開(kāi)發(fā)圖書(shū)私房柜：https://cloud.tencent.com/developer/edu/learn-100005-1244/3148
 
####小程序云開(kāi)發(fā)實(shí)戰(zhàn)七：云開(kāi)發(fā)首頁(yè)列表跳轉(zhuǎn)詳情頁(yè)
 
1：實(shí)戰(zhàn)六之中，列表頁(yè)已經(jīng)完成，現(xiàn)在新建一個(gè)詳情頁(yè)，打開(kāi)app.json,"pages/details/details",，自動(dòng)生成了一個(gè)詳情頁(yè)
 
 
2：打開(kāi)首頁(yè)列表頁(yè)代碼，綁定詳情按鈕跳轉(zhuǎn)事件
 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:繼續(xù)寫(xiě)js里面的綁定事件，在控制臺(tái)打印一下event，方便后續(xù)測(cè)試
 
  viewitem: function(event) {
    console.log(event)
  }
 
 
4：如何知道要跳轉(zhuǎn)列表圖書(shū)中的哪個(gè)詳情頁(yè)？要在云開(kāi)發(fā)里面寫(xiě)一個(gè)特定的id，打開(kāi)云開(kāi)發(fā)控制臺(tái)，數(shù)據(jù)庫(kù)，需要用到這個(gè)下劃線(xiàn)是_id的字段
 
 
5：給這個(gè)字段設(shè)置一個(gè)值，data-id="{{item._id}}"
 
 
點(diǎn)擊按鈕，可以看到，點(diǎn)擊不同的列表，打印的是不同的id，通過(guò)不同的id就可以看到不同的內(nèi)容了。
 
 
6：下面實(shí)現(xiàn)點(diǎn)擊詳情按鈕跳轉(zhuǎn)詳情頁(yè)面，看到想要的具體的內(nèi)容，看完控制臺(tái)，因?yàn)榫唧w數(shù)據(jù)是來(lái)自于event，currentTarget
 

 所以js里面聲明一下
 
 var id = event.currentTarget.dataset.id;
 
 
并且寫(xiě)好跳轉(zhuǎn)頁(yè)面的跳轉(zhuǎn)方法和url，帶參數(shù)跳轉(zhuǎn)
 
7：在detail.js的onLoad方法里面打印接收到的參數(shù)
 
 
8：測(cè)試,列表界面帶參數(shù)跳轉(zhuǎn)成功
 
 分割線(xiàn)分割線(xiàn)=分割線(xiàn)=======分割線(xiàn)
 ####開(kāi)始寫(xiě)詳情頁(yè)的一些代碼
 1：初始化db的實(shí)例
 
const db = wx.cloud.database({});
 
 
2：打開(kāi)云函數(shù)文檔里面的讀取數(shù)據(jù)apihttps://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
 復(fù)制此段讀取數(shù)據(jù)記錄的代碼，放在onload里面
 
 
   alt="圖片.png" />
 
這個(gè)時(shí)候還沒(méi)有將數(shù)據(jù)傳遞到一個(gè)具體的頁(yè)面實(shí)例中
 
 
所以，success開(kāi)始改成使用箭頭函數(shù)
 
// pages/details/details.js
const db = wx.cloud.database({});
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {

  },
  alt="" />
 
3:具體展示
 在wxml里面寫(xiě)上想要拿到的數(shù)據(jù)，ok，詳情頁(yè)面展示的數(shù)據(jù)
 
 
4：效果如下
 
 
 
 
原文作者：祈澈姑娘 技術(shù)博客：https://www.jianshu.com/u/05f416aefbe1
 90后前端妹子，愛(ài)編程，愛(ài)運(yùn)營(yíng)，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
 堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題，堅(jiān)持記錄工作中所所思所見(jiàn)，對(duì)于博客上面有不會(huì)的問(wèn)題，可以加入qq群聊來(lái)問(wèn)我：473819131。
 
 
#####小程序云開(kāi)發(fā)入門(mén)實(shí)戰(zhàn)課程總結(jié)：
 小程序云開(kāi)發(fā)實(shí)戰(zhàn)一：小程序掃一掃獲取到圖書(shū)ISBN碼（圖書(shū)條形碼）
 小程序云開(kāi)發(fā)實(shí)戰(zhàn)二：小程序云開(kāi)發(fā)云函數(shù)安裝依賴(lài)步驟
 小程序云開(kāi)發(fā)實(shí)戰(zhàn)三：編寫(xiě)云函數(shù)代碼
 小程序云開(kāi)發(fā)實(shí)戰(zhàn)四：調(diào)用豆瓣API獲取具體的數(shù)據(jù)
 小程序云開(kāi)發(fā)實(shí)戰(zhàn)五：如何將獲取到的API數(shù)據(jù)存入云數(shù)據(jù)庫(kù)里面
 小程序云開(kāi)發(fā)實(shí)戰(zhàn)六：云數(shù)據(jù)庫(kù)讀取的數(shù)據(jù)顯示在小程序端列表里
 小程序云開(kāi)發(fā)實(shí)戰(zhàn)七：云開(kāi)發(fā)首頁(yè)列表跳轉(zhuǎn)詳情頁(yè)
 
github源碼：https://github.com/wangxiaoting666/cloudproject