乐趣区

关于小程序云开发:使用小程序云开发静态托管实现免鉴权h5跳转小程序

jiezi

背景

微信尽管推出了微信凋谢标签能够实现 h5 跳转小程序。

然而，开发者在应用之前要在公众号设置 JS 接口平安域名，不仅限度个数还限度批改次数，而且在应用之前还得获取 access_token、ticket 等计算 signature 传入 config，十分麻烦。

怎么解决这个问题呢？

应用云开发动态托管能够免鉴权的跳转任意合规小程序。

流程比照

  • 传统公众号开发

  • 动态网站托管

动态网站托管

动态网站托管是云开发为开发者提供的 Web 资源托管服务，网站的动态资源（HTML、JavaScript、CSS、图片、音频、视频等）能够托管在该服务上，并享有以下能力：

  • 默认域名：取得对应云环境的惟一专属默认域名，通过域名可拜访动态资源，域名能够用于测试或线上应用
  • 自定义域名：你也能够绑定本人域名，绑定后本人的域名可拜访动态网站资源
  • 程序 webview：小程序不必配置业务域名即可在 <web-view> 关上云开发动态网站托管的域名（仅反对可能应用 <web-view> 标签的小程序
  • CDN 减速
  • 能够免鉴权间接关上小程序：非集体主体 的认证的小程序，应用动态网站托管的网页，能够免鉴权跳转任意非法合规的小程序，

筹备

  • 微信开发者工具
  • 非集体主体认证的小程序
  • 开明云开发(按量计费)

应用流程

一、开明云开发

开明云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite

在微信开发者工具中点击 云开发 ，依据提醒步骤疾速开明，留神抉择 按量计费 环境。

二、开明动态网站托管

上一步开明后进入 云开发控制台 -> 更多 -> 动态网站 ，依据提醒开明 动态网站托管。此处须要期待几分钟服务初始化。

三、编写代码

依据官网的 demo 联合微信凋谢标签文档批改

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>
  <body>
    <script>
      wx.config({
        debug: true, // 调试时可开启
        appId: '小程序 AppID',// 必须是非集体主体认证的小程序
        timestamp: 0, // 必填，填任意数字即可
        nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
        signature: 'signature', // 必填，填任意非空字符串即可
        jsApiList: [], 
        openTagList:['wx-open-launch-weapp'], // 填入关上小程序的凋谢标签名
      })
    </script>
    Hello World
    <!-- 跳转小程序的凋谢标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
    <wx-open-launch-weapp id="weapp" username="小程序 原始 id" path="/pages/index/index.html">
      <template>
        <button style="width: 200px; height: 45px; line-height: 45px; text-align: center; font-size: 17px; border-radius: 22.5px; color:cornflowerblue;"> 拉起小程序 </button>
      </template>
    </wx-open-launch-weapp>
  </body>
</html>

四、上传代码至动态网站托管

将编写好的 html 文件上传至动态托管

获取 url 地址 点击文件右侧的详情按钮，即可看到下载地址，复制到微信里拜访就能够看到跳转按钮。

五、成果演示

注意事项

  • 应用该性能必须是 非集体主体 认证的小程序。
  • 按量计费的云开发环境才能够开明动态网站托管。
  • <wx-open-launch-weapp> 应用的是 username 属性 (小程序的 原始 id)而不是 appId。
  • path 属性，所申明的页面门路必须增加.html 后缀，如 pages/home/index.html。
  • 目前动态网站仅反对 h5 跳转小程序 凋谢标签权限，其余 jssdk 接口暂不反对。

相干文档

  • 微信网页开发凋谢标签（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html）
  • 小程序·云开发动态网站（https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/introduction.html）

总结

以上便是应用小程序·云开发动态网站实现免鉴权 H5 跳转小程序的办法，极大的节俭了开发工夫，快去试试吧！

产品介绍

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、主动弹性扩缩的后端云服务，蕴含计算、存储、托管等 serverless 化能力，可用于云端一体化开发多种端利用（小程序，公众号，Web 利用，Flutter 客户端等），帮忙开发者对立构建和治理后端服务和云资源，防止了利用开发过程中繁琐的服务器搭建及运维，开发者能够专一于业务逻辑的实现，开发门槛更低，效率更高。
开明云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/product/tcb?from=12763
技术文档：https://cloudbase.net?from=10004
技术交换加 Q 群：601134960
最新资讯关注微信公众号【腾讯云云开发】

退出移动版