坏蛋网络

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
开启左侧

[小程序] 静态网站 H5 跳小程序h5跳转小程序

[复制链接]
坏蛋网络男神 实名认证 官方 发表于 2022-10-29 21:05:58 | 显示全部楼层 |阅读模式
静态网站 H5 跳小程序h5跳转小程序
非个人主体并且已认证的(微信认证)小程序,使用云开发静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。
静态网站网页在微信客户端打开时,wx.config 可以传入小程序 AppID 并且不需计算签名,也就是免鉴权即可使用跳转小程序的能力。
扫码体验(将会跳转到微信官方的 "小程序示例" 小程序):https://postpay-2g5hm2oxbbb721a4 ... pp.com/jump-mp.html


注意,开通静态网站、绑定自定义域名,需要在「微信开发者工具 - 云开发 - 更多 - 静态网站」里进行,才能拥有免鉴权的能力。
以下包含完整代码示例,包括 HTML 代码和云函数代码。示例无需准备公众号,只需准备好小程序和开通云开发以及云开发中的静态网站托管能力。网页会判断所在的环境来觉得采用哪种跳转方式,如检测到微信客户端内,则免鉴权使用开放标签跳转,如检测到在外部浏览器或 App,则使用 URL Scheme 跳转小程序。
注意,以下代码中有以下内容必须替换,可以搜索 <!-- replace --> 查看到所有需要替换的地方:
  • 你的小程序信息
    • 小程序 AppID:填入你的小程序 AppID
    • 云开发环境 ID:填入你的开通了静态网站托管的云开发环境 ID
  • 想要拉取的小程序信息
    • 小程序原始账号 ID:填入要跳转的小程序原始账号 ID(gh_ 开头)
    • 小程序页面路径:填入要跳转到的小程序的页面路径
    • 小程序名称:填入要跳转到的小程序名称
    • HTML源码和下载
    • index.html (6.98 KB, 下载次数: 2)
      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.       }

      29.       docReady(async function() {
      30.         var ua = navigator.userAgent.toLowerCase()
      31.         var isWXWork = ua.match(/wxwork/i) == 'wxwork'
      32.         var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
      33.         var isMobile = false
      34.         var isDesktop = false
      35.         if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
      36.           isMobile = true
      37.         } else {
      38.           isDesktop = true
      39.         }

      40.         if (isWeixin) {
      41.           var containerEl = document.getElementById('wechat-web-container')
      42.           containerEl.classList.remove('hidden')
      43.           containerEl.classList.add('full', 'wechat-web-container')

      44.           var launchBtn = document.getElementById('launch-btn')
      45.           launchBtn.addEventListener('ready', function (e) {
      46.             console.log('开放标签 ready')
      47.           })
      48.           launchBtn.addEventListener('launch', function (e) {
      49.             console.log('开放标签 success')
      50.           })
      51.           launchBtn.addEventListener('error', function (e) {
      52.             console.log('开放标签 fail', e.detail)
      53.           })

      54.           wx.config({
      55.             // debug: true, // 调试时可开启
      56.             appId: '小程序 AppID', // <!-- replace -->
      57.             timestamp: 0, // 必填,填任意数字即可
      58.             nonceStr: 'nonceStr', // 必填,填任意非空字符串即可
      59.             signature: 'signature', // 必填,填任意非空字符串即可
      60.             jsApiList: ['chooseImage'], // 必填,随意一个接口即可
      61.             openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
      62.           })
      63.         } else if (isDesktop) {
      64.           // 在 pc 上则给提示引导到手机端打开
      65.           var containerEl = document.getElementById('desktop-web-container')
      66.           containerEl.classList.remove('hidden')
      67.           containerEl.classList.add('full', 'desktop-web-container')
      68.         }  else {
      69.           var containerEl = document.getElementById('public-web-container')
      70.           containerEl.classList.remove('hidden')
      71.           containerEl.classList.add('full', 'public-web-container')
      72.           var c = new cloud.Cloud({
      73.             // 必填,表示是未登录模式
      74.             identityless: true,
      75.             // 资源方 AppID
      76.             resourceAppid: '小程序 AppID', // <!-- replace -->
      77.             // 资源方环境 ID
      78.             resourceEnv: '云开发环境 ID', // <!-- replace -->
      79.           })
      80.           await c.init()
      81.           window.c = c

      82.           var buttonEl = document.getElementById('public-web-jump-button')
      83.           var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
      84.           try {
      85.             await openWeapp(() => {
      86.               buttonEl.classList.remove('weui-btn_loading')
      87.               buttonLoadingEl.classList.add('hidden')
      88.             })
      89.           } catch (e) {
      90.             buttonEl.classList.remove('weui-btn_loading')
      91.             buttonLoadingEl.classList.add('hidden')
      92.             throw e
      93.           }
      94.         }
      95.       })

      96.       async function openWeapp(onBeforeJump) {
      97.         var c = window.c
      98.         const res = await c.callFunction({
      99.           name: 'public',
      100.           data: {
      101.             action: 'getUrlScheme',
      102.           },
      103.         })
      104.         console.warn(res)
      105.         if (onBeforeJump) {
      106.           onBeforeJump()
      107.         }
      108.         location.href = res.result.openlink
      109.       }
      110.     </script>
      111.     <style>
      112.       .hidden {
      113.         display: none;
      114.       }

      115.       .full {
      116.         position: absolute;
      117.         top: 0;
      118.         bottom: 0;
      119.         left: 0;
      120.         right: 0;
      121.       }

      122.       .public-web-container {
      123.         display: flex;
      124.         flex-direction: column;
      125.         align-items: center;
      126.       }

      127.       .public-web-container p {
      128.         position: absolute;
      129.         top: 40%;
      130.       }

      131.       .public-web-container a {
      132.         position: absolute;
      133.         bottom: 40%;
      134.       }

      135.       .wechat-web-container {
      136.         display: flex;
      137.         flex-direction: column;
      138.         align-items: center;
      139.       }

      140.       .wechat-web-container p {
      141.         position: absolute;
      142.         top: 40%;
      143.       }

      144.       .wechat-web-container wx-open-launch-weapp {
      145.         position: absolute;
      146.         bottom: 40%;
      147.         left: 0;
      148.         right: 0;
      149.         display: flex;
      150.         flex-direction: column;
      151.         align-items: center;
      152.       }

      153.       .desktop-web-container {
      154.         display: flex;
      155.         flex-direction: column;
      156.         align-items: center;
      157.       }

      158.       .desktop-web-container p {
      159.         position: absolute;
      160.         top: 40%;
      161.       }
      162.     </style>
      163.   </head>
      164.   <body>
      165.     <div class="page full">
      166.       <div id="public-web-container" class="hidden">
      167.         <p class="">正在打开 “填入你的小程序名称”...</p> <!-- replace -->
      168.         <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()">
      169.           <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>
      170.           打开小程序
      171.         </a>
      172.       </div>
      173.       <div id="wechat-web-container" class="hidden">
      174.         <p class="">点击以下按钮打开 “填入你的小程序名称”</p> <!-- replace -->
      175.         <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
      176.         <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID(gh_ 开头的)" path="要跳转到的页面路径"> <!-- replace -->
      177.           <template>
      178.             <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>
      179.           </template>
      180.         </wx-open-launch-weapp>
      181.       </div>
      182.       <div id="desktop-web-container" class="hidden">
      183.         <p class="">请在手机打开网页链接</p>
      184.       </div>
      185.     </div>
      186.   </body>
      187. </html>
      复制代码

    • 云开发环境 ID在哪?
    • 微信图片_20221029210457.png


想说又不敢说,说了又怕被拒绝,拒绝了又怕尴尬,就是这样的。内心很痛苦的那种。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表