Several implementation methods of H5 page jumping to applet

The first method: through the URL Scheme

The URL Scheme to open any page of the applet can be obtained through the server interface or in the "Tools" - "Generate URL Scheme" entry of the applet management background

Example of use

The server configures the interface, and the client calls the interface to pass in the path of the target applet

location.href=‘接口返回的openlink’

The second method: Embedding WeChat tags in custom H5 pages

This kind of custom H5 page is suitable for running in the WeChat environment. It integrates the jump button into the self-developed H5 application. After clicking the button, it jumps to the specified applet page and requires js-sdk-1.6.0 or above to support it.

			安装 js-sdk(最好是指定1.6.0版本)
npm install weixin-js-sdk@1.6.0

Add openTagList (open tag list) in wx.config, which is usually configured in the App file

wx.config({
    
    
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,需要使用的JS接口列表
  openTagList: ["wx-open-launch-weapp"] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});

openTagList (open tag list) currently supports configuration

  • wx-open-launch-weapp - refers to the H5 jump applet
  • wx-open-launch-app - refers to the H5 jump app
  • wx-open-subscribe - service account subscription notification button
  • wx-open-audio - Audio playback

For usage examples, please refer to WeChat official documentation for details .

<div class="module-wrap">
    <wx-open-launch-weapp
      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>
</div>

username: must be the original id of the redirected applet, starting with gh_;
path: the page path of the redirected applet;

Points to note

To use this function, it must be a non-personal subject authentication applet.
You can only skip the [official version] applet that has been released, not the [trial version] or [development version].
path attribute, the official document is generally an example such as pages/home/index?user=123&action=abc , but the actual use may report that the page does not exist, and you need to add the .html suffix after the declared page path, such as pages/home/ index.html .

The third method: directly use the short link (URL Link) of WeChat

This is generally applicable to directly generating links without additional development of H5 pages, and users can jump to the specified applet page by opening the link.

After opening the link, there will be WeChat’s default H5 transfer page (it is also possible to customize the H5 transfer page). The current version already supports the default automatic jump applet, which does not require user confirmation, which is very good.

How to get URL Link

The URL link to open any page of the applet can be obtained through the server interface

Notice

In the interface of adjusting WeChat to generate URL Link, the parameter path only recognizes the official version. Although there is an environment variable of env_version, it is useless (that is to say, the set path must already exist in the official version, otherwise it will report: invalid weapp pagepath ).
The generated URL Link, that is,
the short link https://wxaurl.cn/pFawq35qbfd will only jump to the [official version] when opened in the WeChat environment, even if your env_version is set to [experimental version] or [development version], It needs to be opened in an external browser to jump to the specified version.

Guess you like

Origin blog.csdn.net/qq_42756356/article/details/131633094