重庆互联网,19年企业互联网解决经验,专业网站开发、移动端开发、微信端开发、小程序开发!
重庆网络推广公司

微信云托管教程(七十):微信小程序-访问云托管服务(一)

作者:重庆互联网小徐 发布时间:2024-01-04 浏览:16735 赞(2414 收藏 评论(0)

微信小程序中操作微信云托管服务,使用小程序基础库中 wx.cloud 方法对象,无需引入额外的SDK。

需要注意,微信小程序基础库版本应该在 2.23.0 及以上,请务必配套在「小程序管理后台」-「设置」-「功能设置」-「基础库最低版本设置」中,将值设定为2.23.0 及以上。

使用优势(对比wx.request)

  1. 不耗费任何公网流量,前后端通信走内网;

  2. 天然免疫DDoS攻击,仅授权小程序/公众号可访问后端,其他人即便拿到环境id和服务名也无法访问;

  3. 通过微信就近接入节点加速,无视后端服务地域影响,没有跨地域延迟,后端无需多地部署;

  4. 无需在小程序后台配置「服务器域名」;

  5. 后端可直接获取用户信息,无需调接口即可以获取opneid等。

因此,如果云托管服务只有微信小程序/公众号会调用,建议在服务设置中关闭公网访问

使用前提

最简单的情况,「小程序」对「直属微信云托管环境」的服务进行访问,也就是登录微信云托管控制台时选择小程序进入的环境。

以上情况我们约定为A小程序,如果你希望另外一个 B小程序/B公众号 也可以访问 A小程序 的云托管环境:

  1. A小程序 和 B小程序/B公众号同主体:需要配置资源复用

  2. A小程序 和 B小程序/B公众号不同主体:推荐使用「微信开放平台-第三方平台」方式。

  3. A小程序和 B小程序/B公众号不同主体:将B小程序/B公众号视为「其他客户端」,通过公网访问。参考文档其他客户端-访问云托管服务。此方式下,B小程序/B公众号无法使用云调用/微信令牌,且需要配置「服务器域名」(使用云托管服务的默认公网域名/自定义域名均可)。

如果你对以上正在支持的能力有任何建议和期待,欢迎在官方交流群联系我们。

基本使用

在小程序中使用如下的代码(取代原有wx.request用法):

// 确认已经在 onLaunch 中调用过 wx.cloud.init 初始化环境(任意环境均可,可以填空)const res = await wx.cloud.callContainer({
  config: {
    env: '填入云环境ID', // 微信云托管的环境ID
  },
  path: '/xxx', // 填入业务自定义路径和参数,根目录,就是 / 
  method: 'POST', // 按照自己的业务开发,选择对应的方法
  header: {
    'X-WX-SERVICE': 'xxx', // xxx中填入服务名称(微信云托管 - 服务管理 - 服务列表 - 服务名称)
    // 其他header参数
  }
  // dataType:'text', // 默认不填是以JSON形式解析返回结果,若不想让SDK自己解析,可以填text
  // 其余参数同 wx.request});console.log(res);

如上使用前,需要在小程序app.js中,执行wx.init,如下代码:

App({
  async onLaunch() {
    // 使用callContainer前一定要init一下,全局执行一次即可
    wx.cloud.init()
    // 下面的请求可以在页面任意一处使用
    const result = await wx.cloud.callContainer({
      config: {
        env: 'prod-01', // 微信云托管的环境ID
      },
      path: '/', // 填入业务自定义路径和参数,根目录,就是 / 
      method: 'GET', // 按照自己的业务开发,选择对应的方法
      header: {
        'X-WX-SERVICE': 'xxx', // xxx中填入服务名称(微信云托管 - 服务管理 - 服务列表 - 服务名称)
      }
      // dataType:'text', // 默认不填是以JSON形式解析返回结果,若不想让SDK自己解析,可以填text
    })
    console.log(result)
  }})

如果资源复用情况下,需要在 wx.cloud.init 中填写环境来源的账号appid,

例如,小程序A(appid:WXAAA)的环境 prod_001 授权给 小程序B(appid:WXBBB),则应是如下:

const c1 = new wx.cloud.Cloud({
  resourceAppid: 'WXAAA', // 环境所属的账号appid
  resourceEnv: 'prod_001', // 微信云托管的环境ID})await c1.init()await c1.callContainer({
  config: {
    env: 'prod_001', // 微信云托管的环境ID
  },
  path: '/xxx', // 填入业务自定义路径和参数,根目录,就是 / 
  method: 'POST', // 按照自己的业务开发,选择对应的方法
  // dataType:'text', // 如果返回的不是json格式,需要添加此项
  header: {
    'X-WX-SERVICE': 'xxx', // xxx中填入服务名称(微信云托管 - 服务管理 - 服务列表 - 服务名称)
    // 其他header参数
  }
  // 其余参数同 wx.request})

如果你想深入了解 callContainer 的原理,建议阅读这篇文章

在这里我们提供了一个万能的封装方法,无论是自己的小程序还是资源复用形态,均可以正常使用。

在小程序app.js中建立一个call方法,并将appid、环境ID、服务名称填入适当的位置

App({
  async onLaunch() {
    // 这里演示如何在app.js中使用,没有用请删掉
    // const res = await this.call({
    //   path:'/',
    //   method: 'POST'
    // })
    // console.log('业务返回结果',res)
  },
  /**
   * 封装的微信云托管调用方法
   * @param {*} obj 业务请求信息,可按照需要扩展
   * @param {*} number 请求等待,默认不用传,用于初始化等待
   */
  async call(obj, number=0){
    const that = this
    if(that.cloud == null){
      that.cloud = new wx.cloud.Cloud({
        resourceAppid: 'WXAAA', // 微信云托管环境所属账号,服务商appid、公众号或小程序appid
        resourceEnv: 'prod-001', // 微信云托管的环境ID
      })
      await that.cloud.init() // init过程是异步的,需要等待init完成才可以发起调用
    }
    try{
      const result = await that.cloud.callContainer({
        path: obj.path, // 填入业务自定义路径和参数,根目录,就是 / 
        method: obj.method||'GET', // 按照自己的业务开发,选择对应的方法
        // dataType:'text', // 如果返回的不是json格式,需要添加此项
        header: {
          'X-WX-SERVICE': 'xxx', // xxx中填入服务名称(微信云托管 - 服务管理 - 服务列表 - 服务名称)
          // 其他header参数
        }
        // 其余参数同 wx.request
      })
      console.log(`微信云托管调用结果${result.errMsg} | callid:${result.callID}`)
      return result.data // 业务数据在data中
    } catch(e){
      const error = e.toString()
       // 如果错误信息为未初始化,则等待300ms再次尝试,因为init过程是异步的
      if(error.indexOf("Cloud API isn't enabled")!=-1 && number<3){
        return new Promise((resolve)=>{
          setTimeout(function(){
            resolve(that.call(obj,number+1))
          },300)
        })
      } else {
        throw new Error(`微信云托管调用失败${error}`)
      }
    }
  }})

在page页面js中,可以如下使用:

const app = getApp()Page({
  async onLoad(){
    const res = await app.call({
      path:'/'
    })
    console.log('业务返回结果',res)
  }})

—————————————————————————————————————————————————————

重庆互联网项目从2004年开始为各行各业提供互联网发展解决方案,专业从事网站、小程序、微信公众号、APP、电商平台、系统等互联网平台开发,帮助企业实现从传统行业到互联网的完美转型。截止目前,重庆互联网合作的企业遍布全国各地,19年的开发经验和完善的售后服务体系获得合作客户的高度认可!

关注重庆互联网官方公众号,即可获取粉丝专享福利!

重庆互联网公众号二维码.jpg

网友留言评论
我要评论
评论

欢迎广大用户为此页面进行评价,评价成功将获得积分奖励!

  • 赞(0
    踩(0
重庆网站定制建设
  • 重庆网站建设平台
  • 重庆网站优化公司
  • 重庆网络推广公司哪家好
  • 重庆APP制作公司
版权所有 ©2004-2024 重庆市渝中区圣灵科技信息有限公司 渝ICP备16004600号-14 渝公网安备50010802001420号 电子营业执照
重庆公众号制作哪家好
二维码
联系客服 重庆商城网站建设