H5 jump wechat small program

H5 jump wechat small program

There are two cases:

1. Open H5 in the built-in browser of wechat, and you can adjust the mini program through wechat open label

2. Open H5 in an external browser and use the obtain applets URL Scheme

The VUE3 project uses the wechat open tag WX-open-launch-appellate to realize the app. Click to relink to the blog of wechat appellate _Annie -CSDN blog _Vue to relink to wechat appellate

H5 网 址 WX-open-launch-reappingP 出 处 invalid username? | WeChat open community (qq.com)

openTagList support!!! · Issue #59 · JasonBoy/wechat- JSSDK (github.com)

Get the URL Scheme

Through the server interface or in the applets management background "tools" - "Generate URL Scheme" entry can be obtained to open any page of the applets URL Scheme. It is suitable for opening small programs from SMS, email, and external wechat web pages. The scenario value of opening the applets through URL Scheme is1065.

The generated URL Scheme looks like this:



weixin://dl/business/? t= *TICKET*

IOS supports THE recognition of URL schemes, which can be used to access applets in application scenarios such as SMS.

Android system does not support direct recognition of URL Scheme, so users cannot open applets normally through Scheme. Developers need to use H5 page transfer, and then jump to Scheme to open applets. Examples of redirect codes are as follows:



location.href = 'weixin://dl/business/? t= *TICKET*'

This jump method can be called immediately when the user opens H5 or after the user fires an event.



Copy the code

1. Ensure that the configuration data obtained by wechat is correct

# vue.config.js Note the vue version3.0As follows,2.0In the main. Js Settings



config.module

      .rule("vue")

      .use("vue-loader")

      .tap((options) = > {

        // Modify its options...

        options.compilerOptions = {

          isCustomElement: (tag) = > tag.startsWith("wx-open-launch-weapp"),

        };

        return options;

      });

Copy the code

# main.js  vue2. 0Version of the set

# open label belongs to the custom tag, Vue will give unknown warning labels, can be configured Vue. Config. IgnoredElements to ignore the Vue to open check labels.

app.config.ignoredElements = ["wx-open-launch-weapp"];

Copy the code

# wechat configuration

// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#36

// https://github.com/yanxi-me/weixin-js-sdk

import qs from "qs";

import wx from "weixin-js-sdk";

import { getWxSignature } from "@/api/wx";

import { WX_APP_ID, APP_MAIN_PATH, BRAND_NAME } from "@/config";

const WX_DEBUG = false;

/ * *

* Get wechat signature information from the server

 * @returns {signature, nonceStr, timestamp, appId}

* /

const getSignatureInfo = async function () {

  const url = window.location.href;

  const appId = WX_APP_ID;

  const { data } = await getWxSignature(appId, url);

  return data;

};



/ * *

* wechat SDK initialization

* /

export async function initWeChat() {

  const { signature, nonceStr, timestamp, appId } = await getSignatureInfo();

  wx.config({

    debug: WX_DEBUG,

    appId,

    nonceStr, // Mandatory to generate a random string of signatures

    signature, // Mandatory, signature

    timestamp, // Mandatory to generate the timestamp of the signature

    jsApiList: [

      "updateAppMessageShareData".

      "updateTimelineShareData".

      "onMenuShareTimeline".

      "onMenuShareAppMessage".

      "onMenuShareQQ".

      "onMenuShareQZone".

      "getLocation".

      "openLocation".

].

    openTagList: ["wx-open-launch-weapp"].// wechat open small program open TAB

  });

}



Copy the code

# h5.vue <template> <div class="home"> <wx-open-launch-weapp id="launch-btn" username="gh_xxxx" @launch="handleLaunchFn"  @error="handleErrorFn" @ready="ready" > <! - the template, <div v-is="'script'" type="text/wxtag-template"> <button class=" wx-bTN "> </wx-open-launch-weapp> </div> </template
<script> export default { data() { return {}; }, mounted() {}, methods: { ready(e) { console.log("[ ]-27", e); }, handleLaunchFn(e) { console.log(e); }, handleErrorFn(e) { console.log("fail", e.detail); ,}}}; </script>
Copy the code

conclusion

URL Scheme, simple, compatible with multiple browsers. The development TAB is only applicable when using wechat’s built-in browser.