小程序云开发全套实战教程（最全）

时间  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教程