微信内部跳转App：wx-open-launch-app
阚英武
跳转App：wx-open-launch-app
以下是实际开发中实现并上架验证过的，但做之前需要你了解对接微信开放文档
以下主要解决难点注意点：
- 请求后台 返回wx.config所需配置
- 对接weixin4j时需要多引入一个依赖
- 属性配置文件中不用的也必须写上
- 获取临时票据，需要你的url已经在微信JS接口安全域名下
- 微信开放标签 wx-open-launch-app的使用，只有在微信中才显示
- 把参数赋值给标签的extinfo属性，微信官网并没有给出赋值方式，这里是解析了解这个开放标签的结构后，进行的赋值操作。
- app端不做赘述，需要你自己根据Android 、iOS、Flutter端等对接接收，依旧可以参考此处开放文档
App侧获取开放标签传递的 extinfo 数据
请确保已经按照上述步骤接入 OpenSDK 并验证成功接入
前端需要的准备
<!-- 第一步换取配置信息 -->
<script>
// 请求后台 返回wx.config所需配置
$.ajax({
url: "/rest/open/app/config",
type: "POST",
data: {
url:window.location.href
},
async: false,
dataType:'json',
success: function (data) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: data.appId, // 必填，公众号的唯一标识
timestamp:data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名
jsApiList: ['chooseImage'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] 打开app
});
}
});
wx.ready(function() {
wx.checkJsApi({
jsApiList: ['wx-open-launch-app'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function (res) {
},
fail: (err) => {
console.log("微信繁忙，请稍后再试");
}
})
});
wx.error(function (err) {
console.log("微信繁忙，请稍后再试");
});
</script>
<!-- 第二步 判断是在什么浏览器打开 -->
<script>
let getMobelType = GetMobelType();
function GetMobelType() {
let browser = {
versions: function() {
let u = window.navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
Alipay: u.indexOf('Alipay') > -1, //支付宝
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
//iPhone: u.match(/iphone|ipod|ipad/),//
iPad: u.indexOf('iPad') > -1, //是否为iPad
webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否为微信浏览器
qq: u.match(/\sQQ/i) !== null, //是否QQ
Safari: u.indexOf('Safari') > -1,
///Safari浏览器,
};
}()
};
return browser.versions;
}
</script>
<!-- 第三步 获取点开的url路径 截取参数，比如获取 商品id，再把商品id赋值给微信标签中的extinfo属性传给app，app端接收到后跳转到对应商品页 -->
<script>
let tempParam = window.location.search;
let theRequest = {};
if (tempParam.indexOf("?") !== -1) {
let str = tempParam.substr(1);
strs = str.split("&");
for(let i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
let productId = theRequest["product_id"];
//alert(productId);
document.getElementById("launch-btn").attributes.getNamedItem("extinfo").nodeValue = productId;
</script>
<!-- wx-open-launch-app 微信
标签， extinfo 要传的参数 appid 要唤醒的appid -->
<main>
<div class="weixinStyle">
<wx-open-launch-app id="launch-btn" appid="wx123xxxxxxxxxxx" extinfo="-1">
<script type="text/wxtag-template">
<button style="color: white;width: 162px;height: 50px;background-color: #FF286F;border-radius: 28px;border: none;font-size: 18px;">APP内打开</button>
</script>
</wx-open-launch-app>
</div>
</main>
后端需要的准备
这里引用weixin4j 获取微信配置
注：单纯的引入weixin4j-spring-boot-starter
使用时会报错确实xx，后来加了作者好友询问后了解的官方并没有写，这里需要多引入weixin4j这个依赖
第一步
<dependency>
<groupId>org.weixin4j.spring.boot</groupId>
<artifactId>weixin4j-spring-boot-starter</artifactId>
<version>2.0.0</version>
</dependency>
<dependency>
<groupId>org.weixin4j</groupId>
<artifactId>weixin4j</artifactId>
<version>0.1.6</version>
</dependency>
第二步
#公众号配置
weixin4j.config.appid=wxxxxxxxxxxxxxxxxxxxxxx
weixin4j.config.secret=0axxxxxxxxxxxxxxxxxxxxx
#商户配置(即使不用也得把属性加上，没办法2.0.0支持支付组件)
weixin4j.payConfig.mchId=
weixin4j.payConfig.mchKey=
weixin4j.payConfig.certPath=
weixin4j.payConfig.certSecret=
第三步
@RestController
public class WXOpenAppController {
@Resource
private WeixinTemplate weixinTemplate;
@RequestMapping(value = "/rest/open/app/config", method = RequestMethod.POST)
public Map<String, String> wxConfig2(HttpServletRequest request, @RequestParam Map<String, Object> params) throws WeixinException {
/*
* jsapi_ticket 调用js的临时票据 通过access_token来获取
noncestr 生成签名的随机串
timestamp 时间戳
* signature 签名
1.先获取 access_token
2.通过 access_token 请求 jsapi_ticket
* */
Map<String, String> ret = new HashMap<>();
Ticket jsApiTicket = weixinTemplate.getJsApiTicket();
String url = (String) params.get("url");
// 随机字符串
String nonce_str = UUID.randomUUID().toString();
// 时间戳
String timestamp = Long.toString(System.currentTimeMillis() / 1000);
// 签名
String signature = SignUtil.getSignature(jsApiTicket.getTicket(), nonce_str, timestamp, url);
// appId
String appId = weixinTemplate.getAppId();
ret.put("url", url);
ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);
ret.put("appId", appId);
return ret;
}
}
类似资料：