devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序云开发之——网页跳转小程序_云开发 普通页面打开微信小程序

作者：知新_RL | 2024-07-21 00:09:49

赞

踩

云开发 普通页面打开微信小程序

一：微信小程序开通云开发，微信小程序公众平台拿到如下参数

  • 你的小程序信息
    • 小程序 AppID：填入你的小程序 AppID
    • 云开发环境 ID：填入你的开通了静态网站托管的云开发环境 ID
  • 想要拉取的小程序信息
    • 小程序原始账号 ID：填入要跳转的小程序原始账号 ID（gh_ 开头）
    • 小程序页面路径：填入要跳转到的小程序的页面路径
    • 小程序名称：填入要跳转到的小程序名称

二：创建一个html文件，内容如下

注意，以下代码中有以下内容必须替换成你的小程序数据（上方列举的数据），可以搜索 <!-- replace --> 查看到所有需要替换的地方：

  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.  
  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.         }
  41.  
  42.         if (isWeixin) {
  43.           var containerEl = document.getElementById('wechat-web-container')
  44.           containerEl.classList.remove('hidden')
  45.           containerEl.classList.add('full', 'wechat-web-container')
  46.  
  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.           })
  57.  
  58.           wx.config({
  59.             // debug: true, // 调试时可开启
  60.             appId: '小程序 AppID', // <!-- replace -->
  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', // <!-- replace -->
  81.             // 资源方环境 ID
  82.             resourceEnv: '云开发环境 ID', // <!-- replace -->
  83.           })
  84.           await c.init()
  85.           window.c = c
  86.  
  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.       })
  101.  
  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.       }
  121.  
  122.       .full {
  123.         position: absolute;
  124.         top: 0;
  125.         bottom: 0;
  126.         left: 0;
  127.         right: 0;
  128.       }
  129.  
  130.       .public-web-container {
  131.         display: flex;
  132.         flex-direction: column;
  133.         align-items: center;
  134.       }
  135.  
  136.       .public-web-container p {
  137.         position: absolute;
  138.         top: 40%;
  139.       }
  140.  
  141.       .public-web-container a {
  142.         position: absolute;
  143.         bottom: 40%;
  144.       }
  145.  
  146.       .wechat-web-container {
  147.         display: flex;
  148.         flex-direction: column;
  149.         align-items: center;
  150.       }
  151.  
  152.       .wechat-web-container p {
  153.         position: absolute;
  154.         top: 40%;
  155.       }
  156.  
  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.       }
  166.  
  167.       .desktop-web-container {
  168.         display: flex;
  169.         flex-direction: column;
  170.         align-items: center;
  171.       }
  172.  
  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> <!-- replace -->
  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> <!-- replace -->
  190.         <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
  191.         <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
  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>

三：将上传至微信开发者工具—>云开发—>更多—>静态网站

1.

 2.

 3.

 4.

 5.上传你写好的html,然后点击详情进查看文件网址

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/858960
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号