小程序云开发
云开发与传统开发的区别
? 大多数小程序(纯静态的除外)都需要服务端与客户端进行交互,当然云开发也是能和客户端进行交互的,只不过与客户端交互的对象变成云端。
好处
- 在云函数中,我们可以很方便的获取到用户的
appid 、openId 这些重要的鉴权信息。 - 能在没有后端接口的情况下,使前端能独立的完成小程序的开发! 当然也不需要服务器操作。
那么代价呢?
- 性能相对来说差一点
- 前端工作量增加
准备
- 注册好的小程序开发账号
- 微信开发者工具,尽可能使用新的版本
- 一台能开机的电脑
创建项目
双击打开你的微信开发者工具,选择小程序。选择使用云开发,然后点击确认创建项目。
无法选择云开发解决方法
- 云开发不支持使用测试号,需换成小程序账号
- 你可能注册的是小游戏账号!注:一个微信号只能有一个小程序,企业有5个。
项目创建成功
可以看出来比普通的项目多几个文件。模拟器中可能会存在一些例子,可以参考一下。根据自己的需求进行删除。
资源选型
点击菜单栏下面的云开发按钮,进入云开发控制台。
点击付费配额可以更改配置,一看价格果然很腾讯。好的本篇文章到此结束 欢迎各位的观看。
吐槽归吐槽,企业也是要吃饭发工资的。
数据库
点击上方按钮中的数据,跳转到数据库界面。
左侧的集合你可以当成数据库中的表,右侧是表里的内容。可以进行添加数据操作,可以根据需求删除原有集合。
增删查改
数据库的初始化和引用
// 1. 微信云开发初始化
wx.cloud.init()
// 2. 获取数据库引用
const db = wx.cloud.database()
//需写在page的上方
Page({})
异步使用方法
//增加
addStudent(){
db.collection('students').add({
// data 字段表示需新增的 JSON 数据
data: {
username:'jim',
score:98,
// done代表是否毕业
done: false
}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
或者回调函数使用
//更新数据
updateStudent(){
//doc是你是你要更改数据的_id,可在数据库中查看。 db.collection('students').doc('617ef50c620cc89f0617afa83f464bfa').update({
data:{
score:98
},
success:(res)=>{
console.log(res)
},
fail:(err)=>{
console.log(err)
}
})
}
在wxml 中写调用条件
<button catchtap="addStudent">增加数据</button>
<button bindtap="updateStudent">更新数据 </button>
查询与删除
<button bindtap="getOne">查询数据</button>
<button bindtap="delStudent">删除数据</button>
调用方法
//查
getOne(){
db.collection('students').where({
username:'tom'
}).get().then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
//删除
delStudent(){ db.collection('students').doc('617ef50c620cc89f0617afa83f464bfa').remove().then(res=>{
console.log(res)
})
}
云函数
定义
云函数就是子面意思,即运行在云端的函数。来看官方对它的定义
需安装node.js
需要安装node.js,没有node.js的话,搜索官网下载安装即可。
查询是否安装成功:win+R 输入cmd,然后输入以下代码。就会出现你安装成功的版本号。
node -v
全局初始化云函数
在 app.js 文件的 onLaunch 方法中插入一行代码,用以初始化小程序云函数
wx.cloud.init({
traceUser: true,
})
然后选中cloudfunctions 文件夹,右键新建一个node.js云函数。文件夹里会自动生成三个文件,config.json 、index.js 、package.json 。右键你创建的文件,选中上传并部署:安装云端依赖。
即可在你的云开发控制台中的云函数中查看
云函数操作
云函数的传入参数有两个,一个是 event 对象,一个是 context 对象。event 指的是触发云函数的事件,当小程序端调用云函数时,event 就是小程序端调用云函数时传入的参数。
注意:你刚才修改了云函数里面的代码必须鼠标右键再上传同步到云平台,最后才能正常调用。
例子
本地页面的js 文件
getRes(){
// 调用云函数实现求和功能
wx.cloud.callFunction({
// 云函数名称
name: 'getsum',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success: function(res) {
console.log(res.result.sum) // 3
},
fail: function(err){
console.log(err)
}
})
}
本地wxml 文件
<!-- 云函数代码 -->
<button bindtap="getRes">调用云函数实现求和功能</button>
cloudfunctions 文件夹里你创建的getnum 文件夹里的index.js文件
// 云函数入口函数
exports.main = async (event, context) => {
return {
sum:event.a+event.b
}
}
注意:你刚才修改了云函数里面的代码必须鼠标右键再上传同步到云平台,最后才能正常调用。
云存储
云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。
在小程序端可以分别调用 wx.cloud.uploadFile 和wx.cloud.downloadFile 完成上传和下载云文件操作.
例子
wxml页面中
<button bindtap="upload">上传文件</button>
test.js中定义upload函数,调用微信的上传图片的接口,把图片上传到云存储。
// 上传文件
upload(){
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
wx.cloud.uploadFile({
cloudPath: 'example.png', // 上传至云端的路径
filePath: tempFilePaths[0], // 小程序临时文件路径 因为是数组 我们示例上传一个 所以取值为索引0
success: res => {
// 返回文件 ID
console.log(res.fileID)
},
fail: console.error
})
}
})
}
上传后可在云开发控制台查看你上传的图片。
把路径保存在数据库或者集合中的代码
upload(){
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
wx.cloud.uploadFile({
cloudPath: new Date().getTime()+'.png', // 上传至云端的路径
filePath: tempFilePaths[0], // 小程序临时文件路径 因为是数组 我们示例上传一个 所以取值为索引0
success: res => {
// 返回文件 ID
console.log(res.fileID)
db.collection('students').add({
// data 字段表示需新增的 JSON 数据
data: {
username:'jack',
score:66,
imageUrl:res.fileID,
// done代表是否毕业
done: false
}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
fail: console.error
})
}
})
}
|