方法一:通过服务端接口或在小程序管理后台「生成 URL Scheme」
在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme
生成的 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>