需求:微信浏览器内打开app分享的文章,要出现“用app打开”的按钮,点击即跳到自己的APP,并根据参数执行相应的操作。
下面开始踩坑之旅行:
首先需要有一个微信公众号(类型必须是服务号,订阅号不行,解决办法:再注册一个服务号)
注册并审核通过后,进入https://open.weixin.qq.com/

image.png
image.png

微信官方示例代码:
https://www.weixinsxy.com/jss...
备注:链接中包含php、java、nodejs以及 python 的示例代码供第三方参考,第三方切记要对获取的 accesstoken 以及jsapi_ticket进行缓存以确保不会触发频率限制

我的案例:

<?php
require_once "jssdk.php"; //从下载的官方示例代码获取
// 注意,由于curl版本的不同,上面这个jssdk.php的某一句要改一下:
//原句curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
//改成curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2);否则可能不工作

//注意:这里要填公众服务号的appID以及appSecret
//在https://mp.weixin.qq.com/ 功能设置、基本配置-公众号开发信息中获取
$jssdk = new JSSDK("wxxxxxxxbb5", "xxxxxxxxxxx");
$signPackage = $jssdk->GetSignPackage();
?>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<script>

wx.config({

debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
  // 所有要调用的 API 都要加到这个列表中
  //我没用到 所以留空
],
openTagList: ['wx-open-launch-app']

});

wx.ready(function () {

// 在这里调用 API 可留空

});

</script>
<!--注意:wx-open-launch-app标签里的appid是所需跳转到的你的移动应用的appid,不是公众号服务号的-->
<wx-open-launch-app style="position:fixed; z-index: 999; top:10em; right:3px; " id="launch-btn" appid="wxxxxxxxxxx52" extinfo="works_id=<?php echo $works_id ?>">
<script type="text/wxtag-template">

<style>.btn {width:100%; height:1.5em; padding: 3px;   border-radius: 0.6em;  color:#fff;  background: #dc143c;   }</style>
<div class="btn">在App内打开</div>

</script>
</wx-open-launch-app>

<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {

console.log('success');

});
btn.addEventListener('error', function (e) {

console.log('fail', e.detail);

});
</script>


风干的果子
6 声望1 粉丝

引用和评论

0 条评论