index.html 9.7 KB

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