# 公众号H5-访问云托管服务

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.0/cloud.js"></script>
<script src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.1/mplogin.min.js"></script>
<script>
  window.onload = async function () {
    // 如果有需要，可以使用调试组件，在手机端查看
    // const vConsole = new window.VConsole();
    // 使用登录模块，传入信息开始授权登录过程
    // 如果首次登录，页面会经历一系列跳转过程，请不要在登录前加业务处理代码，以免登录被中断。
    const result = await window.mplogin({    
      scope: "snsapi_userinfo",             // 必填，登录方式：snsapi_userinfo、snsapi_base
      appid: 'wxaa01testenvid99',           // 必填，公众号appid，将以此appid名义进行请求
      // redirect: '',                      // 选填，授权成功后路由的地址，目标地址应能处理授权参数，不填为当前页面
      envid: 'prod-testenvid',              // 选填，资源方微信云托管环境，如果传递此参数则会返回初始化的cloud操作对象
      resourceAppid: 'wxaa02testenvid99',   // 选填，如果是资源复用模式，需要填资源方微信账号
      signature: window.location.href       // 选填，如果需要微信SDK的API方法，则填写要使用的地址，会返回signature签名对象，envid参数不填则无效
      // region: ''                         // 选填，环境的地域，可选ap-guangzhou、ap-beijing，不填默认为ap-shanghai
      // traceUser:false                    // 选填，默认true，是否在将用户访问记录到用户管理中，非上海地域请设置成false
      // noback: true                       // 选填，默认noback:false，此时初次跳转授权后，模块将重新回退加载页面。
                                            // 由于CloudSDK在初次登录时需要多个页面跳转，最终带参返回页面在浏览器页面栈中多了一到两层
                                            // 你可以根据业务自行用history处理上述问题，不需要模块介入则填noback:true
    })
    // 登录完成后，结果会以对象形式展示
    /* 返回信息结构：
      ret: number               // 登录的状态
      |_ -1: 参数错误，一般是appid缺失和scope类型有误
      |_  0: 成功
      |_  1: 当前页面或redirect页面非https协议，授权机制无法作用，请使用https协议
      |_  2: 系统判定有风险，阻止了此次登录，一般是授权耗时太长，导致过期了，清除缓存刷新可解决问题
      |_  3: 未引入微信WEBSDK，无法初始化cloud操作对象，或者因为环境未授权此账号
      msg: string               // 登录失败的问题描述
      cloud: object[function]   // envid参数存在并成功初始化后，返回的操作函数对象
      signature: object[string] // envid、signature参数存在并成功初始化后，返回的签名信息
      info: string              // 如果snsapi_userinfo登录，则会返回用户信息的cloudID，可以使用转换接口获取信息，见下文
    */
    console.log(result)
    if (result.ret === 0) {                 // ret为0时，代表登录已经完成，可以进行业务操作
      window.app = result.cloud             // result.cloud 返回初始化可操作的cloud函数对象，将其放置全局

      // 向云托管服务发起调用
      const callres = await window.app.callContainer({
        path: '/xxx',                       // 填入业务自定义路径和参数，根目录，就是 / 
        method: 'POST',                     // 按照自己的业务开发，选择对应的方法
        header: {
          'X-WX-SERVICE': 'xxx',            // xxx中填入服务名称（微信云托管 - 服务管理 - 服务列表 - 服务名称）
        }
        // 其余参数同 wx.request
      })
      console.log(callres)
      
      // 使用微信公众号SDK，开始签名，签名信息在result.signature中
      
      // 监听签名注册成功
      wx.ready(function () {
        // 发起网络类型获取，只是测试，可以替换自己想要的API方法
        wx.getNetworkType({
          success: function (res) {
            window.alert('当前设备网络类型：'+res.networkType)
          }
        })
      })
      // 发起签名注册，是一个异步操作，成功会触发wx.ready
      wx.config({
        appId: 'wxaa01testenvid99',                   // 微信公众号appid
        timestamp: result.signature.timestamp + '',   // 时间戳，从返回result.signature中获取
        nonceStr: result.signature.nonceStr,          // 随机字符串，从返回result.signature中获取
        signature: result.signature.signature,        // 签名，从返回result.signature中获取
        jsApiList: ['getNetworkType']                 // 注册的api列表
      })
    } else {  // ret不为0时，代表登录出现错误，一般出现在开发调试中，正式使用一般只有2-系统拦截错误
      // 登录出现问题，打印问题描述
      window.alert(result.msg)
    }
  }
</script>