跳转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, //是否为iPadwebApp:  u.indexOf('Safari')  ==  -1, //是否为web应用程序，没有头部与底部weixin:  u.indexOf('MicroMessenger')  >  -1, //是否为微信浏览器qq: u.match(/\sQQ/i) !== null, //是否QQSafari:  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 {@Resourceprivate 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_token2.通过 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);// appIdString 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;}
}

微信内部跳转App：wx-open-launch-app相关推荐

模拟微信内部跳转至微信支付
模拟微信内部跳转至微信支付前言微信支付步骤介绍具体代码前言微信支付比支付宝或者其它方式要来的更复杂一些,但在我这个项目中,大部分的工作量后台都帮我处理好了,实际上只需要调用两个接口,weCh ...
微信直接跳转到手机默认浏览器下载APP的实现方式
很多朋友的APP推广链接需要在微信中进行的网页宣传.传播.下载等等,但是各位朋友一定发现了微信中是屏蔽掉了APP的下载链接的.但是微信最为一个最大的社交平台,为了自身的利益,屏蔽掉了所有APK的下载链 ...
微信分享和微信H5跳转到APP开放标签wx-open-launch-app使用及样式设置
H5.微信.App唤端相关一.微信分享二.浏览器H5跳转到APP 三.微信H5跳转到APP 一.条件说明二.文档三.重要的设置四.注意点五.样式设置一.微信分享参看:微信分享:后端参数 ...
h5-浏览器点击跳转微信小程序或微信内部广告页（微信浏览器）跳转小程序的实现方法。
一.微信内部浏览器使用<微信开放标签>唤起微信小程序官方开发文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/ ...
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...
ios微信组件跳转_IOS如何从微信中跳转APP
如果不考虑屏蔽,跳转APP的方式主要有: url scheme 这是一种ios与Android都支持的叫做schema的协议.至于具体怎么设置,交给IOS或者安卓开发人员吧. 这种方式在除微信外的大部 ...
ios微信组件跳转_在iOS9中突破微信App跳转的限制
前言微信的普及程度相信不需要多言了,稍微回忆一下自己上一条短信是什么时候,上一条微信又是什么时候就知道了. 因此通过微信传播也是绝大部分App的一个重要手段,但是在iOS7微信出的新版本,就开始不允 ...
微信链接跳转浏览器 H5实现APP下载功能实现方法
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载. 可以参考:微信打开网址添加在浏览器中打开提示 ...
微信链接跳转浏览器实现微信中直接下载棋牌游戏类APP功能
需求分析在微信的使用率已经高居各社交APP榜首的同时,微信成为了我国移动流量最大的平台之一.在此趋势的引导下,很多的商家.个体户便抓住了这一机遇,利用微信这个渠道来做产品的推广.以及营销方案宣传.但 ...

微信内部跳转App：wx-open-launch-app

跳转App：wx-open-launch-app

前端需要的准备

后端需要的准备

微信内部跳转App：wx-open-launch-app相关推荐

最新文章

热门文章