坏蛋网络建站教程静态网站 H5 跳小程序h5跳转小程序菜鸟教程静态网站,程序,跳转 - Powered by Discuz!
<link rel="stylesheet" type="text/css" href="source/plugin/qzom_thread/styles/4/styles.css">静态网站 H5 跳小程序h5跳转小程序<br /><font style="color:rgb(34, 34, 34)"><font face="-apple-system, BlinkMacSystemFont, &quot;"><strong>非个人主体并且已认证的</strong>(<font color="#576b95">微信认证</font>)小程序，使用<font color="#576b95">云开发</font>静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分 App （如企业微信、QQ 等）跳转微信小程序。</font></font><font style="color:rgb(34, 34, 34)"><font face="-apple-system, BlinkMacSystemFont, &quot;">静态网站网页在微信客户端打开时，wx.config 可以传入小程序 AppID 并且不需计算签名，也就是免鉴权即可使用跳转小程序的能力。</font></font><font style="color:rgb(34, 34, 34)"><font face="-apple-system, BlinkMacSystemFont, &quot;">扫码体验（将会跳转到微信官方的 "小程序示例" 小程序）：<a href="https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html" target="_blank">https://postpay-2g5hm2oxbbb721a4 ... pp.com/jump-mp.html</a></font></font><font style="color:rgb(34, 34, 34)"><br /></font><font style="color:rgb(34, 34, 34)"><br /></font><font face="-apple-system, BlinkMacSystemFont, &quot;"><font size="4"><font color="#ff0000"><strong>注意，开通静态网站、绑定自定义域名，需要在「微信开发者工具 - 云开发 - 更多 - 静态网站」里进行，才能拥有免鉴权的能力。</strong></font></font></font><font style="color:rgb(34, 34, 34)"><font face="-apple-system, BlinkMacSystemFont, &quot;">以下包含完整代码示例，包括 HTML 代码和云函数代码。示例无需准备公众号，只需准备好小程序和开通云开发以及云开发中的静态网站托管能力。网页会判断所在的环境来觉得采用哪种跳转方式，如检测到微信客户端内，则免鉴权使用开放标签跳转，如检测到在外部浏览器或 App，则使用 URL Scheme 跳转小程序。</font></font><font style="color:rgb(34, 34, 34)"><font face="-apple-system, BlinkMacSystemFont, &quot;"><strong>注意</strong>，以下代码中有以下内容必须替换，可以搜索 <!-- replace --> 查看到所有需要替换的地方：</font></font><ul><li>你的小程序信息<br /><ul><li>小程序 AppID：填入你的小程序 AppID<li>云开发环境 ID：填入你的开通了静态网站托管的云开发环境 ID<br /></ul><li><font color="#222222">想要拉取的小程序信息</font><br /><ul><li>小程序原始账号 ID：填入要跳转的小程序原始账号 ID（gh_ 开头）<li>小程序页面路径：填入要跳转到的小程序的页面路径<li>小程序名称：填入要跳转到的小程序名称<li>HTML源码和下载<li><li><ol><li><html><br /><li> <head><br /><li> <title>打开小程序</title><br /><li> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /><li> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"><br /><li> <script><br /><li> window.onerror = e => {<br /><li> console.error(e)<br /><li> alert('发生错误' + e)<br /><li> }<br /><li> </script><br /><li> <!-- weui 样式 --><br /><li> <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link><br /><li> <!-- 调试用的移动端 console --><br /><li> <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> --><br /><li> <!-- <script>eruda.init();</script> --><br /><li> <!-- 公众号 JSSDK --><br /><li> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><br /><li> <!-- 云开发 Web SDK --><br /><li> <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script><br /><li> <script><br /><li> function docReady(fn) {<br /><li> if (document.readyState === 'complete' || document.readyState === 'interactive') {<br /><li> fn()<br /><li> } else {<br /><li> document.addEventListener('DOMContentLoaded', fn);<br /><li> }<br /><li> }<br /><li><br /><li> docReady(async function() {<br /><li> var ua = navigator.userAgent.toLowerCase()<br /><li> var isWXWork = ua.match(/wxwork/i) == 'wxwork'<br /><li> var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'<br /><li> var isMobile = false<br /><li> var isDesktop = false<br /><li> if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {<br /><li> isMobile = true<br /><li> } else {<br /><li> isDesktop = true<br /><li> }<br /><li><br /><li> if (isWeixin) {<br /><li> var containerEl = document.getElementById('wechat-web-container')<br /><li> containerEl.classList.remove('hidden')<br /><li> containerEl.classList.add('full', 'wechat-web-container')<br /><li><br /><li> var launchBtn = document.getElementById('launch-btn')<br /><li> launchBtn.addEventListener('ready', function (e) {<br /><li> console.log('开放标签 ready')<br /><li> })<br /><li> launchBtn.addEventListener('launch', function (e) {<br /><li> console.log('开放标签 success')<br /><li> })<br /><li> launchBtn.addEventListener('error', function (e) {<br /><li> console.log('开放标签 fail', e.detail)<br /><li> })<br /><li><br /><li> wx.config({<br /><li> // debug: true, // 调试时可开启<br /><li> appId: '小程序 AppID', // <!-- replace --><br /><li> timestamp: 0, // 必填，填任意数字即可<br /><li> nonceStr: 'nonceStr', // 必填，填任意非空字符串即可<br /><li> signature: 'signature', // 必填，填任意非空字符串即可<br /><li> jsApiList: ['chooseImage'], // 必填，随意一个接口即可 <br /><li> openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名<br /><li> })<br /><li> } else if (isDesktop) {<br /><li> // 在 pc 上则给提示引导到手机端打开<br /><li> var containerEl = document.getElementById('desktop-web-container')<br /><li> containerEl.classList.remove('hidden')<br /><li> containerEl.classList.add('full', 'desktop-web-container')<br /><li> } else {<br /><li> var containerEl = document.getElementById('public-web-container')<br /><li> containerEl.classList.remove('hidden')<br /><li> containerEl.classList.add('full', 'public-web-container')<br /><li> var c = new cloud.Cloud({<br /><li> // 必填，表示是未登录模式<br /><li> identityless: true,<br /><li> // 资源方 AppID<br /><li> resourceAppid: '小程序 AppID', // <!-- replace --><br /><li> // 资源方环境 ID<br /><li> resourceEnv: '云开发环境 ID', // <!-- replace --><br /><li> })<br /><li> await c.init()<br /><li> window.c = c<br /><li><br /><li> var buttonEl = document.getElementById('public-web-jump-button')<br /><li> var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')<br /><li> try {<br /><li> await openWeapp(() => {<br /><li> buttonEl.classList.remove('weui-btn_loading')<br /><li> buttonLoadingEl.classList.add('hidden')<br /><li> })<br /><li> } catch (e) {<br /><li> buttonEl.classList.remove('weui-btn_loading')<br /><li> buttonLoadingEl.classList.add('hidden')<br /><li> throw e<br /><li> }<br /><li> }<br /><li> })<br /><li><br /><li> async function openWeapp(onBeforeJump) {<br /><li> var c = window.c<br /><li> const res = await c.callFunction({<br /><li> name: 'public',<br /><li> data: {<br /><li> action: 'getUrlScheme',<br /><li> },<br /><li> })<br /><li> console.warn(res)<br /><li> if (onBeforeJump) {<br /><li> onBeforeJump()<br /><li> }<br /><li> location.href = res.result.openlink<br /><li> }<br /><li> </script><br /><li> <style><br /><li> .hidden {<br /><li> display: none;<br /><li> }<br /><li><br /><li> .full {<br /><li> position: absolute;<br /><li> top: 0;<br /><li> bottom: 0;<br /><li> left: 0;<br /><li> right: 0;<br /><li> }<br /><li><br /><li> .public-web-container {<br /><li> display: flex;<br /><li> flex-direction: column;<br /><li> align-items: center;<br /><li> }<br /><li><br /><li> .public-web-container p {<br /><li> position: absolute;<br /><li> top: 40%;<br /><li> }<br /><li><br /><li> .public-web-container a {<br /><li> position: absolute;<br /><li> bottom: 40%;<br /><li> }<br /><li><br /><li> .wechat-web-container {<br /><li> display: flex;<br /><li> flex-direction: column;<br /><li> align-items: center;<br /><li> }<br /><li><br /><li> .wechat-web-container p {<br /><li> position: absolute;<br /><li> top: 40%;<br /><li> }<br /><li><br /><li> .wechat-web-container wx-open-launch-weapp {<br /><li> position: absolute;<br /><li> bottom: 40%;<br /><li> left: 0;<br /><li> right: 0;<br /><li> display: flex;<br /><li> flex-direction: column;<br /><li> align-items: center;<br /><li> }<br /><li><br /><li> .desktop-web-container {<br /><li> display: flex;<br /><li> flex-direction: column;<br /><li> align-items: center;<br /><li> }<br /><li><br /><li> .desktop-web-container p {<br /><li> position: absolute;<br /><li> top: 40%;<br /><li> }<br /><li> </style><br /><li> </head><br /><li> <body><br /><li> <div class="page full"><br /><li> <div id="public-web-container" class="hidden"><br /><li> <p class="">正在打开 “填入你的小程序名称”...</p> <!-- replace --><br /><li> <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()"><br /><li> <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span><br /><li> 打开小程序<br /><li> </a><br /><li> </div><br /><li> <div id="wechat-web-container" class="hidden"><br /><li> <p class="">点击以下按钮打开 “填入你的小程序名称”</p> <!-- replace --><br /><li> <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html --><br /><li> <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace --><br /><li> <template><br /><li> <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><br /><li> </template><br /><li> </wx-open-launch-weapp><br /><li> </div><br /><li> <div id="desktop-web-container" class="hidden"><br /><li> <p class="">请在手机打开网页链接</p><br /><li> </div><br /><li> </div><br /><li> </body><br /><li></html></ol><br /><li><font style="background-color:rgb(247, 247, 247)"><font size="4"><font color="#ff0000"><strong>云开发环境 ID在哪？</strong></font></font></font><li><font style="background-color:rgb(247, 247, 247)"><font size="4"><font color="#ff0000"><strong></strong></font></font></font><br /></ul><br /></ul><br /> <h3>版权声明</h3> <p>1、本站所有资源来源于网络搜集和会员分享</p><p>2、本站所有程序仅供大家学习和参考，不得进行商业用途</p><p>3、如果觉得程序还可以、请购买官方正版</p><p>4、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。</p> <p>唯一网址: <a target="_blank" href='https://bbs.zonghengtx.cn/thread-2522-1-1.html' title='静态网站 H5 跳小程序h5跳转小程序'>https://bbs.zonghengtx.cn/thread-2522-1-1.html</a></p>
页:
[1]