小程序云开发初体验

时间 2019-11-22

标签程序开发体验繁體版

原文原文链接

云开发

开发者可使用云开发开发微信小程序、小游戏，无需搭建服务器，便可使用云端能力。node

云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，便可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。数据库

相似于Bmob后端云或知晓云npm

云开发的出现，让小程序的开发变得更简单方便，开发人员能够不用去购买搭建服务器，不用操心服务端的稳定性和数据库的安装json

开通云开发

在微信开发工具里，直接点击'云开发'，会引导你开通，须要注意的是云开发能力从基础库 2.2.3 开始支持小程序

云开发开通后自动得到一套云开发环境，各个环境相互隔离，每一个环境都包含独立的数据库实例、存储空间、云函数配置等资源。每一个环境都有惟一的环境 ID 标识，初始建立的环境自动成为默认环境。后端

有一个免费的基础版微信小程序

开通云开发后初始默承认拥有最多两个环境。在实际开发中，建议每个正式环境都搭配一个测试环境api

数据库

云开发提供了一个json数据库(能够理解为MongoDB 这类 NoSQL 数据库)，就是一个json格式的对象。一个数据库有多个集合，至关于关系型数据库的表。集合数组里有多个对象，每个对象就是一个记录，至关于关系型数据库中的行。数据库的操做提供了不少API，后面结合例子简单示例说明数组

[
    {
      "id": 342166,
      "haspromotionTag": false,
      "img": "http://p1.meituan.net/128.180/movie/740bd990e4af29d537ce324ec2cd08d6300433.jpg",
      "version": "v2d imax",
      "nm": "无双",
      "preShow": false,
      "sc": 8.9,
      "globalReleased": true,
      "wish": 125425,
      "star": "周润发,郭富城,张静初",
      "rt": "2018-09-30",
      "showInfo": "今天183家影院放映2258场",
      "showst": 3,
      "wishst": 0
    },
    {
      "id": 1209159,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/128.180/movie/4d9bedd239f41eaf08cd1c4297e4ec7d858156.jpg",
      "version": "",
      "nm": "找到你",
      "preShow": false,
      "sc": 9,
      "globalReleased": true,
      "wish": 66559,
      "star": "姚晨,马伊琍,袁文康",
      "rt": "2018-10-05",
      "showInfo": "今天182家影院放映1039场",
      "showst": 3,
      "wishst": 0
    }
]
复制代码

存储

基础版提供了5G的存储容量，能够把文件(图片、视频...)上传到存储空间，在云端管理。直接使用小程序提供的上传下载接口，处理起来很是方便。bash

云函数

云函数是写后端代码的，云函数里能够操做数据库，操做存储，根据自身的业务需求完成后端代码的实现。云函数，是部署在云端的，可是咱们能够在开发工具里编写后端的云函数，完成后再部署到云端，能够说全部逻辑都在一套代码里。

个人第一个云开发小程序

建立云开发项目时，据官方描述，在微信开发工具里，有一个QuickStart选项，但我发现并无，多是开发工具版本或其余缘由。

给数据库添加数据

我在猫眼电影拷贝了部分数据，准备倒入小程序云开发的数据库

能够看到，在控制台，能够自行添加数据，也能够直接倒入一个json文件。我这里选择调用它的API去倒入猫眼json数据

首先我建立了一个名为movies的集合，紧接着调用初始化的方法

app.js

...
onLaunch: function () {
    wx.cloud.init()
}
...
复制代码

要操做数据库，须要先获取到数据库引用, 同时，获取到我刚建立的movies集合的引用, 因为在其余页面也须要调用，我这里把它们都挂到app的属性上

const app = getApp()
...
app.$db = wx.cloud.database()
app.$collect_movies = app.$db.collection('movies')
...
复制代码

最后，调用添加的方法

data.subjects.forEach(o => {
  app.$collect_movies.add({
    data: o
  })
})
复制代码

如今云开发控制台数据库里已经有添加的数据了

显示全部电影

app.$collect_movies.where({
  _openid: 'ofgUd0Rb4w8E7Af40N46ExxozS5g'
}).get({
  success: function (res) {
    console.log('res', res)
    that.setData({
      movies: res.data
    })
  }
})
复制代码

根据ID查询指定电影

app.$collect_movies.doc('W8Wf4t2AWotkhlzK').get({
    success: function (res) {
      console.log('res',res)
      that.setData({
        movie: res.data
      })
    }
})
复制代码

查询9分以上的电影

const _ = app.$db.command
app.$collect_movies.where({
    sc: _.gte(9)
}).get({
    success: function (res) {
      wx.hideLoading()
      that.setData({
        movies: res.data
      })
    }
})
复制代码

获取9分以上或0分的电影

const _ = app.$db.command
app.$collect_movies.where({
    sc: _.eq(0).or(_.gte(9))
}).get({
    success: function (res) {
      wx.hideLoading()
      that.setData({
        movies: res.data
      })
    }
})
复制代码

修改主演名

# 确认修改
const that = this
app.$collect_movies.doc(this.currentMovieId).update({
  data: {
    star: this.data.actor
  },
  success: function (res) {
    that.initUpdateData()
  }
})
复制代码

删除一部电影

# 肯定删除
delAction(e) {
    const that = this
    const id = e.currentTarget.dataset.id
    app.$collect_movies.doc(id).remove({
      success: function (res) {
        that.initUpdateData()
      }
    })
}
复制代码

文件管理

上传图片到云存储

试着把手机相册的图片上传到小程序云存储中，能够在小程序端直接使用提供的api

wx.cloud.uploadFile({
  cloudPath: 'example.png', // 上传至云端的路径
  filePath: '', // 小程序临时文件路径
  success: res => {
    // 返回文件 ID
    console.log(res.fileID)
  },
  fail: console.error
})
复制代码

若是单纯从代码量来看，比上传到腾讯自家腾讯云还简单，固然比上传到像阿里云、七牛云这样的平台操做更简单。

上传成功以后，返回的不是图片url, 而是文件id。若是要显示图片或者播放视频，这个文件id，小程序的组件image/video也能识别

<image class="movie" mode="widthFix" src="{{ fileId }}" wx:if="{{ fileId }}"> </image>
复制代码

upload() {
    const that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths[0])
        wx.cloud.uploadFile({
          cloudPath: 'test/2.png', // 上传至云端的路径
          filePath: tempFilePaths[0], // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
            that.setData({
              fileId: res.fileID
            })
          },
          fail: console.error
        })
      }
    })
}
复制代码

根据文件id下载文件

downloadFile() {
  wx.cloud.downloadFile({
  fileID: 'cloud://ii-1853ca.6969-ii-1853ca/test/2.png',
  success: res => {
    // 返回临时文件路径
    console.log('tempFilePath', res)
    // cloud://ii-1853ca.6969-ii-1853ca/test/2.png
    this.setData({
      downloadFileResult: res
    })
  },
  fail: err => {
    // handle error
  }
})
复制代码

根据文件id换取临时网络连接

能够根据文件 ID 换取临时文件网络连接，文件连接有有效期为两个小时

const that = this
wx.cloud.getTempFileURL({
    fileList: [this.data.fileId],
    success: res => {
      // https://6969-ii-1853ca-1253918415.tcb.qcloud.la/test/2.png
      that.setData({
        fileList: res.fileList
      })
    },
    fail: err => {
      // handle error
    }
})
复制代码

云函数

怎么玩？

云函数是运行在Node.js环境下的

首先在小程序项目根目录找到配置文件project.config.json文件，加上一个配置, 指定本地已存在的目录做为云函数的本地根目录

"cloudfunctionRoot": "./functions/",
复制代码

指定以后神奇的一幕就是图标会变成 “云目录图标”

子目录都是我经过右键菜单建立一个新的云函数，其中文件名就是云函数名

每建立一个云函数，都会出现弹窗，询问你是否有node环境，肯定后会自动打开终端，安装依赖, 因此每个云函数里面都是这样的：

在index.js中, 默认是这样的

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {

}
复制代码

建立一个相加的云函数

plus/

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
// context 对象包含了此处调用的调用信息和运行状态
// event 指的是触发云函数的事件
exports.main = async (event, context) => {
  return {
    sum: event.a + event.b
  }
}
复制代码

在小程序端调用plus云函数, 参数名一眼就看明白，不用解释

wx.cloud.callFunction({
  name: 'plus',
  data: {
    a: 1,
    b: 2,
  },
  success: function (res) {
    console.log('plus', res.result) // 3
  },
  fail: console.error
})
复制代码

调用后报错，是由于没有把建立的云函数上传部署到云端, 如何部署？看下图

部署成功以后，咱们来到云控制台，发现云函数已经在上面

回到小程序，再次调用云函数，发现已经能够了, 拿到了预期的值3

获取小程序用户信息

云开发的云函数的独特优点在于与微信登陆鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性，由于微信已经完成了这部分鉴权，开发者能够直接使用该 openid。与 openid 一块儿同时注入云函数的还有小程序的 appid

定义云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  return event.userInfo
}
复制代码

调用云函数

wx.cloud.callFunction({
    name: 'userInfo',
    success: function (res) {
      console.log('userInfo', res.result)
        /*
          {
            appId:"wx8dae61dd0ef5c510",
            openId:"ofgUd0Rb4w8E7Af40N46ExxozS5g"
           }
        */
    },
    fail: console.error
})
复制代码

异步云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(event.a + event.b)
    }, 3000)
  })
}
复制代码

在云函数中咱们能够引入第三方依赖来帮助咱们更快的开发。云函数的运行环境是 Node.js，所以咱们可使用 npm 安装第三方依赖。好比除了使用 Node.js 提供的原生 http 接口在云函数中发起网络请求，咱们还可使用一个流行的 Node.js 网络请求库 request 来更便捷的发起网络请求。

注意，如今上传云函数时不会在云端自动安装依赖，须要开发者在本地安装好依赖后一块儿打包上传。

云函数操做数据库

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  // 获取电影集合数据
  return db.collection('movies').get()
}
复制代码

云函数调用其余云函数

定义云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  return await cloud.callFunction({
    name: 'plus',
    data: {
      a: 1,
      b: 2,
    }
  })
}
复制代码

调用云函数

wx.cloud.callFunction({
  name: 'cloudFuncCallColundFunc',
  complete: res => {
    console.log('cloudFuncCallColundFunc', res)
  },
})
复制代码

云函很多天志、测试

能够看到调用的云函数的调用日志

能够直接测试编写好的云函数，传入参数, 点击运行调试按钮便可

云开发初体验总结

云开发大概在8月份公测，9月份发布出来的，如今已经快11月份了，据官方描述，有不少开发人员参与进去，是他们没有预料到的，同时也被提出了不少吐槽点，小程序的云开发也能够说是在试水阶段，有很多坑，后面确定会愈来愈完善。逐渐成熟，会是一个很是不错的解决方案，特别是针对那些初创公司。