微信小程序个人免费云函数和数据库读取json/txt文件方法
*注意:微信小程序云开发已经收费
注意:微信小程序云开发已经收费
注意:微信小程序云开发已经收费
以2021年7月份的微信小程序开发 为例,在新建一个小程序时,勾选上云开发选项
1. 云开发环境的建立
这一步非常简单,点击开发者工具的“云开发”,填写基本信息后就可完成个人开发环境的建立。
主要需要关注的是云环境的名字,查看方式是打开云开发窗口后窗口的菜单栏标题,下文统称这个环境为【env_name】,这个名字在js部分需要用到。
2. 本地工程的云函数部署
勾选了云开发选项的小程序在自动生成原始代码时会有一个cloudfunctions目录,右键后选择一个云环境,因为第一步已经建立了一个云环境,选择第一步生成的那个云环境即可。
如此本地的云函数已经初步构建完成,但尚未部署到云端,因为此时还只有微信官方给的原始云函数代码,下面开始实现一个简单的基于云平台的读取json应用。
3. 将待读取的数据上传到云端数据库
数据库实际上就是一个存储和管理数据的容器,打开云平台,点击数据库,点击左侧的+新建一个集合,右侧即为一个集合的内部,如果数据较少可以手动添加,一般数据量较大,需要在本地计算机处理成微信小程序可以读取的文件进行导入,此处我新建了一个typhoon_meaning的集合,内部有一个_id=currentTyName
的记录,这条记录除了_id
字段外,还有一个Msg
字段,内部存储着139个对象,这些对象就是我的小程序前端需要使用的数据。
请注意:批量导入对于数据格式有要求,并不是绝对正规的json文件,具体规则请参考我的博文:微信小程序使用json文件上传数据至数据库的规则
这一步骤完成后,我们需要的数据实际上已经存在于云端数据库,位于环境:ty-name-yytfjtyphoon,集合typhoon_meaning,记录的
_id
是currentTyName。
4. 本地云函数编写
注意,这一步不是在小程序页面的js上写代码,全程都在云函数cloudfunctions目录内编辑。
在小程序云函数目录上右键新建一个云函数,自由命名,此处我命名为op_tytable。
将新建云函数文件夹内部的index.js文件替换为以下模板代码(请自行修改代码内的相关变量):
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
//初始化云端
cloud.init({
env: '这里需要填写云环境的名称,按照例子此处应该是ty-name-yytfjtyphoon'
})
//获取数据库
const db = cloud.database({
env: '这里需要填写云环境的名称,按照例子此处应该是ty-name-yytfjtyphoon'
});
// 获取数据库中的某个组
const targetDB = db.collection('这里需要填写你的集合名称,按照例子此处应该是typhoon_meaning');
// 操作数据库
try {
// 注意:前端传过来的数据是event
// 这里你可以根据event处理targetDB,获得你希望获得的内容再return
// 但还需要注意异步问题
/**
此处提供一个模板
假设你的集合里有_id=currentTyName、_id=replaceTyName、_id=tfNameRule三条记录
并且三条记录除了_id以外都有一个Msg字段存储着数据
那么这里可以根据type做约定,定好前端欲查询哪个_id记录,就传哪个值
targetDB.doc("currentTyName").get()表示获取集合内_id=currentTyName的那条数据
这是一个异步的请求,所以希望操作结果数据时,必须放在then(res=>{})回调函数内
then里面的res.data就是集合里的那条记录
在返回数据前可以在云端这里进行运算,以减少小程序js端的代码运算负担
*/
if (event.type === "getCurrentTable") {
const promise = targetDB.doc("currentTyName").get()
return promise.then(res => {
// 这里可以对res.data做运算之类的操作再return
return res.data.Msg; // 结果
})
}
if (event.type === "getReplaceTable") {
const promise = targetDB.doc("replaceTyName").get()
return promise.then(res => {
// 这里可以对res.data做运算之类的操作再return
return res.data.Msg; // 结果
})
}
if (event.type === "gettfNameRule") {
const promise = targetDB.doc("tfNameRule").get()
return promise.then(res => {
// 这里可以对res.data做运算之类的操作再return
return res.data.Msg; // 结果
})
}
} catch (e) {
console.error(e)
}
}
该模板代码适用于只读写云端数据库,而不进行跨域的请求情况,对于跨域的数据请求(如请求别人的接口等),在文末也有一个云函数模板。
更多的数据库读写代码,请自行参考小程序官方文档:微信云端数据库的增删改查写法官方文档
5. 云函数的实际部署
这一步很简单,在对应的云函数上右键,选择云端安装module的部署方式,等待上传完毕即可,完毕后对应的云函数会变绿,这是NodeJS的标志。
6. 最后一步:小程序的页面js
- onload钩子函数内初始化云环境,请自行修改代码内的env变量
onLoad: function () {
wx.cloud.init({
env: '这里需要填写云环境的名称,按照例子此处应该是ty-name-yytfjtyphoon'
}); // 初始化云端
},
- 在需要的js部分直接发起云函数请求,注意请求数据库是一个异步的过程,在点击请求到返回数据这段时间内都得不到数据,但js是单线程的,所以遮罩和loading的加载之类逻辑要处理好。
wx.showLoading({
title: '查询数据库',
})
const _this = this; // 存储一下这个作用域的this,方便then里面调用
// 调用云函数操作云端数据库的数据
wx.cloud.callFunction({
name: "op_tytable", // 云函数的名字
// data是传给云函数的event变量,在第四部分的代码里有
data: {
type: "getCurrentTable"
}
}).then(res => {
// 此处_this是外部作用域的this,可以进行_this.setData操作
// res则是响应的数据,可以进行后续操作
console.log(res);
wx.hideLoading();
})
逻辑编辑完毕之后,基本的小程序获取云端数据就实现了,效果如下:
再次提醒,千万要注意请求的异步问题!
至此,使用云函数进行json数据的读写已经解决,下面的文章属于云函数的有趣玩法,感兴趣可以继续看。
7. 进阶——利用云函数进行http请求
云函数除了作为页面js和数据库的中间桥梁外,甚至可以进行不安全的API请求。
我们知道,在小程序页面js上调用wx.request()可以进行安全的https白名单请求(参考链接:wx.request官方文档)
但是对于不安全的http请求,wx.request()将其一刀切掉不允许调用。
我们可以变通的方法在云函数端实现请求:
云函数的新建之类的此处不再赘述,直接上模板代码:
// 云函数入口文件
const cloud = require('wx-server-sdk')
var request = require('request')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
// 请将url换成你的接口
var url = "http://www.nmc.cn/rest/relevant/38"
return new Promise((resolve, reject) => {
request.get(url, (error, response, body) => {
if (error) {
reject()
} else {
try {
// 此处可以操作body变量,在云函数端分担一些运算量,再resolve回去
resolve(body)
} catch (e) {
reject()
}
}
})
})
}
这是一段中央气象台的天气数据API,具体的接口来源可以通过浏览器的调试部分看到:
云函数不仅避免了用户直接将大数据文件放入工程导致的工程量巨大问题,甚至提供了请求外链而无需白名单处理的功能,是对开发者相当友好的。
整个云开发还有很多内容,有兴趣的读者可以看看官网:小程序云开发官网
如有错漏请在评论区指出喔>_<