jump.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <html>
  2. <head>
  3. <!-- 此文件提供给短链后端部署 -->
  4. <title>打开小程序</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  7. <script>
  8. window.data = {}
  9. window.onerror = e => {
  10. console.error(e)
  11. alert('发生错误' + e)
  12. }
  13. </script>
  14. <!-- weui 样式 -->
  15. <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css">
  16. </link>
  17. <!-- 调试用的移动端 console -->
  18. <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
  19. <!-- <script>eruda.init();</script> -->
  20. <!-- 公众号 JSSDK -->
  21. <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
  22. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
  23. <script>
  24. function docReady(fn) {
  25. if (document.readyState === 'complete' || document.readyState === 'interactive') {
  26. fn()
  27. } else {
  28. document.addEventListener('DOMContentLoaded', fn);
  29. }
  30. }
  31. docReady(async function () {
  32. var ua = navigator.userAgent.toLowerCase()
  33. var isWXWork = ua.match(/wxwork/i) == 'wxwork'
  34. var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
  35. var isMobile = false
  36. var isDesktop = false
  37. if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
  38. isMobile = true
  39. } else {
  40. isDesktop = true
  41. }
  42. // "type":"0-文章 1-公众号二维码 2-个人二维码 3-群二维码 4-员工活码 5-客群活码 6-门店导购活码 7-个人小程序 8-门店群活码 9-企业小程序 10-小程序二维码"
  43. if (window.data.errorMsg) {
  44. alert('发生错误:' + window.data.errorMsg)
  45. return
  46. } else if (window.data.type == 0) {
  47. location.href = (window.data.linkPath)
  48. return
  49. }
  50. if (isWeixin) {
  51. if ([5, 6, 8].includes(+window.data.type)) {
  52. var canvas = document.createElement('canvas')
  53. var ctx = canvas.getContext('2d')
  54. var img = new Image()
  55. img.setAttribute('crossOrigin', 'anonymous')
  56. img.onload = function () {
  57. canvas.width = img.width
  58. canvas.height = img.height
  59. ctx.drawImage(img, 0, 0)
  60. var imageData = ctx.getImageData(0, 0, img.width, img.height)
  61. var code = jsQR(imageData.data, imageData.width, imageData.height, {
  62. inversionAttempts: "dontInvert",
  63. })
  64. location.href = ((code && code.data) || window.data.url_scheme)
  65. }
  66. img.src = window.data.qrCode
  67. return
  68. }
  69. // var containerEl = document.getElementById('wechat-web-container')
  70. // containerEl.classList.remove('hidden')
  71. // containerEl.classList.add('full', 'wechat-web-container')
  72. // var launchBtn = document.getElementById('launch-btn')
  73. // launchBtn.addEventListener('ready', function (e) {
  74. // console.log('开放标签 ready')
  75. // })
  76. // launchBtn.addEventListener('launch', function (e) {
  77. // console.log('开放标签 success')
  78. // })
  79. // launchBtn.addEventListener('error', function (e) {
  80. // console.log('开放标签 fail', e.detail)
  81. // })
  82. // wx.config({
  83. // debug: true, // 调试时可开启
  84. // appId: 'wx2567dbb9d3fd9556', // <!-- replace -->
  85. // timestamp: 0, // 必填,填任意数字即可
  86. // nonceStr: 'nonceStr', // 必填,填任意非空字符串即可
  87. // signature: 'signature', // 必填,填任意非空字符串即可
  88. // jsApiList: ['chooseImage'], // 必填,随意一个接口即可
  89. // openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
  90. // })
  91. }
  92. if (isDesktop) {
  93. // 在 pc 上则给提示引导到手机端打开
  94. var containerEl = document.getElementById('desktop-web-container')
  95. containerEl.classList.remove('hidden')
  96. containerEl.classList.add('full', 'desktop-web-container')
  97. } else {
  98. var containerEl = document.getElementById('public-web-container')
  99. containerEl.classList.remove('hidden')
  100. containerEl.classList.add('full', 'public-web-container')
  101. var buttonEl = document.getElementById('public-web-jump-button')
  102. var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
  103. try {
  104. await openWeapp(() => {
  105. buttonEl.classList.remove('weui-btn_loading')
  106. buttonLoadingEl.classList.add('hidden')
  107. })
  108. } catch (e) {
  109. buttonEl.classList.remove('weui-btn_loading')
  110. buttonLoadingEl.classList.add('hidden')
  111. throw e
  112. }
  113. }
  114. })
  115. async function openWeapp(onBeforeJump) {
  116. if (onBeforeJump) {
  117. onBeforeJump()
  118. }
  119. location.href = window.data.url_scheme
  120. }
  121. </script>
  122. <style>
  123. .hidden {
  124. display: none;
  125. }
  126. .full {
  127. position: absolute;
  128. top: 0;
  129. bottom: 0;
  130. left: 0;
  131. right: 0;
  132. }
  133. .public-web-container {
  134. display: flex;
  135. flex-direction: column;
  136. align-items: center;
  137. }
  138. .public-web-container p {
  139. position: absolute;
  140. top: 40%;
  141. }
  142. .public-web-container a {
  143. position: absolute;
  144. bottom: 40%;
  145. }
  146. /* .wechat-web-container {
  147. display: flex;
  148. flex-direction: column;
  149. align-items: center;
  150. }
  151. .wechat-web-container p {
  152. position: absolute;
  153. top: 40%;
  154. }
  155. .wechat-web-container wx-open-launch-weapp {
  156. position: absolute;
  157. bottom: 40%;
  158. left: 0;
  159. right: 0;
  160. display: flex;
  161. flex-direction: column;
  162. align-items: center;
  163. } */
  164. .desktop-web-container {
  165. display: flex;
  166. flex-direction: column;
  167. align-items: center;
  168. }
  169. .desktop-web-container p {
  170. position: absolute;
  171. top: 40%;
  172. }
  173. </style>
  174. </head>
  175. <body>
  176. <div class="page full">
  177. <div id="public-web-container" class="hidden">
  178. <!-- replace -->
  179. <p class="">正在打开...</p>
  180. <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading"
  181. onclick="openWeapp()">
  182. <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i
  183. class="weui-primary-loading__dot"></i></span>
  184. 打开小程序
  185. </a>
  186. </div>
  187. <div id="desktop-web-container" class="hidden">
  188. <p class="">请在手机打开网页链接</p>
  189. </div>
  190. </div>
  191. </body>
  192. </html>