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

目录
  • 前言
  • 一、HTTP API 方式
    • 1、web端调用云函数
  • 二、Web SDK 在 Web 中使用
    • 1.Web SDK 在 Web 中使用,可以访问云开发资源,既支持公众号登录态、也支持未登录模式。
    • 2、使用腾讯云里的方法
  • 总结

前言

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

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

一、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端访问小程序云数据库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序云开发实现云数据库读写权限

    一.问题场景 在做图片点赞.查看量的时候,非管理员给非自己上传(创建)的图片点赞,更新数据失败,失败原因是没有修改数据权限 二.问题描述 云数据库中的读写权限是有严格规定的 非管理员非创建者,没办法写入数据(更新数据) 三.详细解决办法 使用云函数更新数据 刚开始还是不怎么了解云函数,只用自动生成的login 来获取openid,并不知道其他用法,看了好久才明白 1.在开发者工具上新建node.js云函数 2.上代码 这是云函数index.js 内容 // 云函数入口文件 const cloud

  • 微信小程序云开发之使用云数据库

    在上一节我们介绍了下怎么使用云存储来存储我们需要的数据,接下来这节也是我们在实际开发比较重要的东西数据库,首先数据库当然是我们要显示在前端界面上的内容,如果要使用云存储+云数据库该如何操作呢,下面我来详细为大家介绍下具体流程 [步骤] 首先我们打开云开发然后点击数据库,自己在数据库这里新建一个集合(我的建的集合叫做videos),如下 tempFileURL是我们在云存储里面保存的数据,然后下面的链接就是我们之前所说的详情里面的下载地址如下所示 我们只需要将我们详情界面中的下载地址copy粘贴到

  • 微信小程序云开发修改云数据库中的数据方法

    小程序代码中无法直接修改他人创建的数据记录 例如:数据库表中的_openid字段是自动生成的,哪个用户创建的记录这个openid就是用户的openid,云数据库的权限分配也是根据openid来进行的. 解决方案: 第一步:创建云函数,在函数中编写修改数据库的操作代码 // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const _ = db.command // 云

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

    目录 前言 一.HTTP API 方式 1.web端调用云函数 二.Web SDK 在 Web 中使用 1.Web SDK 在 Web 中使用,可以访问云开发资源,既支持公众号登录态.也支持未登录模式. 2.使用腾讯云里的方法 总结 前言 我当前的项目是小程序开发,使用的是云开发方式,那么这时涉及到了小程序端提交的数据会保存到云数据库中,可是呢这些个数据要被外部访问用来管理,也就是还得弄一个管理后台界面管理这些数据.那就需要拿到云数据库里面的数据啦,下面就是对如何拿到云数据库里面的数据的访问方式

  • 微信小程序云开发详细教程

    微信小程序云开发之初体验,供大家参考,具体内容如下 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:既可在小程序前端操作,也能在云函数中读写的 JSON 数据库,免费2G容量 存储:可在小程序前端上传/下载云端文件,在云开发控制台可视化管理,免费5G容量 上手体验 打开微信开发者工具,新建

  • 我要点爆”微信小程序云开发之项目建立与我的页面功能实现

    开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 新建后,微信端为我们提供了一个参考的模板程序,这里我们自己来创建各个所需的文件与代码,所以删除所有不需要的文件,删除cloudfunctions.miniprogram/images.miniprogram/pages文件下所有文件,同时也删除style文件和删除app.json中原始的页面配置. 此时编译下方控制台会报"VM8100:5 appJSON[&qu

  • 微信小程序云函数添加数据到数据库的方法

    1.新建小程序,建立云开发快速启动模板 这里和普通小程序的区别有三点 一是 project.config.json写上云函数所在目录"cloudfunctionRoot": "cloudfunctions/", 二是app.json写上"cloud":true 三是 app.js 添加,用于记录访问用户 onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础

  • 微信小程序云开发之新手环境配置

    本文实例为大家分享了微信小程序云开发环境配置的具体方法,供大家参考,具体内容如下 注意:小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能. 首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去看看云开发为我们提供的案例. 首次进入控制台会报cloud init error (云初始化错误). 如果我们填写了在微信的左上角调试器旁边有一个云开发,在这里我们点击云开发 点击开通云开发 官网建议我们建两

  • 微信小程序云开发实现数据添加、查询和分页

    本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下 实现的效果 实现要点 WXML 不同类别数据的显示 通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取 先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,

  • 微信小程序云开发实现增删改查功能

    本文实例为大家分享了微信小程序云开发实现增删改查的具体代码,供大家参考,具体内容如下 首先按照微信小程序官方提示创建一个快速云开发小程序 大家可以点击此处下载源代码 实现效果如下: 在miniprogram->index的下修改下面三个文件 index.js如下: Page({ data: { id: '',//修改用来保存_id iSshow: true, inpVal: '', inp2Val: '', inp3Val: '', list: [] }, onLoad: function ()

  • 微信小程序云开发之数据库操作

    本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下 新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { const db = wx.cloud.database() db.collection('users').add({ data: { count: 1 }, success: res => { // 在返回结果中会包含新创建的记录的 _id this.setData({ counterId: r

  • 微信小程序云开发如何使用云函数生成二维码

    本文实例为大家分享了微信小程序云开发使用云函数生成二维码的具体代码,供大家参考,具体内容如下 首先,需要给对应的云函数安装 request-promise 依赖.(不会给云函数安装依赖的盆友请移步 微信小程序中的云开发如何使用npm安装依赖) 生成二维码的云函数如下: // 云函数入口文件 const cloud = require('wx-server-sdk') const rp = require('request-promise') cloud.init() // 云函数入口函数 exp

随机推荐