1. 解决跨域访问问题
新建文件 vue.config.js
// 后端服务器地址
let url = "http://localhost:8888";
module.exports = {
publicPath: "./", // 【必要】静态文件使用相对路径
outputDir: "./dist", //打包后的文件夹名字及路径
devServer: {
// 开发环境跨域情况的代理配置
proxy: {
// 【必要】访问自己搭建的后端服务器
"/api": {
target: url,
changOrigin: true,
ws: true,
secure: false,
pathRewrite: {
"^/api": "/",
},
},
// 【范例】访问百度地图的API
// vue文件中使用方法 this.$http.get("/baiduMapAPI/place/v2/search"
// 最终实际访问的接口为 http://api.map.baidu.com/place/v2/search
// 遇到以/baiduMapAPI开头的接口便使用此代理
"/wxAPI": {
// 实际访问的服务器地址
target: "https://api.weixin.qq.com",
//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端和服务端进行数据的交互就不会有跨域问题
changOrigin: true,
ws: true, // 是否启用websockets
secure: false, // 使用的是http协议则设置为false，https协议则设置为true
// 将接口中的/baiduMapAPI去掉（必要）
pathRewrite: {
"^/wxAPI": "",
},
},
},
},
};
若部署上线，需配置nginx反向代理，可参考下方链接
https://blog.csdn.net/weixin_41192489/article/details/118568253
2. 获取 access_token
// 获取 access_token
async get_access_token() {
let res = await this.$http.get(
"/wxAPI/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的app密钥"
);
let access_token = res.data.access_token;
if (access_token) {
sessionStorage.setItem("access_token", access_token);
return access_token;
} else {
return false;
}
},
此处要将接口中的参数，更换为你的appid和密钥，需登录你的微信小程序后台，参照下图获取：
3. 访问微信云数据库
async login() {
let access_token = sessionStorage.getItem("access_token");
if (!access_token) {
access_token = await this.get_access_token();
}
this.$http({
method: "post",
url: `/wxAPI/tcb/databasequery?access_token=${
access_token}`,
data: {
env: "dos-6g02iqcz92dc63ff",
query: 'db.collection("user").where({No:1}).limit(10).get()',
},
}).then((res) => {
let errcode = res.data.errcode;
// 7200s后access_token会过期，需重新执行
if (errcode === 42001) {
this.login();
}
if (errcode === 0) {
// 获取到微信云数据库中的数据
console.log(res.data.data);
}
});
}
- 需使用 post 方法
- headers 中不能有
"Content-Type":"application/x-www-form-urlencoded";
需注释掉 src\axios.js 中的
// axios.defaults.headers.post["Content-Type"] =
// "application/x-www-form-urlencoded";
- 参数为
env: "你的微信云环境id",
query: 'db.collection("user").where({No:1}).limit(10).get()',
微信云环境 id 在微信开发者工具中的云开发控制台中参照下图一键复制
query 的内容为微信云数据库的查询语句（语法参考云数据库的开发文档）
- access_token 默认 7200s 后会过期，过期后需重新获取。
常用数据库操作语句
对数据库操作代码进行封装，新建文件 src\utils\wxdb.js
import axios from "axios";
import "../axios.js";
// 微信云开发环境的id
const env = "你的微信云开发环境的id";
// 获取 access_token
export const get_access_token = async function () {
let res = await axios.get(
"/wxAPI/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的app密钥"
);
let access_token = res.data.access_token;
if (access_token) {
sessionStorage.setItem("access_token", access_token);
return access_token;
} else {
return false;
}
};
查询数据
// 微信云数据库_查询
export const get_data_wx = async function (query) {
let access_token = sessionStorage.getItem("access_token");
if (!access_token) {
access_token = await get_access_token();
}
return await axios({
method: "post",
url: `/wxAPI/tcb/databasequery?access_token=${
access_token}`,
data: {
env: env,
query: query,
},
});
};
传入的 query 范例：
- 单条件 – 等于
'db.collection("user").where({No:1}).limit(10).get()'
查询 user 数据库中，No为1的数据。
- 多条件 – 或
`db.collection("user").where(db.command.or([{account:"${
value}"},{No:${
value}}])).get()`
查询 user 数据库中，account 或 No 与 value 值相同的数据。
新增数据
// 微信云数据库_新增
export const add_data_wx = async function (query) {
let access_token = sessionStorage.getItem("access_token");
if (!access_token) {
access_token = await get_access_token();
}
return await axios({
method: "post",
url: `/wxAPI/tcb/databaseadd?access_token=${
access_token}`,
data: {
env: env,
query: query,
},
});
};
传入的 query 范例
`db.collection("user").add({data: {account:"${
this.formData.account}",password:"${
this.formData.password}"}})`