suningh5.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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: 'yfbmSJ103596e2023092201', // <!-- 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: 'yfbmSJ103596e2023092201', // <!-- replace -->
  77. // 资源方环境 ID
  78. resourceEnv: 'cloud1-3gua9rkm875bd364', // <!-- 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. function getQueryString(name) {
  97. var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  98. var r = window.location.search.substr(1).match(reg);
  99. if (r != null) {
  100. return decodeURI(r[2]);
  101. }
  102. return null;
  103. }
  104. async function openWeapp(onBeforeJump) {
  105. var c = window.c
  106. const res = await c.callFunction({
  107. name: 'public',
  108. data: {
  109. action: 'getUrlScheme',
  110. orderId: getQueryString("orderId"),
  111. page:"pages/index/index"
  112. },
  113. })
  114. console.warn(res)
  115. if (onBeforeJump) {
  116. onBeforeJump()
  117. }
  118. location.href = res.result.openlink
  119. }
  120. </script>
  121. <style>
  122. .hidden {
  123. display: none;
  124. }
  125. .full {
  126. position: absolute;
  127. top: 0;
  128. bottom: 0;
  129. left: 0;
  130. right: 0;
  131. }
  132. .public-web-container {
  133. display: flex;
  134. flex-direction: column;
  135. align-items: center;
  136. }
  137. .public-web-container p {
  138. position: absolute;
  139. top: 40%;
  140. }
  141. .public-web-container a {
  142. position: absolute;
  143. bottom: 40%;
  144. }
  145. .wechat-web-container {
  146. display: flex;
  147. flex-direction: column;
  148. align-items: center;
  149. }
  150. .wechat-web-container p {
  151. position: absolute;
  152. top: 40%;
  153. }
  154. .wechat-web-container wx-open-launch-weapp {
  155. position: absolute;
  156. bottom: 40%;
  157. left: 0;
  158. right: 0;
  159. display: flex;
  160. flex-direction: column;
  161. align-items: center;
  162. }
  163. .desktop-web-container {
  164. display: flex;
  165. flex-direction: column;
  166. align-items: center;
  167. }
  168. .desktop-web-container p {
  169. position: absolute;
  170. top: 40%;
  171. }
  172. </style>
  173. </head>
  174. <body>
  175. <div class="page full">
  176. <div id="public-web-container" class="hidden">
  177. <p class="">正在打开小程序</p> <!-- replace -->
  178. <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()">
  179. <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>
  180. 打开小程序
  181. </a>
  182. </div>
  183. <div id="wechat-web-container" class="hidden">
  184. <p class="">点击以下按钮打开你的小程序</p> <!-- replace -->
  185. <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
  186. <wx-open-launch-weapp id="launch-btn" username="gh_3295cff1e5e3" path="pages/index/index"> <!-- replace -->
  187. <template>
  188. <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>
  189. </template>
  190. </wx-open-launch-weapp>
  191. </div>
  192. <div id="desktop-web-container" class="hidden">
  193. <p class="">请在手机打开网页链接</p>
  194. </div>
  195. </div>
  196. </body>
  197. </html>