方法一:通过服务端接口或在小程序管理后台「生成 URL Scheme」

在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme

H5 跳转Android schema h5 跳转小程序 路径_开发语言


H5 跳转Android schema h5 跳转小程序 路径_开发语言_02


生成的 URL Scheme 如下所示:

weixin://dl/business/?t=1qFTj3VcOqc

开发者需要使用 H5 页面中转,再跳转到 Scheme 实现打开小程序,跳转代码如下:

location.href = 'weixin://dl/business/?t=1qFTj3VcOqc'

代码:

<template>
  <div></div>
</template>

<script>
export default {
  name: "shareLink",
  components: {},
  computed: {},
  data() {
    return {
      openlink: "weixin://dl/business/?t=txY2fV8J76h",
    };
  },
  created() {
    // this.openlink = "weixin://dl/business/?t=Oa8UQlNZnGc";
  },
  mounted() {
    this.judge();
  },
  methods: {
    /**
     *  判断运行环境
     */
    isWorkClient() {
      var ua = navigator.userAgent.toLowerCase();
      var isWXWork = ua.match(/wxwork/i) == "wxwork";
      var isWeixin = !isWXWork && ua.match(/micromessenger/i) == "micromessenger";
      var isMobile = false;
      var isDesktop = false;
      if (
        navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i
        )
      ) {
        isMobile = true;
      } else {
        isDesktop = true;
      }
      if (isWeixin) {
      } else if (isDesktop) {
      } else if (isWXWork) {
        // 判断是否是企微环境
        return true;
      } else {
      }
      return false;
    },
    judge() {
      this.jump();
    },
    jump() {
      if (this.isWorkClient()) {
        // 企微环境直接跳详情
        this.$router.push({
          path: "/",
          name: "toDoPage",
        });
      } else {
        // 跳转小程序
        location.href = this.openlink;
      }
    },
  },
};
</script>

参考:
服务端API:URL Scheme /generate开放能力 /获取小程序链接 /获取 URL Scheme

方法二:开放标签打开

根据微信的开放标签wx-open-launch-weapp可以实现从h5页面跳转小程序的需求

安装weixin-js-sdk 版本要求1.6.0

npm install weixin-js-sdk
wx.config({
        debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: appId,         // 必填,公众号的唯一标识,填自己的!
        timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
        nonceStr: nonceStr,   // 必填,生成签名的随机串
        signature: signature, // 必填,签名,见附录1
        jsApiList: [
          'wx-open-launch-weapp',
        ],
        openTagList: ["wx-open-launch-weapp"] // 跳转小程序时必填
      })
      let _this = this
      wx.ready(function (res) {
        console.log(res)
      })
      wx.error(function (res) {
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
        console.log(res)
      });
<wx-open-launch-weapp
            class="openweapp"
            id="launch-btn"
            username="gh_c001fa831731"
            path="pages/index/index.html"
          >
            <script type="text/wxtag-template">
              <style>.btn { padding: 12px;opacity:0 }</style>
    <button class="btn">打开小程序</button>
  </script>
          </wx-open-launch-weapp>
mounted() {
    var btn = document.getElementById("launch-btn");
    btn.addEventListener("launch", function (e) {
      console.log("success");
    });
    btn.addEventListener("error", function (e) {
      alert("小程序打开失败");
      console.log("fail", e.detail);
    });
  },

vue会显示wx-open-launch-weapp组件未注册
在main.js中加入

Vue.config.ignoredElements = ['wx-open-launch-weapp']


应用场景:

企微分享H5到微信群里,企微打开进入H5,微信打开进入小程序(通过后端获取的短期有效的 URL Scheme )

企微home.vue

async getOpenlink() {
      let self = this;
      let param = {
        id: this.ID,
        // groups: "",
      };
      try {
        let { retcode, explanation, openlink, creattime } =
          await API.knowledgeGetOpenlink(param);
        if (retcode === 0) {
        // 调用企微分享功能
          wx.invoke(
            "shareAppMessage",
            {
              title: self.data.sharetitle, // 分享标题
              desc: self.data.sharedesc, // 分享描述
              // link: self.data.shareurl, // 分享链接
              link:
                location.href.split("#")[0] +
                "#/shareLink?id=" +
                self.ID +
                "&creattime=" +
                creattime +
                "&openlink=" +
                openlink,
            },
            function (res) {
              if (res.err_msg == "shareAppMessage:ok") {
                self.transToGroup();
              }
            }
          );
        } else {
          this.$vux.toast.show({
            text: explanation,
            type: "text",
            width: "60%",
            isShowMask: true,
            position: "middle",
          });
        }
      } catch (error) {}
    },

H5中间页share-link.vue

<template>
  <div></div>
</template>

<script>
import * as API from "@/api";

export default {
  name: "shareLink",
  components: {},
  computed: {},
  data() {
    return {
      creattime: 0,
      id: "",
      openlink: "",
      type: "",
    };
  },
  created() {},
  mounted() {
    this.creattime = this.$route.query.creattime;
    this.id = this.$route.query.id;
    this.openlink = this.$route.query.openlink;
    this.type = this.$route.query.type;
    this.judge();
  },
  methods: {
    /**
     *  判断运行环境
     */
    isWorkClient() {
      var ua = navigator.userAgent.toLowerCase();
      var isWXWork = ua.match(/wxwork/i) == "wxwork";
      var isWeixin =
        !isWXWork && ua.match(/micromessenger/i) == "micromessenger";
      var isMobile = false;
      var isDesktop = false;
      if (
        navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i
        )
      ) {
        isMobile = true;
      } else {
        isDesktop = true;
      }
      if (isWeixin) {
      } else if (isDesktop) {
      } else if (isWXWork) {
        // 判断是否是企微环境
        return true;
      } else {
      }
      return false;
    },
    /**
     * 判断下creattime 跟当前时间 是否30天以内
     * 有效:
     * 无效:
     * noticeid 重新获取 openlink
     */
    judge() {
      let currentTime = new Date().getTime();
      if (currentTime - this.creattime > 30 * 24 * 60 * 60 * 1000) {
        this.getData();
      } else {
        this.jump();
      }
    },
    jump() {
      if (this.isWorkClient()) {
        // 企微环境直接跳详情
        this.$router.push({
          path: "/",
          name: "toDoPage",
        });
      } else {
        // 跳转小程序
        location.href = this.openlink;
      }
    },
    async getData() {
      let param = {
        page: "pages/home/home",
        type: this.type,
      };
      this.$vux.loading.show();
      try {
        let { openurl, retcode, explanation } = await API.getAppShortUrl(param);
        if (retcode === 0) {
          this.openlink = url;
          this.jump();
        } else {
          this.$vux.toast.show({
            text: explanation || "系统繁忙,请稍后重试",
            type: "text",
            width: "60%",
            isShowMask: true,
            position: "middle",
          });
        }
      } catch (error) {
        this.$vux.toast.show({
          text: "系统繁忙,请稍后重试",
          type: "text",
          width: "60%",
          isShowMask: true,
          position: "middle",
        });
      } finally {
        this.$vux.loading.hide();
      }
    },
  },
};
</script>