vue 微信公众号网页开发 跳转小程序 踩坑
<p>记录vue3（vue2 也通用）在微信公众号网页开发中，跳转微信小程序的踩坑：</p><h2 id="步骤一使用微信jssdk">步骤一：使用微信JSSDK</h2>
<p>微信JSSDK官方说明，估计找到这篇文章的都看了文档。<br>
不多说，在这个步骤中，后端和前端都有各自的事情做，我分别讲解各自的责任：</p>
<h3 id="前端责任">前端责任</h3>
<p>引入js文件，直接在 index.html 中引用就成：</p>
<pre><code class="language-html"><script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</code></pre>
<p>引入过后，你当前的浏览器环境会有一个全局变量<code>wx</code>（直接<code>wx</code>访问，或者<code>window.wx</code>、<code>globalThis.wx</code>都是可以的），但是这个变量不能马上用，必须你将当前网页的路径（不包括#号以及后面的路径，包括#号前面的那个斜杠 / ）传给后端，后端根据你传的路径返回给你 appId、timestamp、nonceStr、signature，然后根据这些参数调用 <code>wx.config</code>，进行<code>wx</code>的初始化：</p>
<pre><code class="language-js">wx.config({
debug: true, // 调试的时候打开
appId: '', // 后端的事情
timestamp: '', // 后端的事情
nonceStr: '', // 后端的事情
signature: '',// 后端的事情
jsApiList: [] ,// 需要的能力，比如拍照、获取信息等等，跳转小程序不需要
openTagList:[] // 能够使用的标签，也就是HTML标签，只不过是微信自定义的。
});
</code></pre>
<p>有哪些标签，看这里。<br>
由于跳转小程序需要一个微信自定义的标签<code>wx-open-launch-weapp</code>，所以上面的配置中的 openTagList 我是这样的：</p>
<pre><code class="language-js">openTagList:[`wx-open-launch-weapp`]
</code></pre>
<p>配置后，就可以在微信中网页中使用了</p>
<h3 id="后端责任">后端责任</h3>
<p>我简单讲解：<br>
保证微信开发是服务号，而不是订阅号，因为只有服务号才能小程序跳转。<br>
首先得后端绑定域名，向微信平台获取访问凭证<code>access_token</code>，根据这个凭证再次访问微信平台得到<code>jsapi_ticket</code>。<br>
然后，根据前端传来的路径基于<code>jsapi_ticket</code>进行加密，加密请看微信JSSDK官方说明。<br>
注意，vue开发的网页，基本都是单页面应用，比如 <code>http://aa.baidu.com/#/aa</code>，那么后端需要的路径就是：<code>http://aa.baidu.com/</code>，注意需要最后的<code>/</code>是需要的，这是我踩的坑，不然前端配置初始化会失败。所以，单页面应用写死路径也可以。<br>
还有路径写死的话，前端就不能在本地开发了，比如以<code>http://localhost:8080/#/home</code>这种，那前端也会失败。所以可以内网穿透，并代理前端的内网地址，将代理的域名添加白名单，然后以域名的形式访问进行调试，就可以了。</p>
<h2 id="步骤二跳转小程序">步骤二、跳转小程序</h2>
<p><code>wx</code>配置后，就可以使用微信内置的HTML标签了，官方的示例是这样的：</p>
<pre><code class="language-html"><wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</code></pre>
<p>在vue2中可以用v-html渲染。但是在vue3中会编译出错，因为在 vue 的 template 中，不允许 script 和 style 出现。而 wx-open-launch-weapp 会有警告，但是可以渲染。<br>
我们需要vue跳过对内部 script 和 style 的渲染：</p>
<pre><code><wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<div v-is="script" type="text/wxtag-template" style="display: block">
<div v-is="style" style="display: block">.btn { padding: 12px }</div>
<button class="btn">打开小程序</button>
</div>
</wx-open-launch-weapp>
</code></pre>
<p>v-is 会将其渲染成指定标签,但是vue 3.1.0版本已经废弃，将 v-is 替换成 is 就可以了,比如上面的样式在高版本的vue3中可以这么写：</p>
<pre><code><div is="style">.btn { padding: 12px }</div>
</code></pre>
<p>常见问题：</p>
<ul>
<li>样式不出现，设定的div或者按钮不出现，注意上面的设置<code>style="display: block"</code>，这个是必须的，不然其渲染生成的会默认<code>display: none</code></li>
<li>按钮点击没有反应，注意<code>wx.config</code>后会在控制台输出信息：<img src="https://img2020.cnblogs.com/blog/1822882/202201/1822882-20220110111303361-153867672.png" alt="" loading="lazy">，注意到只有 jsApiList，而没有 openTagList ，或者只是一个空数组，没有<code>["wx-open-launch-weapp"]</code>。注意这个功能只有服务号才有，订阅号是没有的。</li>
<li>不能用测试号小程序id，必须已经正式发布的小程序id</li>
</ul><br><br>
来源：https://www.cnblogs.com/panshaojun/p/15783742.html
頁:
[1]