背景
微信雖然推出了微信開放標簽可以實現h5跳轉小程序。
但是，開發者在使用之前要在公眾號設置JS接口安全域名，不僅限制個數還限制修改次數，而且在使用之前還得獲取access_token、ticket等計算signature傳入config，非常麻煩。
怎么解決這個問題呢？
使用雲開發靜態托管可以免鑒權的跳轉任意合規小程序。
流程對比
- 傳統公眾號開發
- 靜態網站托管
靜態網站托管
靜態網站托管是雲開發為開發者提供的 Web 資源托管服務，網站的靜態資源（HTML、JavaScript、CSS、圖片、音頻、視頻等）可以托管在該服務上，並享有以下能力：
- 默認域名：獲得對應雲環境的唯一專屬默認域名，通過域名可訪問靜態資源，域名可以用於測試或線上使用
- 自定義域名：你也可以綁定自己域名，綁定后自己的域名可訪問靜態網站資源
- 程序 webview：小程序不用配置業務域名即可在
打開雲開發靜態網站托管的域名（僅支持能夠使用 標簽的小程序 - 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地址點擊文件右側的詳情按鈕，即可看到下載地址，復制到微信里訪問就可以看到跳轉按鈕。
五、效果演示
注意事項
- 使用該功能必須是非個人主體認證的小程序。
- 按量計費的雲開發環境才可以開通靜態網站托管。
-
使用的是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 客戶端等），幫助開發者統一構建和管理后端服務和雲資源，避免了應用開發過程中繁瑣的服務器搭建及運維，開發者可以專注於業務邏輯的實現，開發門檻更低，效率更高。