怎么微信浏览器里打开APP

最近在做一个需求，希望在微信浏览器里打开 h5 页面，然后直接唤起自家的 APP。搜索一番，发现微信早在 2020 年就开放一个标签，用于打开 APP，再也不需要干儿子了。

没有太多研究时间，大致说下逻辑，备用，代码仅供参考。

官方文档

绑定域名登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。
引入 JS 文件 import wx from 'weixin-js-sdk';
通过 config 接口注入权限验证配置并申请所需开放标签

wx.config({ openTagList: ['wx-open-launch-app'] }); // 需要使用的开放标签列表，其他配置跟别的微信接口差不多，不赘述 ;
复制代码

vue 文件中使用的话，需要再main.js那边加标签忽略Vue.config.ignoredElements = ['wx-open-launch-app'];
这边以 vue 为例，将唤起这种按钮封装成组件，以备之后使用

唤起 app 的按钮，必须使用微信的开放标签，这里需要APP端和微信申请APPID，作为标签参数，同时需要extInfo，是跳转所需额外信息，如果是首页的话，extInfo可以直接是xx://
如果页面需要再浏览器打开，那么需要兼容浏览器的情况
为了方便，一般写一个盒子，浏览器的按钮先写好，然后微信的按钮定位在其上就好，如果是微信，点的就是微信按钮，如果不是点的就是浏览器按钮
浏览器跳转打开 APP 的话，直接用下call-lib库，封装了细节，使用便捷

<template><div><div class="btn-box" style="position:relative"><div class="btn" @click="callApp" :style="btnStyle"><slot /></div><!-- 微信环境里，微信标签按钮 定位在普通按钮上 --><wx-open-launch-app v-if="isInWx" id="launch-btn" :appid="config.appId" :extinfo="config.extinfo" @launch="getApp" @error="errorOpen" style="'position: absolute; top: 0; left: 0;right:0; bottom: 0; z-index: 1000;'" ><script type="text/wxtag-template"><div class='wx-btn' style="width:100%; height:100%;"></div></script></wx-open-launch-app></div></div>
</template>
<script>
import axios from 'axios';
import wx from 'weixin-js-sdk';
import CallApp from 'callapp-lib';
export default {name: 'btnOfCallAppInWx',props: {// 属性appId extinfo scheme package appstore yingyongbao downloadPage fallback wxConfigApiconfig: Object,btnStyle: Object | String,},data() {return {isInWx: window.navigator.userAgent.toLowerCase().includes('micromessenger'),};},created() {this.setWxConfig();this.initCallApp();},methods: {async setWxConfig() {const resApi = await axios().get(wxConfigApi, {params: { url: location.href.split('#')[0] },});if (!resApi.data) return;const { appId, timestamp, nonceStr, signature } = resApi.data.data;wx.config({ debug: true, appId, timestamp, nonceStr, signature, jsApiList: [], openTagList: ['wx-open-launch-app'], });},initCallApp() {const { scheme, package, appstore, yingyongbao, fallback } =this.props.config;this.callLib = new CallApp({ scheme: { protocol: scheme }, intent: { package, scheme }, appstore, yingyongbao, timeout: 4500, fallback, });},// 浏览器打开appcallApp() {this.callLib.open({ path: this.config.extinfo });},getApp() {console.log('success');},// 不能打开app的话，跳到下载页面，这个是通用的h5介绍的下载页面，这样的话略微友好errorOpen() {location.href = this.config.downloadPage;},},
};
</script>
复制代码

使用组件

引入，传入配置项就好

import BtnOfCallAppInWx from '@/components/BtnOfCallAppInWx';
// <btn-of-call-app-in-wx :config="{appId,extinfo,scheme,package,appstore,yingyongbao,downloadPag

怎么微信浏览器里打开APP相关推荐

html 链接到 appstore,如何在微信浏览器内打开App Store链接
微信浏览器是不支持打开 App Store 页面的,不知道微信为什么这么做. 比如你页面写 download ,在微信浏览器点击是没有反应的,但是如果是其他的链接地址,如百度就没有问题. 但是,如果在 ...
微信浏览器内打开App Store链接
将页面的代码写为:<a href="http://mp.weixin.qq.com/mp/redirect?url=http://itunes.apple.com/cn/app/gua ...
实现微信浏览器内打开App Store链接
微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做.比如你页面写 <a href="http://itunes.apple.com/us/app/id903800 ...
打开App:微信浏览器内部打开app跳转
微信内打开App终于开发完成了: 说说我踩过的坑吧: 1,跨域问题,微信给的api地址是微信的前缀,访问时是需要处理跨域的,一般的跨域问题处理方式: 1.1:请求让后端完成,后端请求不会出现跨域问题. ...
微信浏览器内打开App Store链接，并跳转到App指定安装页面
id1234567 代表'id' + appid,这里的是测试的数据, 在html中加上这个链接 https://itunes.apple.com/cn/app/id1234567 可以唤起苹果商 ...
uniApp wx-open-launch-app 微信浏览器内打开app及遇到的坑
ss 微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合.通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验. 此文档面向网页开发者,介绍微信开放 ...
微信内置浏览器无法打开APP下载链接的解决方案
最近遇到一个问题,app用户邀请好友,分享到微信好友,但是微信好友打不开对应的app下载链接.然后ui给我做了个图,引导用户点击浏览器右上角,在外部浏览器中打开app下载页,如下图: 但是我又遇到问题 ...
js判断是否在微信浏览器中打开
js判断是否在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroM ...
Js判断是否在微信浏览器中打开和微信版本号
一.判断微信版本号 var wechatInfo = navigator.userAgent.match(/MicroMessenger\\/([\\d\\.]+)/i) ; if( !wechatI ...

怎么微信浏览器里打开APP

使用组件

怎么微信浏览器里打开APP相关推荐

最新文章

热门文章

怎么微信浏览器里 打开APP

使用组件

怎么微信浏览器里 打开APP相关推荐

最新文章

热门文章

怎么微信浏览器里打开APP

怎么微信浏览器里打开APP相关推荐