精华内容
下载资源
问答
  • 在开发中会遇到需要微信唤起app功能。这时候我们需要通过微信标签来实现。 首先一点是需要一个服务号账号 引入JS文件http://res.wx.qq.com/open/js/jweixin-1.6.0.js(该资源不可访问时用...

    在开发中会遇到需要微信唤起app功能。这时候我们需要通过微信标签来实现。

    1. 首先一点是需要一个服务号账号
    2. 引入JS文件http://res.wx.qq.com/open/js/jweixin-1.6.0.js(该资源不可访问时用http://res2.wx.qq.com/open/js/jweixin-1.6.0.js)
    3. 需要config接口注入验证并且申请开放标签
     wx.config({
    		  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
    		  appId: '', // 必填,公众号的唯一标识(服务号appid,如果订阅号appid会获取标签失败,显示不出按钮)
    		  timestamp: , // 必填,生成签名的时间戳
    		  nonceStr: '', // 必填,生成签名的随机串
    		  signature: '',// 必填,签名
    		  jsApiList: [‘checkJsApi’], // 必填
    		  openTagList: [‘wx-open-launch-app’] // 可选,需要使用的开放标签列表
    });
    
    1. 通过ready接口处理成功验证
      wx.ready(function () {}); // config信息验证后会执行ready方法
    2. 添加事件
     launchBtn.addEventListener('launch', function (e) {
             console.log(e)
              // 尝试进行唤起 操作成功执行的函数
         })
    	launchBtn.addEventListener('error', function (e) {
             console.log(e)
             // 尝试进行唤起 操作失败执行的函数	,可选择跳转 AppStore 或者下载引导页等      
        })
    
    1. 绘制按钮
    <wx-open-launch-app
           id="launch-btn"
           extinfo="传递给app的额外参数,传递什么就接收什么"
           appid="**移动应用Appid**"
       >
           <script type="text/wxtag-template">
               <style>.btn { text-align: center; width: 12rem; height: 3rem; background-color: #64DFDC; border-radius:12px; margin: auto;line-height: 3rem; font-size: 1rem; color: #ffffff}</style>								
               <div class="btn">前往APP完成绑定</div>
          </script>
       </wx-open-launch-app>
    
    1. uniapp接收参数
      在App.vue中接收参数
      let extinfo = plus.runtime.arguments;
      该参数就是前面extinfo所传的参数
    	onShow: function(){
    		let extinfo = plus.runtime.arguments;
    		console.log(extinfo)
    	},
    
    展开全文
  • H5微信唤起app的解决方案

    H5及微信中唤起app的解决方案

    参考文章:

    (1)H5及微信中唤起app的解决方案

    (2)https://www.cnblogs.com/axl234/p/11082826.html


    备忘一下。


    展开全文
  • 主要介绍了iOS APP实现微信H5支付示例总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 官方文档: ...配置说明:https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html app获取开放标签中的extinfo数据:https://developers.weixin.qq.com/doc/offiaccount

    官方文档:

    开放标签说明:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

    配置说明:https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html

    app获取开放标签中的extinfo数据:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/APP_GET_EXTINF.html--此次没用到

    一、需求背景

    期望分享链接自动唤起app(若应用安装应用的用户)

    二、准备工作

    1、环境要求

    微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上

    2、微信后台配置

    a、将MP_verify_f4VWFoFpHgzmqFbo.txt文件下载并放到项目的根目录下(域名的根目录下)

    b、公众号管理平台:配置该公众号下js的安全域名

     

     c、在微信开放平台将js安全域名与app进行关联

     

    3、跳转app的H5页面接入微信JS-SDK

    方式一:sdk--http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

    方式二:npm install weixin-js-sdk --save(目前使用的方式)

    三、业务功能实现

    1、关键代码

    <template>
       <div>
          <wx-open-launch-app
           @launch="launch"

           @error="launchError"

           id="launch-btn"
           appid="移动应用APP的 APPid"
           extinfo="H5传给APP的参数(可用于跳转指定页面)"

          >
             <script type="text/wxtag-template">   
                <style>.btn {height: 96px}</style>
                <div class="btn">打开app</div>
            </script>
        </wx-open-launch-app>
      </div>
    </template>

    </script>

    import wx from "weixin-js-sdk";
    export default {
       methods: {

    launch() {
           window.location.href =app提供的 scheme url;
           setTimeout(() => {
                window.location.href = appDownUrl;
           }, 1000);
    },
    launchError(e) {
         if (e.detail.errMsg === "launch:fail") {
            window.location.href = appDownUrl;

         }
    }

       },

       created() {

            wx.config({

         debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
         appId: '', // 必填,公众号的唯一标识
         timestamp: , // 必填,生成签名的时间戳
         nonceStr: '', // 必填,生成签名的随机串
         signature: '',// 必填,签名
         jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"], // 必填,需要使用的JS接口列表
         openTagList: ["wx-open-launch-app"] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
     });

        }
    };
    </script>

    config配置成功会展示:{"errMsg":"config:ok"}

    注:

    1、对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type="text/wxtag-template"><script>进行代替

    2、wx.ready()方法在config信息验证后不论成功或失败都会调用。失败的情况下,先调用error方法,然后再调用ready方法。

    3、在开放标签中,<template>或者<script>里面的写样式,千万不要使用定位position,如果非要用就在最外层的div里面写

    4、vue编译过程中无法识别标签wx-open-launch-app,可以在main.js中设置:

          Vue.config.ignoredElements = ["wx-open-launch-app"];

    5、extinfo 内填的是传递给唤起 app 的数据;

    遇到的问题:

    1、在ios分享到微信的页面跳转后调用微信js-sdk时报错:"invalid signature",重新刷新页面,显示config:ok。

    分析(借用):从A页面跳转到B页面时,由于是使用vue-router切换,都是操作浏览器历史记录,所以ios端微信浏览器锁定的url的还是A页面的url。这样就会导致请求的url签名地址和浏览器执行weixin-js-sdk时锁定的地址不一致。
    你当前请求的可能是url1或url2,而此时微信锁定的地址仍然是进入A页面时的url(因为在进入A页面是加载并执行了jweixin-1.x.x.js, 而路由变化A到B时,并没有再次执行jxinwei-1.x.x.js)。所以问题就发生了,但是你再刷新一下,

    jweixin-1.x.x.js重新执行,此时微信浏览器锁定的url就是你当前刷新的url地址了,所以签名又成功了。

    主要是因为:

    【IOS】:ios微信端,路由变化时,微信认为SPA的url是不变的。
    【Android】:android微信端,路由变化时,SPA的url是会变的(官方在安卓6.2版本,才对SPA变化作了支持)

    所以,发起签名的url必须是微信锁定的url。

    解决方案:

    IOS端,在可能发生跳转的所有页面,把请求签名的url,保存到全局变量中。路由切换后,在调用分享接口时,使用全局变量里保存的url来请求签名

    附上代码:

    mounted() {
         if (isIOS && (typeof window.entryUrl === "undefined" || window.entryUrl === "")) {
              window.entryUrl = location.href.split("#")[0];
         }

    }

    2、安卓手机中使用微信开放标签唤醒APP,在APP已打开在后台运行的时候能唤醒APP,杀掉进程之后无法唤醒App

    官方回答:对于拉起应用还没适配Android10限制后台拉起Activity的问题(亲测不止Android10,Android8也不行)

    解决方式:

    App杀掉的情况下在小程序中唤醒App时可以打印出日志,说明在App中微信的回调是正常的,只是没有打开App而已,目前是在app的微信回调onReq()中手动唤起app

    四、其他工具

    微信 JS 接口签名校验工具:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

    展开全文
  • H5页面唤起微信app

    千次阅读 2020-03-26 19:31:31
    唤起微信 通过a标签唤起微信 <a href="javascript:window.location.href='weixin://'">打开微信</a> <a href="weixin://">weixin:// </a> // 控制何时唤起微信 <script> // 可以写...

    这两种方法兼容大部分主流浏览器

    唤起微信

    通过a标签唤起微信

    <a href="javascript:window.location.href='weixin://'">打开微信</a>
    <a href="weixin://">weixin:// </a>
    
    
    // 控制何时唤起微信
    <script>
    // 可以写一些前置条件,比如复制一段文字
    let a = document.querySelector('a')
    a.href = 'weixin://'
    </script>
    

    通过a标签唤起微信,有缺陷,没办法带参数过去我们可以通过引入clipboard插件来复制一段文字来完成传递数据(比如关注公众号之类的)

    clipboard插件中文网地址

    <html>
    <body>
    	<a>打开微信</a>
    <body>
    </html>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <script>
    // 简单复制5个数字并打开微信
    new Clipboard('DOM的类名等 比如传a', {
        text: function () {
            return '12345'
        }
    })
    let a = document.querySelector('a')
    a.href = 'weixin://'
    
    // 下面这些是唤起微信具体到某个页面的链接
    weixin://dl/scan 扫一扫
    weixin://dl/feedback 反馈
    weixin://dl/moments 朋友圈
    weixin://dl/settings 设置
    weixin://dl/notifications 消息通知设置
    weixin://dl/chat 聊天设置
    weixin://dl/general 通用设置
    weixin://dl/officialaccounts 公众号
    weixin://dl/games 游戏
    weixin://dl/help 帮助
    weixin://dl/feedback 反馈
    weixin://dl/profile 个人信息
    weixin://dl/features 功能插件
    </script>
    

    通过插件callapp-lib唤起微信等app

    callapp-lib地址

    比如我们在这里通过callapp-lib唤起微信

    <script src="https://unpkg.com/callapp-lib"></script>
    
    <script>
    const options = {
      scheme: {
    	protocol: 'weixin' //必填项 URL Scheme 的 scheme 字段,要打开的 APP 的标识,比如这里是微信的标识
      },
      intent: { //安卓原生谷歌浏览器必须传递 Intent 协议地址,才能唤起 APP
    	// 这两个是intent的必填项
    	package: 'com.tencent.mm',//腾讯微信包名
    	scheme: 'weixin'},
      appstore: 'https://weixin.qq.com/', //必填项 APP 的下载地址,比如这里是微信的下载地址
    
      yingyongbao: 'https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.mm', //必填项 APP 的应用宝地址,比如这里微信的应用宝下载地址
    
      fallback: location.href //必填项 唤起app端失败后跳转的地址。
    };
    
    //callapp-lib 中传递出来的是一个类,你需要将它实例化,然后才能去调用实例对象的方法
    const callLib = new CallApp(options);
     
    // 这里是唤端方法。
    callLib.open({
      // 如果只是唤起app,不需要打开app的某个页面,填空字符串就可以
      path: ''
      //打开app某个页面,需要接收的参数。如果没有就不用写
      //param: {},
    });
    </script>
    
    展开全文
  • h5页面唤起app如果没安装就跳转下载(iOS和Android) 浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。 微信里屏蔽了 schema 协议,...
  • 微信公众号唤起app文档 https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#1 【给做...
  • 微信H5网页跳转app、小程序 wx-open-launch-app实现跳转功能跳转后接参开放性标签的样式 最近公司需要开发一个微信H5页面,页面中需要跳转小程序和app。整个过程可谓是举步维艰【捂脸.jpg】。 首先,想要跳转app和小...
  • 当用户打开h5 链接时候 ,点击打开app, 若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装 这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。这两个场景又分为了IOS端...
  • 使用微信开发文档中开发标签:wx-open-launch-weapp实现 要求 1.微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 2.域名绑定 登录微信公众平台进入“公众号设置”的“功能设置...
  • 下面代码的解决思路是,点击下载App按钮的时候先给个“正在为您跳转”的提示,如果在微信中,会先打开App Store,然后在App Store里面打开App(如果你的手机上已经下载了App的话),如果手机上并没有下...
  • taro 微信H5跳转APP

    2021-01-17 07:44:43
    使用"微信开放标签"可实现在微信内网页跳转APP的功能。文档参考:文档写的很简单,可能真的是因为代码量几乎为零吧~~but,网上参考资料也是几乎为零啊!!功能实现过程中遇到了很多坑。最大的障碍就是:该开放标签内...
  • h5单页,微信浏览器唤醒APP

    千次阅读 2019-05-28 17:04:06
    微信内的H5单页,都不能直接唤醒APP。所以需要打开外部浏览器。目前android能够通过后台的配合修改请求头,打开外部浏览器唤醒APP。ios目前没找到合适的方法,只能引导用户自己使用默认浏览器打开H5单页,进而唤醒...
  • h5分享到微信唤起app功能

    千次阅读 2019-01-02 11:27:34
    下面说一下,常见的微信唤起app功能。 先看下效果,我这找的以前的记录,因为我们线上已经改成分享唤起小程序了,大家将就看下吧。 废话我也不多说,都是自己以前踩过的坑,直接上代码吧。 1、在需要唤起的地方进行...
  • app内发起支付,报错net::ERR_UNKNOWN_URL_SCHEME出错原因:在调微信 H5 支付https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb请求头 referer 丢失 。处理方式:处理方式一:document.form.method= "post"; ...
  • }打开appimport globalConfig from'@assets/js/config'import { copyToClipboard } from'@assets/js/utils'import { getWeixinVersion, onBridgeReady } from'@assets/js/weixin/weixin'let id...
  • 微信支持H5跳转App、跳转小程序

    千次阅读 2020-07-15 08:20:00
    系统版本要求为:iOS 10.3及以上、Android 5.0及以上 接入方法 打开小程序使用步骤与微信JS-SDK类似,需要绑定安全域名、引入JS文件等步骤 打开app需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-...
  • 当下,几乎每个App,都可以通过微信分享内容给朋友,于是有大量的流量,停留在了微信端。那么如何才能让这部分流量高效的回流到App内呢?今天我们来聊聊【微信分享页面跳回App的小按钮】的那些小事(重头戏在文末,...
  • h5唤起app解决方案

    2021-06-05 02:15:37
    最近遇到一个需求:点击一个按钮,如果本机装有则唤起app,没有的话则跳下载页。刚一接到需求,觉得很熟悉,实际上这个功能也确实很常见,页能搜索到一大堆方案,但是实际应用中,却发现总是很难做到100%的完美。这...
  • 微信H5支付跳回app的问题

    千次阅读 2020-01-15 10:56:17
    最近使用到H5支付,需要在支付完成或者取消之后跳回到app。但是苹果做好H5支付只会跳转到Safair浏览器,这就需要找方法去解决了。 1.首先先配置微信支付的白名单。 在Xcode中,在plist文件中添加...
  • callapp-lib是一个H5唤起APP的解决方案,能够满足大部分唤起客户端的场景,也可以扩展出扩展口,帮你实现一些定制化的功能。 如果您想了解一些启发端的原理知识,或者阅读下面的文档有不理解的名词,可以访问博客。 ...
  • APP内嵌的H5页面点击唤起微信

    千次阅读 2018-08-30 11:28:05
    &lt;a href="javascript:testApp('weixin://')"...打开微信&lt;/a&gt; 2.javascript代码 function testApp(url) { var timeout, t = 1000, hasApp = true; setTim...
  • 微信内跳转App--代码篇 uniapp-H5

    千次阅读 2020-07-28 15:01:49
    但本篇博客只是H5端的应用,只能跳转到App的首页,跳转到具体页面需要安卓和ios的开发人员自身配置,我们就暂时不说这一部分啦???? 注意:一定要看懂官方文档!!!!!!!!!!!!!!!多看几遍,看懂了有...
  • h5 唤起app或跳转appStore

    千次阅读 2019-02-25 12:36:45
    //唤起app通过唤端媒介(URL Scheme) //微信浏览器自6.3.x版本起禁用了大多数Scheme跳转功能,扫一扫目前可用 // URL 的组成: // [scheme:][//authority][path][?query][#fragment] //比如:&lt;a href="...
  • 之Vue项目H5唤醒APP微信开放标签出来之前,大多数人都是采用 URI Scheme 以及 ios 的universal Link来完成这一需求的,通过URI Scheme/universal Link这种方式,需要在浏览器中打开才行,对应ios来讲universal ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,722
精华内容 688
关键字:

微信h5唤起app