静态网站 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 跳转小程序。

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

你的小程序信息
- 小程序 AppID：填入你的小程序 AppID
- 云开发环境 ID：填入你的开通了静态网站托管的云开发环境 ID
想要拉取的小程序信息
- 小程序原始账号 ID：填入要跳转的小程序原始账号 ID（gh_ 开头）
- 小程序页面路径：填入要跳转到的小程序的页面路径
- 小程序名称：填入要跳转到的小程序名称
- HTML源码和下载
- index.html (6.98 KB, 下载次数: 3)
  
  2022-10-29 21:01 上传
  点击文件名下载附件
  阅读权限: 20
- 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. 
  13. <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
  14. 
  15. 
  16. 
  17. 
  18. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  19. 
  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', // 
  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', // 
  81. // 资源方环境 ID
  82. resourceEnv: '云开发环境 ID', // 
  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> 
  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> 
  190. 
  191. <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> 
  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>
  复制代码
- 云开发环境 ID在哪？
- 微信图片_20221029210457.png (166.45 KB, 下载次数: 3)
  
  下载附件
  
  2022-10-29 21:05 上传

版权声明

1、本站所有资源来源于网络搜集和会员分享

2、本站所有程序仅供大家学习和参考，不得进行商业用途

3、如果觉得程序还可以、请购买官方正版

4、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

唯一网址: https://bbs.zonghengtx.cn/thread-2522-1-1.html

		自动登录	找回密码
密码			立即注册

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

版权声明

相关帖子

狗