H5跳转微信小程序

H5跳转微信小程序

分两种情况：

1.微信内置浏览器打开H5，可以通过微信开放标签调整小程序

2.外部浏览器打开H5，可以使用获取小程序 URL Scheme

vue3项目中使用微信开放标签wx-open-launch-weapp实现点击跳转到微信小程序_Annie的博客-CSDN博客_vue项目跳转到微信小程序

公众号H5 网页 wx-open-launch-weapp 提示 不合法的username? | 微信开放社区 (qq.com)

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

获取 URL Scheme
通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。
生成的 URL Scheme 如下所示：

weixin://dl/business/?t= *TICKET*
iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'
该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。

1.微信获取相关配置数据 需要正确

# vue.config.js  注意vue的版本  3.0的如下，2.0 在main.js 设置

config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        // 修改它的选项...
        options.compilerOptions = {
          isCustomElement: (tag) => tag.startsWith("wx-open-launch-weapp"),
        };
        return options;
      });

# main.js  vue2.0 版本设置
# 开放标签属于自定义标签，Vue会给予未知标签的警告，可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。
app.config.ignoredElements = ["wx-open-launch-weapp"];

# 微信配置
// 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;
/**
 * 从服务器 获取微信签名信息
 * @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;
};

/**
 * 微信SDK 初始化
 */
export async function initWeChat() {
  const { signature, nonceStr, timestamp, appId } = await getSignatureInfo();
  wx.config({
    debug: WX_DEBUG,
    appId,
    nonceStr, // 必填，生成签名的随机串
    signature, // 必填，签名
    timestamp, // 必填，生成签名的时间戳
    jsApiList: [
      "updateAppMessageShareData",
      "updateTimelineShareData",
      "onMenuShareTimeline",
      "onMenuShareAppMessage",
      "onMenuShareQQ",
      "onMenuShareQZone",
      "getLocation",
      "openLocation",
    ],
    openTagList: ["wx-open-launch-weapp"], // 微信打开小程序开放标签
  });
}

# h5.vue
<template>
  <div class="home">
    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxx"
      @launch="handleLaunchFn"
      @error="handleErrorFn"
      @ready="ready"
    >
      <!-- template里，直接script 会报错 --->
      <div v-is="'script'" type="text/wxtag-template">
        <button class="wx-btn">跳转小程序</button>
      </div>
    </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>

总结

用URL Scheme方式，简单，兼容多个浏览器。而开发标签只适用用微信内置浏览器的情况。