【详细教程】微信外部打开小程序的三种解决方法 - 云裂变营销网

<html> <head> <title>打开小程序</title> <meta http-equiv=&#34;Content-Type&#34;content=&#34;text/html; charset=utf-8&#34;> <meta name=&#34;viewport&#34;content=&#34;width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1&#34;> <script> window.onerror=e=> { console.error(e) alert(&#39;发生错误&#39;+ e) } </script>  <link rel=&#34;stylesheet&#34;href=&#34;https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css&#34;></link>     <script src=&#34;https://res.wx.qq.com/open/js/jweixin-1.6.0.js&#34;></script>  <script src=&#34;https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js&#34;></script> <script> functiondocReady(fn) { if (document.readyState ===&#39;complete&#39;|| document.readyState ===&#39;interactive&#39;) { fn() } else { document.addEventListener(&#39;DOMContentLoaded&#39;, fn); } } docReady(asyncfunction() { var ua = navigator.userAgent.toLowerCase() varisWXWork=ua.match(/wxwork/i)==&#39;wxwork&#39;varisWeixin=!isWXWork&&ua.match(/micromessenger/i)==&#39;micromessenger&#39;varisMobile=falsevarisDesktop=falseif(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { isMobile=true }else{ isDesktop=true } if(isWeixin) { varcontainerEl=document.getElementById(&#39;wechat-web-container&#39;) containerEl.classList.remove(&#39;hidden&#39;) containerEl.classList.add(&#39;full&#39;,&#39;wechat-web-container&#39;) varlaunchBtn=document.getElementById(&#39;launch-btn&#39;) launchBtn.addEventListener(&#39;ready&#39;,function(e) { console.log(&#39;开放标签 ready&#39;) }) launchBtn.addEventListener(&#39;launch&#39;,function(e) { console.log(&#39;开放标签 success&#39;) }) launchBtn.addEventListener(&#39;error&#39;,function(e) { console.log(&#39;开放标签 fail&#39;, e.detail) }) wx.config({ // debug: true, // 调试时可开启 appId:&#39;小程序 AppID&#39;,//  timestamp:0,// 必填，填任意数字即可 nonceStr:&#39;nonceStr&#39;,// 必填，填任意非空字符串即可 signature:&#39;signature&#39;,// 必填，填任意非空字符串即可 jsApiList: [&#39;chooseImage&#39;],// 必填，随意一个接口即可 openTagList:[&#39;wx-open-launch-weapp&#39;],// 填入打开小程序的开放标签名 }) }elseif(isDesktop) { // 在 pc 上则给提示引导到手机端打开varcontainerEl=document.getElementById(&#39;desktop-web-container&#39;) containerEl.classList.remove(&#39;hidden&#39;) containerEl.classList.add(&#39;full&#39;,&#39;desktop-web-container&#39;) } else{ varcontainerEl=document.getElementById(&#39;public-web-container&#39;) containerEl.classList.remove(&#39;hidden&#39;) containerEl.classList.add(&#39;full&#39;,&#39;public-web-container&#39;) varc=newcloud.Cloud({ // 必填，表示是未登录模式 identityless:true, // 资源方 AppID resourceAppid:&#39;小程序 AppID&#39;,// // 资源方环境 ID resourceEnv:&#39;云开发环境 ID&#39;,//  }) awaitc.init() window.c=c varbuttonEl=document.getElementById(&#39;public-web-jump-button&#39;) varbuttonLoadingEl=document.getElementById(&#39;public-web-jump-button-loading&#39;) try{ awaitopenWeapp(()=>{ buttonEl.classList.remove(&#39;weui-btn_loading&#39;) buttonLoadingEl.classList.add(&#39;hidden&#39;) }) }catch(e) { buttonEl.classList.remove(&#39;weui-btn_loading&#39;) buttonLoadingEl.classList.add(&#39;hidden&#39;) throwe } } }) asyncfunctionopenWeapp(onBeforeJump) { varc=window.c constres=awaitc.callFunction({ name:&#39;public&#39;, data: { action:&#39;getUrlScheme&#39;, }, }) console.warn(res) if(onBeforeJump) { onBeforeJump() } location.href=res.result.openlink } </script> <style> .hidden{ display: none; } .full{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .public-web-container{ display: flex; flex-direction: column; align-items: center; } .public-web-container p{ position: absolute; top: 40%; } .public-web-container a{ position: absolute; bottom: 40%; } .wechat-web-container{ display: flex; flex-direction: column; align-items: center; } .wechat-web-container p{ position: absolute; top: 40%; } .wechat-web-container wx-open-launch-weapp{ position: absolute; bottom: 40%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; } .desktop-web-container{ display: flex; flex-direction: column; align-items: center; } .desktop-web-container p{ position: absolute; top: 40%; } </style> </head> <body> <divclass=&#34;page full&#34;> <divid=&#34;public-web-container&#34;class=&#34;hidden&#34;> <pclass=&#34;&#34;>正在打开 “填入你的小程序名称”...</p> <aid=&#34;public-web-jump-button&#34;href=&#34;javascript:&#34;class=&#34;weui-btn weui-btn_primary weui-btn_loading&#34;onclick=&#34;openWeapp()&#34;> <spanid=&#34;public-web-jump-button-loading&#34;class=&#34;weui-primary-loading weui-primary-loading_transparent&#34;><iclass=&#34;weui-primary-loading__dot&#34;></i></span> 打开小程序 </a> </div> <divid=&#34;wechat-web-container&#34;class=&#34;hidden&#34;> <pclass=&#34;&#34;>点击以下按钮打开 “填入你的小程序名称”</p> <wx-open-launch-weappid=&#34;launch-btn&#34;username=&#34;小程序原始账号 ID（gh_ 开头的）&#34;path=&#34;要跳转到的页面路径&#34;> <template> <buttonstyle=&#34;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;&#34;>打开小程序</button> </template> </wx-open-launch-weapp> </div> <divid=&#34;desktop-web-container&#34;class=&#34;hidden&#34;> <pclass=&#34;&#34;>请在手机打开网页链接</p> </div> </div> </body> </html>云函数 public: 点击下载
新建一个云函数，名为 public，然后将其 index.js 设为以下内容：
在云开发控制台中的设置 -> 权限设置中，将对应开通了静态网站的云环境开启未登录模式访问
在云开发控制台中的云函数 -> 权限设置中，配置安全规则，选择 “允许所有用户访问” 的模板并确认。如果需要更安全的控制，即只让 public 函数开启未登录访问，可参见底部安全规则模板
// 云函数入口文件constcloud=require(&#39;wx-server-sdk&#39;) cloud.init()// 云函数入口函数exports.main=async(event,context)=>{ constwxContext=cloud.getWXContext() switch(event.action) { case&#39;getUrlScheme&#39;: { returngetUrlScheme(event.options) } } return&#39;action not found&#39;}asyncfunctiongetUrlScheme(options) { returncloud.openapi.urlscheme.generate({ jumpWxa: { path:&#39;/page/component/index&#39;,//  query:&#39;&#39;, }, // 如果想不过期则置为 false，并可以存到数据库 isExpire:true, // 一分钟有效期 expireTime:parseInt(Date.now()/1000+60), }) }可选的进阶的云函数安全规则模板（只放开了让 public 云函数支持未登录访问）：{ &#34;*&#34;:{ &#34;invoke&#34;:&#34;auth != null&#34; }, &#34;public&#34;:{ &#34;invoke&#34;:true } }

复制代码