Record vue3 (vue2 is also generic) in WeChat official account web development, jump WeChat small program trample:

Step 1: use wechat JSSDK

Official description of wechat JSSDK , it is estimated that those who found this article have read the document.
Not to mention, in this step, the back-end and front-end have their own things to do. I explain their respective responsibilities:

Front end responsibility

Import the js file directly in index Reference in HTML:

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

After the introduction, your current browser environment will have a global variable Wx (which can be accessed directly by Wx, or windows.wx and globalThis.wx). However, this variable cannot be used immediately. You must pass the path of the current web page (excluding the # number and the subsequent path, including the slash / in front of the # number) to the back end, and the back end will return your appId timestamp, nonceStr, signature, and then call Wx according to these parameters Config to initialize Wx:

wx.config({
  debug: true, 
  appId: '', // Back end things
  timestamp: '', // Back end things
  nonceStr: '', // Back end things
  signature: '',// Back end things
  jsApiList: [] ,// The required capabilities, such as taking photos, obtaining information, etc., are not required for jump applets
  openTagList:[] // The tags that can be used, that is, HTML tags, are just customized by wechat.
});

What labels are there, Look here.
Since the jump applet needs a wechat custom tag Wx open launch web app, the openTagList in the above configuration is as follows:

openTagList:[`wx-open-launch-weapp`]

After configuration, it can be used in wechat web pages

Back end responsibility

Let me briefly explain:
Ensure that wechat development is a service number, not a subscription number, because only the service number can jump to the applet.
First, the back end Bind domain name To obtain access credentials from wechat platform_ Token, access the wechat platform again according to this credential to get the jsapi_ticket.
Then, according to the path from the front end, it is based on the JS API_ Ticket is encrypted. For encryption, see Official description of wechat JSSDK.
Note that the web pages developed by vue are basically single page applications, such as http://aa.baidu.com/#/aa , the path required by the backend is: http://aa.baidu.com/ Note that the last /, which is the pit to step on, or the front-end configuration will fail. Therefore, a single page application can also write a dead path.
If the path is dead, the front end cannot be developed locally, for example http://localhost:8080/#/home This, that front end will also fail. Therefore, you can penetrate the intranet and proxy the intranet address of the front end to access and debug in the form of domain name.

Step 2: jump applet

After wx configuration, you can use the built-in HTML tag of wechat. The official example is as follows:

<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">Open applet</button>
  </script>
</wx-open-launch-weapp>

In vue2, you can render with v-html. However, there will be compilation errors in vue3, because script and style are not allowed in Vue's template. The Wx open launch web app will have warnings, but it can be rendered.
We need to vue skip rendering the internal script and style:

<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">Open applet</button>
  </div>
</wx-open-launch-weapp>

v-is renders it to the specified label, but Vue version 3.1.0 is obsolete , replace v-is with is. For example, the above style can be written in higher version vue3:

<div is="style">.btn { padding: 12px }</div>

common problem:

• The style does not appear, and the set div or button does not appear. Pay attention to the above setting style="display: block", which is necessary, otherwise the default display: none will be generated by its rendering
• There is no response when clicking the button. Pay attention to Wx After config, the following information will be output on the console:Note that there is only jsApiList, not openTagList, or just an empty array without ["Wx open launch Web"]. This function is available only for the service number, but not for the subscription number. Moreover, the applet id of the test number cannot be used. It must be the published id