赞
踩
核心内容:wx-open-launch-app标签
首先在需要使用的h5页面引入
<script src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
引入之后在页面内使用标签
- <wx-open-launch-app id="openApp" appid="所需跳转的移动应用的AppID" @click='launchClick' @error="waitJump">
- <script type="text/wxtag-template">
- <style> </style>
- <view class="btnBox">
- <view class="title">打开APP</view>
- </view>
- </script>
- </wx-open-launch-app>
使用之后查看页面发现没有出现按钮,那么马上就要进入第二大重点了
页面内全局使用
const jweixin = require('jweixin-module');
- getConfig(res) {
- jweixin.config({
- debug: true, //调试模式
- appId: '', //必填,公众号的唯一标识
- timestamp: res.timestamp,
- nonceStr: res.noncestr,
- signature: res.signature,
- jsApiList: [
- 'checkJsApi',
- 'onMenuShareTimeline',
- 'onMenuShareAppMessage',
- 'onMenuShareQQ',
- 'onMenuShareWeibo',
- 'hideMenuItems',
- 'chooseImage',
- ],
- openTagList: ['wx-open-launch-app']
- });
- },

参考概述 | 微信开放文档文档,拿到上述参数,最好由后端返回
调用之后发现跨域,ok,进入第三步
在微信服务号里设置IP白名单以及JS接口安全域名,并且关联被打开的APPID
设置好之后用设置的安全域名进行调试,这样就不跨域了
全部设置好之后并且接口调通之后你会发现,wx-open-launch-app里的东西已经展示在页面上了,剩下的就是点击,如果APPID配置正确并且手机安装了需要打开的APP的话,点击标签是可以正常打开的,那么没有安装或打开失败的情况下需要有备用方案,我们的方案是打开应用市场
wx-open-launch-app 标签有@error=""属性,这个就是打开失败的回调
- waitJump() {
- if (uni.getSystemInfoSync().platform === 'android') {
- window.location.replace(``) //安卓备用方案
- } else {
- window.location.replace(``) //IOS备用方案
- }
- },
顺便一提:真机查看的时候打开链接是无效的,只能通过分享卡片才能打开
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。