外部web端访问微信小程序云数据库的三种方法总结

 更新时间:2022年04月25日 09:39:41   作者:菜小黑  
最近在研究微信小程序的云开发功能,下面这篇文章主要给大家介绍了关于外部web端访问微信小程序云数据库的三种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

我当前的项目是小程序开发,使用的是云开发方式,那么这时涉及到了小程序端提交的数据会保存到云数据库中,可是呢这些个数据要被外部访问用来管理,也就是还得弄一个管理后台界面管理这些数据。那就需要拿到云数据库里面的数据啦,下面就是对如何拿到云数据库里面的数据的访问方式的描述

看到评论表示看不懂,不知道具体怎么用,决定再做补充
注意:下面的三种方法中第一、第三种方法会存在跨域问题,没有具体实现,当是我在开发的时候是用配置代理的方式,但是线上环境是没有办法设置代理的,
所以我选择了第二种方式,
重点补充第二点的具体用法

一、HTTP API 方式

微信小程序文档中的云开发部分有特别说明了,HTTP API的调用方式,这里贴上链接HTTP API

下面来看看具体是怎么使用的

1、web端调用云函数

微信开放文档中说明了,web端调用云函数的方式:

文档说明了,如果要触发云函数就要调用上面红色框住的链接。但是有一点,需要拿到access_token的值

获取access_token的值:

微信开放文档原链接

以上就是获取凭证的调用链接。

具体到代码里的使用:

在代码里直接按平时我们请求接口的方式调用,

下面来看看打印结果:

可以看到这里报错了,这个跨域的问题。

尝试了一种解决方案,代理

在配置文件里加上代理。

最后请求获取access_token会变成这样

原来的域名换成了api代替。

看看打印结果:

已经拿到了access_token

现在可以用这个获取到的accesss_token来调云函数了。

这种方式因为是访问链接的方式,会存在跨域访问的问题,如果项目上线了要做跨域处理。

注意:不管是post方式还是get方式,都不能把链接后带的参数提出来,只能拼接在后面哦,如果是要传自己的参数就可以用对象方式传。不然访问时会得不到想要的结果

二、Web SDK 在 Web 中使用

1.Web SDK 在 Web 中使用,可以访问云开发资源,既支持公众号登录态、也支持未登录模式。

补充:这里我用红色标注了,要特别注意

要在外部访问云开发资源,除了公众号支持登录态,其他地方访问是不支持登录态访问的,得用未登录态模式(这里涉及到安全规则)

这里粘上链接未登录模式下访问云开发资源

那安全规则怎么设置?

这里贴上步骤

1、打开开发中工具 》 云开发 》这时会打开云开发控制台。

设置好未登录态后,具体怎么访问步骤

访问链接:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/web/sdk.html

可以看到 微信描述的怎么访问,

1、找到底部cdn地址,下载拷贝下来。

2、将拷贝下来的cdn文件放到项目中,在项目入口文件中引入,作为公共使用。

import "../../common/cloud/cloud.js";

这时window对象下面会挂载一个cloud对象, 我在我的项目中初始化cloud对象,在app.vue文件中写入下面方法,并调用,我在created方法中调用下面的fun方法,并将已授权对象保存为公用对象store中。

 async function fun() {
// 声明新的 cloud 实例
 var c1 =  new cloud.Cloud({
// 必填,表示是未登录模式
 identityless: true,
// 资源方 AppID
 resourceAppid: '小程序appid',
// 资源方环境 ID
    resourceEnv: '云开发环境id',
 })
await c1.init(
{
appid: '小程序appid',
env: '云开发环境id'
}
)
this.$store.commit('initCloud', c1 || '');
}

3、如何调用这个对象呢?

当项目中某个页面需要拿数据库的数据。调用保存的cloud对象中的callFunction方法,该方法可以调用我们自己在小程序中定义的云函数,至于这个云函数要怎么写,怎么定义就要自己去看小程序开发档中云开发的知识了。这里只讲怎么从外部访问小程序云数据库。

// 调用云函数编辑
let $this = this;
this.$store.state.cloud.callFunction({
name: 'addPartyMember',
data: params,
success: res => {
// res 就是重云函数中拿到的数据,这里里面含有云函数处理云数据库的结果
	let result = res.result.dbresult;
	if (result.stats) {
		$this.$message({
			type: 'success',
			message: '操作成功'
		})
	}
},
fail: err => {
	$this.$message.error('失败')
}
})

注意这种未登录模式下好像不能直接访问云数据库,只能通过访问云函数间接操作数据库

补充结束,这是我在项目中的具体实现,如果有更好方法一起交流哦!!!

2、使用腾讯云里的方法

这里直接粘上链接web使用 JavaScript 访问 Cloudbase 服务和资源。 文档很清楚

总结

到此这篇关于外部web端访问微信小程序云数据库的三种方法的文章就介绍到这了,更多相关外部web端访问小程序云数据库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 权威JavaScript 中的内存泄露模式

    权威JavaScript 中的内存泄露模式

    权威JavaScript 中的内存泄露模式...
    2007-08-08
  • IE浏览器下PNG相关功能

    IE浏览器下PNG相关功能

    本文给大家汇总了一下png在IE浏览器下出现的各种问题的解决方法,十分的实用,有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript禁用右键单击优缺点分析

    JavaScript禁用右键单击优缺点分析

    在本篇文章里小编给大家分享了关于JavaScript禁用右键单击优缺点分析,有需要的朋友们学习下。
    2019-01-01
  • 微信小程序图片上传功能的实现方法

    微信小程序图片上传功能的实现方法

    在编写小程序的项目过程中,难免会有需要上传图片,下面这篇文章主要给大家介绍了关于微信小程序图片上传功能的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • JavaScript 最佳实践:帮你提升代码质量

    JavaScript 最佳实践:帮你提升代码质量

    在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧
    2016-12-12
  • Typescript协变与逆变简单理解

    Typescript协变与逆变简单理解

    深入学习TypeScript类型系统的话,逆变、协变、双向协变、不变是绕不过去的概念。这些概念看起来挺高大上的,其实并不复杂,这篇文章我们就来学习下协变和逆变吧
    2022-10-10
  • JavaScript获取图片像素颜色并转换为box-shadow显示

    JavaScript获取图片像素颜色并转换为box-shadow显示

    这篇文章主要介绍了JavaScript获取图片像素颜色并转换为box-shadow显示的方法,用到了HTML5中的FileReader API和getImageData,转换为的CSS3 box-shadow也要注意浏览器的兼容问题,需要的朋友可以参考下
    2016-03-03
  • Javascript 计算字符串在localStorage中所占字节数

    Javascript 计算字符串在localStorage中所占字节数

    本文给大家分享的是使用Javascript 计算字符串在localStorage中所占字节数,分别对UTF-8和UTF-16两种编码进行了详细说明,有需要的小伙伴可以参考下。
    2015-10-10
  • JavaScript 评测代码运行速度的案例代码

    JavaScript 评测代码运行速度的案例代码

    在 JavaScript 中,可以使用 performance.now() API 来评测代码的运行速度。该 API 返回当前页面的高精度时间戳,您可以在代码执行前后调用它来计算代码执行所需的时间,这篇文章主要介绍了JavaScript 评测代码运行速度,需要的朋友可以参考下
    2023-02-02
  • 详解基于webpack&gettext的前端多语言方案

    详解基于webpack&gettext的前端多语言方案

    这篇文章主要介绍了详解基于webpack&gettext的前端多语言方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论