静态网站 H5 跳小程序

非个人主体并且已认证的小程序，使用云开发静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分 App （如企业微信、QQ 等）跳转微信小程序。

静态网站网页在微信客户端打开时，wx.config 可以传入小程序 AppID 并且不需计算签名，也就是免鉴权即可使用跳转小程序的能力。

扫码体验（将会跳转到微信官方的 “小程序示例” 小程序）：https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

qrcode

注意，开通静态网站、绑定自定义域名，需要在「微信开发者工具 - 云开发 - 更多 - 静态网站」里进行，才能拥有免鉴权的能力。

以下包含完整代码示例，包括 HTML 代码和云函数代码。示例无需准备公众号，只需准备好小程序和开通云开发以及云开发中的静态网站托管能力。网页会判断所在的环境来觉得采用哪种跳转方式，如检测到微信客户端内，则免鉴权使用开放标签跳转，如检测到在外部浏览器或 App，则使用 URL Scheme 跳转小程序。

注意，以下代码中有以下内容必须替换，可以搜索 <!-- replace --> 查看到所有需要替换的地方：

  • 小程序 AppID：填入你的小程序 AppID
  • 云开发环境 ID：填入你的开通了静态网站托管的云开发环境 ID
  • 小程序原始账号 ID：填入你的小程序原始账号 ID（gh_ 开头）
  • 小程序页面路径：填入要跳转到的小程序的页面路径
  • 小程序名称：填入要跳转到的小程序名称

HTML: 点击下载

  1. <html>
  2.   <head>
  3.     <title>打开小程序</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  6.     <script>
  7.       window.onerror = e => {
  8.         console.error(e)
  9.         alert('发生错误' + e)
  10.       }
  11.     </script>
  12.     <!-- weui 样式 -->
  13.     <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
  14.     <!-- 调试用的移动端 console -->
  15.     <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
  16.     <!-- <script>eruda.init();</script> -->
  17.     <!-- 公众号 JSSDK -->
  18.     <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  19.     <!-- 云开发 Web SDK -->
  20.     <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
  21.     <script>
  22.       function docReady(fn) {
  23.         if (document.readyState === 'complete' || document.readyState === 'interactive') {
  24.           fn()
  25.         } else {
  26.           document.addEventListener('DOMContentLoaded', fn);
  27.         }
  28.       }
  30.       docReady(async function() {
  31.         var ua = navigator.userAgent.toLowerCase()
  32.         var isWXWork = ua.match(/wxwork/i) == 'wxwork'
  33.         var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
  34.         var isMobile = false
  35.         var isDesktop = false
  36.         if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
  37.           isMobile = true
  38.         } else {
  39.           isDesktop = true
  40.         }
  42.         if (isWeixin) {
  43.           var containerEl = document.getElementById('wechat-web-container')
  44.           containerEl.classList.remove('hidden')
  45.           containerEl.classList.add('full', 'wechat-web-container')
  47.           var launchBtn = document.getElementById('launch-btn')
  48.           launchBtn.addEventListener('ready', function (e) {
  49.             console.log('开放标签 ready')
  50.           })
  51.           launchBtn.addEventListener('launch', function (e) {
  52.             console.log('开放标签 success')
  53.           })
  54.           launchBtn.addEventListener('error', function (e) {
  55.             console.log('开放标签 fail', e.detail)
  56.           })
  58.           wx.config({
  59.             // debug: true, // 调试时可开启
  60.             appId: '小程序 AppID', // <!-- replace -->
  61.             timestamp: 0, // 必填，填任意数字即可
  62.             nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
  63.             signature: 'signature', // 必填，填任意非空字符串即可
  64.             jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
  65.             openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
  66.           })
  67.         } else if (isDesktop) {
  68.           // 在 pc 上则给提示引导到手机端打开
  69.           var containerEl = document.getElementById('desktop-web-container')
  70.           containerEl.classList.remove('hidden')
  71.           containerEl.classList.add('full', 'desktop-web-container')
  72.         }  else {
  73.           var containerEl = document.getElementById('public-web-container')
  74.           containerEl.classList.remove('hidden')
  75.           containerEl.classList.add('full', 'public-web-container')
  76.           var c = new cloud.Cloud({
  77.             // 必填，表示是未登录模式
  78.             identityless: true,
  79.             // 资源方 AppID
  80.             resourceAppid: '小程序 AppID', // <!-- replace -->
  81.             // 资源方环境 ID
  82.             resourceEnv: '云开发环境 ID', // <!-- replace -->
  83.           })
  84.           await c.init()
  85.           window.c = c
  87.           var buttonEl = document.getElementById('public-web-jump-button')
  88.           var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
  89.           try {
  90.             await openWeapp(() => {
  91.               buttonEl.classList.remove('weui-btn_loading')
  92.               buttonLoadingEl.classList.add('hidden')
  93.             })
  94.           } catch (e) {
  95.             buttonEl.classList.remove('weui-btn_loading')
  96.             buttonLoadingEl.classList.add('hidden')
  97.             throw e
  98.           }
  99.         }
  100.       })
  102.       async function openWeapp(onBeforeJump) {
  103.         var c = window.c
  104.         const res = await c.callFunction({
  105.           name: 'public',
  106.           data: {
  107.             action: 'getUrlScheme',
  108.           },
  109.         })
  110.         console.warn(res)
  111.         if (onBeforeJump) {
  112.           onBeforeJump()
  113.         }
  114.         location.href = res.result.openlink
  115.       }
  116.     </script>
  117.     <style>
  118.       .hidden {
  119.         display: none;
  120.       }
  122.       .full {
  123.         position: absolute;
  124.         top: 0;
  125.         bottom: 0;
  126.         left: 0;
  127.         right: 0;
  128.       }
  130.       .public-web-container {
  131.         display: flex;
  132.         flex-direction: column;
  133.         align-items: center;
  134.       }
  136.       .public-web-container p {
  137.         position: absolute;
  138.         top: 40%;
  139.       }
  141.       .public-web-container a {
  142.         position: absolute;
  143.         bottom: 40%;
  144.       }
  146.       .wechat-web-container {
  147.         display: flex;
  148.         flex-direction: column;
  149.         align-items: center;
  150.       }
  152.       .wechat-web-container p {
  153.         position: absolute;
  154.         top: 40%;
  155.       }
  157.       .wechat-web-container wx-open-launch-weapp {
  158.         position: absolute;
  159.         bottom: 40%;
  160.         left: 0;
  161.         right: 0;
  162.         display: flex;
  163.         flex-direction: column;
  164.         align-items: center;
  165.       }
  167.       .desktop-web-container {
  168.         display: flex;
  169.         flex-direction: column;
  170.         align-items: center;
  171.       }
  173.       .desktop-web-container p {
  174.         position: absolute;
  175.         top: 40%;
  176.       }
  177.     </style>
  178.   </head>
  179.   <body>
  180.     <div class="page full">
  181.       <div id="public-web-container" class="hidden">
  182.         <p class="">正在打开 “填入你的小程序名称”...</p> <!-- replace -->
  183.         <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()">
  184.           <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>
  185.           打开小程序
  186.         </a>
  187.       </div>
  188.       <div id="wechat-web-container" class="hidden">
  189.         <p class="">点击以下按钮打开 “填入你的小程序名称”</p> <!-- replace -->
  190.         <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
  191.         <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
  192.           <template>
  193.             <button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>
  194.           </template>
  195.         </wx-open-launch-weapp>
  196.       </div>
  197.       <div id="desktop-web-container" class="hidden">
  198.         <p class="">请在手机打开网页链接</p>
  199.       </div>
  200.     </div>
  201.   </body>
  202. </html>

云函数 public: 点击下载

  1. 新建一个云函数，名为 public，然后将其 index.js 设为以下内容：
  2. 在云开发控制台中的设置 -> 权限设置中，将对应开通了静态网站的云环境开启未登录模式访问
  3. 在云开发控制台中的云函数 -> 权限设置中，配置安全规则，选择 “允许所有用户访问” 的模板并确认。如果需要更安全的控制，即只让 public 函数开启未登录访问，可参见底部安全规则模板
  1. // 云函数入口文件
  2. const cloud = require('wx-server-sdk')
  4. cloud.init()
  6. // 云函数入口函数
  7. exports.main = async (event, context) => {
  8.   const wxContext = cloud.getWXContext()
  10.   switch (event.action) {
  11.     case 'getUrlScheme': {
  12.       return getUrlScheme(event.options)
  13.     }
  14.   }
  16.   return 'action not found'
  17. }
  19. async function getUrlScheme(options) {
  20.   return cloud.openapi.urlscheme.generate({
  21.     jumpWxa: {
  22.       path: '/page/component/index', // <!-- replace -->
  23.       query: '',
  24.     },
  25.     // 如果想不过期则置为 false，并可以存到数据库
  26.     isExpire: true,
  27.     // 一分钟有效期
  28.     expireTime: parseInt(Date.now() / 1000 + 60),
  29.   })
  30. }

可选的进阶的云函数安全规则模板（只放开了让 public 云函数支持未登录访问）：

  1. {
  2.   "*": {
  3.     "invoke": "auth != null"
  4.   },
  5.   "public": {
  6.     "invoke": true
  7.   }
  8. }