您当前的位置: 首页 > 解决方案

小程序云开发初体验

  • 作者: admin
  • 发布于 2018-11-14 13:57:27
  • 来源:  
  • 栏目:解决方案

导语: 云开发 开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。 云开

 

云开发

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

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

类似于Bmob后端云知晓云

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

开通云开发

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

19.jpg32.jpg

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

有一个免费的基础版

20.jpg

 

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

数据库

云开发提供了一个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的存储容量,可以把文件(图片、视频...)上传到存储空间,在云端管理。直接使用小程序提供的上传下载接口,处理起来非常方便。

云函数

云函数是写后端代码的,云函数里可以操作数据库,操作存储,根据自身的业务需求完成后端代码的实现。云函数,是部署在云端的,但是我们可以在开发工具里编写后端的云函数,完成后再部署到云端,可以说所有逻辑都在一套代码里。

我的第一个云开发小程序

21.jpg

创建云开发项目时,据官方描述,在微信开发工具里,有一个QuickStart选项,但我发现并没有,可能是开发工具版本或其他原因。

22.jpg

给数据库添加数据

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

 

23.jpg

 

可以看到,在控制台,可以自行添加数据,也可以直接倒入一个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()       }     }) } 复制代码

24.gif

文件管理

上传图片到云存储

试着把手机相册的图片上传到小程序云存储中,可以在小程序端直接使用提供的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         })       }     }) } 复制代码

 


 

25.jpg

26.jpg

根据文件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/", 复制代码

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

27.jpg

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

每创建一个云函数,都会出现弹窗,询问你是否有node环境,确定后会自动打开终端,安装依赖, 所以每一个云函数里面都是这样的:

28.jpg

在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 }) 复制代码

调用后报错,是因为没有把创建的云函数上传部署到云端, 如何部署?看下图

29.jpg

部署成功之后,我们来到云控制台, 发现云函数已经在上面

 

30.jpg

 

回到小程序,再次调用云函数,发现已经可以了, 拿到了预期的值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)   }, }) 复制代码
云函数日志、测试

可以看到调用的云函数的调用日志31.jpg

可以直接测试编写好的云函数,传入参数, 点击运行调试按钮即可

云开发初体验总结

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

 

 



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部