bl侵犯小男生(h),深夜视频,篮球队的公共小0次成长总结

前言：

在學習云開發的時候將自己的學習過程記錄下來了，放在了網上，收獲了一波好評，接下里就繼續和大家分享小程序云開發的一些經驗，如果有不足的地方，歡迎大家提出糾正哦。

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

image

接觸到云函數已經有一段時間了，之前一直在看api，現在自己跟著網絡上的資料和視頻學習，做了一個小項目，類似于豆瓣讀書系列。具體是這樣的一個流程，后面會一步步的實現。

小程序掃碼實現讀取isbn，獲取圖書的各種信息

1：用戶端小程序調用 wx.scanCode接口,獲取到ISBN碼 2：使用ISBN碼調用云函數，在請求云函數的時候，云函數會請求豆瓣的API，獲取豆瓣圖書信息。 3：圖書信息請求到之后，會將其中無用的信息返回給小程序中，小程序中再拿出獲取到的信息，創建圖書條目 4：將對應的數據直接存儲到云開大的數據庫里面

之前用過微信掃一掃功能，調用二維碼，掃描自己生成的二維碼，并將二維碼的內容顯示在界面的兩個例子：

微信小程序掃一掃的功能實現：http://www.lxweimin.com/p/e00b44293fe0 小程序掃碼成功后帶著參數跳轉到指定頁面：http://www.lxweimin.com/p/413c5831ddd6

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

demo的示例:

在下面的示例代碼里面，我是使用了小程序的組件庫的，如果有遇到引入庫的問題的可以查看：小程序動端組件庫Vant Weapp的使用http://www.lxweimin.com/p/10d75a3ca3d0

1：wxml

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

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);
   }
  })
  }

})</pre>

ok，獲取到信息

image

關于參考的視頻資料：可以跟著視頻后面學習一下：https://cloud.tencent.com/developer/edu/learn-100005-1244/3154

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

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

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

image

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

image

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

image

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

依賴安裝成功之后，文件里面多會出現package-lock.json這個文件。

image

5：由于要請求網絡，所以要安裝請求網絡的庫，請求網絡的庫可以使用node.js中的request庫，方便快捷：https://github.com/request/request

在小程序里面要使用的云函數是同步的，所以使用promise，因為使用傳統的callback沒有辦法在控制臺之中返回數據。

image

https://github.com/request/request-promise 安裝方法：通過這兩行命令進行安裝，復制命令

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">npm install --save request
npm install --save request-promise</pre>

image

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

image

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

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

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

云函數API: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/functions/callFunction.html

通過看文檔可以學會，在云函數里，我們可以通過傳遞一份data來獲取這里面的數據，然后再通過event來拿到對應的數據。

image

2：復制這個api里面的方法：

image

圖片.png

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

image

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

image

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

image

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

/**

頁面的初始數據
*/
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);
  }
})

}

})</pre>

5：然后開始寫云函數端代碼

打開bookinfo里面的index.js,將event結果打印出來,請求云函數，將云函數之中的isbn返回回來

image

寫好了

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 云函數入口文件
// 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,
// }
}</pre>

右擊，上傳并且部署云函數

image

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

image

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

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

在網上找了一下，找到了一個可以用的豆瓣API： https://api.douban.com/v2/book/isbn/:9787111128069

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

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

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var res = rp('https://api.douban.com/v2/book/isbn/'+event.isbn).then(html=>{
return html;
}).catch(err=>{
console.log(err)
})</pre>

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

image

圖片.png

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 云函數入口文件
// 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,
// }
}</pre>

4:寫完之后上傳云函數。

image

圖片.png

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

image

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

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> //進一步的處理方法
var bookString=res.result;
console.log(JSON.parse(bookString))</pre>

image

看到了整本圖書上面的所有信息，修改這些信息，存入云數據庫之中即可。

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

之前的文章里面已經詳細寫過像云數據庫里面插入數據的方法，現在用在實際項目里面再寫一遍。

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

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html 2：打開云開發控制臺老規矩，創建一個集合 books

image

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

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> //云數據庫初始化
const db = wx.cloud.database({});
const book = db.collection('books');</pre>

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

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);
  }
})

}

})</pre>

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

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

image

附上：

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">主要思路：
1：通過調用小程序的掃碼的api
2：調用云函數獲取到圖書的信息，并將圖書信息傳遞到小程序
3：在小程序中調用云數據庫來添加

可能會有很多人有問，為啥不直接在云函數中完成添加？會更加簡單方便啊，暫時留個懸念啊啊哈。</pre>

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

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

參考的讀取api,請點擊：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html

1：初始化實例和book方法

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> //云數據庫初始化
const db = wx.cloud.database({});
const book = db.collection('books')</pre>

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

image

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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)
}
})
},

})</pre>

3：打印在控制臺

image

4:拿到res.data之后，要賦值給page實例里面的data 所以在data里面設置一個默認的空數組

image

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

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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);
}
})
},
})</pre>

image

6:直接使用this來設置data

image

7：顯示和布局：使用組件庫引入，可以省略自己寫很多代碼的樣式，簡單方便，當然也可以自己寫。https://youzan.github.io/vant-weapp/#/card

因為數據不止一條，循環，所以要用到小程序框架的列表渲染 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

寫好之后 wxml如下：

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

image

9：小程序wxml界面

主要demo wxml:

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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
    })
  } 
})

},
})</pre>

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

image

附錄：更多的云開發參考資料和視頻一個云開發的demo：https://github.com/LWJcoder/qiupihu 云開發圖書私房柜：https://cloud.tencent.com/developer/edu/learn-100005-1244/3148

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

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

image

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

image

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

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> viewitem: function(event) {
console.log(event)
}</pre>

image

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

image

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

image

圖片.png

點擊按鈕，可以看到，點擊不同的列表，打印的是不同的id，通過不同的id就可以看到不同的內容了。

image

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

image

所以js里面聲明一下

image

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

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

image

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

image

分割線======分割線=======分割線=======分割線

開始寫詳情頁的一些代碼

1：初始化db的實例

image

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

image

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> onLoad: function (options) {
// console.log(options)
db.collection('books').doc(options.id).get({
success(res) {
// res.data 包含該記錄的數據
console.log(res.data)
}
})
},</pre>

可以看到，具體數據已經打印過來了

image

圖片.png

這個時候還沒有將數據傳遞到一個具體的頁面實例中

image

所以，success開始改成使用箭頭函數

<pre class="prism-token token language-javascript" style="box-sizing: border-box; list-style: inherit; margin: 24px 0px; font: 400 14px/1.45 Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border-radius: 3px; overflow-wrap: normal; text-align: left; white-space: pre; word-spacing: 0px; word-break: normal; tab-size: 2; hyphens: none; color: rgb(51, 51, 51); letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 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
})
}
})
},
})</pre>

ok，進入頁面的時候，可以看到appdata里面的book

image

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

image

4：效果如下

image

原文作者：祈澈姑娘技術博客：http://www.lxweimin.com/u/05f416aefbe1 90后前端妹子，愛編程，愛運營，愛折騰。堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，對于博客上面有不會的問題，可以加入qq群聊來問我：473819131。

小程序云開發入門實戰課程總結：

小程序云開發實戰一：小程序掃一掃獲取到圖書ISBN碼（圖書條形碼）小程序云開發實戰二：小程序云開發云函數安裝依賴步驟小程序云開發實戰三：編寫云函數代碼小程序云開發實戰四：調用豆瓣API獲取具體的數據小程序云開發實戰五：如何將獲取到的API數據存入云數據庫里面小程序云開發實戰六：云數據庫讀取的數據顯示在小程序端列表里小程序云開發實戰七：云開發首頁列表跳轉詳情頁

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

一步一步學會小程序云開發極簡教程

一步一步學會小程序云開發極簡教程

前言：

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

demo的示例:

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

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

5：然后開始寫云函數端代碼

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

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

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

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

開始寫詳情頁的一些代碼

小程序云開發入門實戰課程總結：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

一步一步學會小程序云開發極簡教程

前言：

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

demo的示例:

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

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

5：然后開始寫云函數端代碼

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

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

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

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

開始寫詳情頁的一些代碼

小程序云開發入門實戰課程總結：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频