精华内容
下载资源
问答
  • h5页面打开APP

    千次阅读 2017-11-07 12:21:20
    本人亲自试验过了说可以的 代码如下: document.getElementById('openApp').onclick = function(e){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){ window.location.href = ...//ios app协议

    本人亲自试验过了说可以的

    代码如下:

    <script type="text/javascript">
    document.getElementById('openApp').onclick = function(e){  
      if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
          window.location.href = "apphaha://";//ios app协议
          window.setTimeout(function() {
          window.location.href = "商店下载地址";
        }, 2000)
      }
      if(navigator.userAgent.match(/android/i)){
          window.location.href = "app://main";//android app协议
          window.setTimeout(function() {
          window.location.href = ".apk";//android 下载地址
        }, 2000)    
      }
    };
    </script>
    <a href="javascript:;" id="openApp">我是APP</a>
    

    微信上没能实现打开一些APP的,望大神指教!!!


    展开全文
  • 项目中 直播app分享出来的直播h5页面 点击进入按钮:已下载app 就进入app,未下载跳转到下载页面判断是安卓还是iosvar u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') ...

    项目中 直播app分享出来的直播h5页面 点击进入按钮:已下载app 就进入app,未下载跳转到下载页面

    判断是安卓还是ios

    var u = navigator.userAgent;

    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

    var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    if(isiOS){

    document.getElementById('download-app').value = 'http://baidu.com';

    }else{

    document.getElementById('download-app').value = 'http://jd.com/8JZ5OO';

    }

    页面代码

    立即进入

    已下载打开APP 未下载跳转到input的value也就是下载页面

    scheme_IOS和scheme_Adr这两个参数是app端给的呼起app url。

    var ua = navigator.userAgent.toLowerCase();

    var t;

    var config = {

    /scheme:必须/

    scheme_IOS: 'lbbox1214151904://com.lababox',

    scheme_Adr: 'schemedemo://aa.com/test/scheme?name=google&page=1',

    download_url: document.getElementById('download-app').value,

    timeout: 600

    };

    function openclient() {

    var startTime = Date.now();

    var ifr = document.createElement('iframe');

    ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;

    ifr.style.display = 'none';

    document.body.appendChild(ifr);

    var t = setTimeout(function() {

    var endTime = Date.now();

    if (!startTime || endTime - startTime < config.timeout + 200) {

    window.location = config.download_url;

    } else {

    }

    }, config.timeout);

    window.onblur = function() {

    clearTimeout(t);

    }

    }

    window.addEventListener("DOMContentLoaded", function(){

    document.getElementById("call-app").addEventListener('click',

    openclient, false);

    }, false);

    主要地址参数是app端生成的,不用前端考虑,最终我们主要判断是android还是iOS就好了。如有错误,请大神指教。

    展开全文
  • 微信内H5打开app 一、准备条件 微信内访问网页时跳转到 APP的准备条件: 服务号已认证:微信公众平台 注册一个【服务号】并微信认证 开放平台账号已认证:微信开放平台 注册一个账号,并完成开发者资质认证 服务号...

    微信内H5打开app

    一、准备条件

    微信内访问网页时跳转到 APP的准备条件:

    1. 服务号已认证:微信公众平台 注册一个【服务号】并微信认证
    2. 开放平台账号已认证:微信开放平台 注册一个账号,并完成开发者资质认证
    3. 服务号与开放平台账号同主体:【服务号】和【开放平台账号】认证主体一致!

    二、相关文档

    官方文档很详细

    1. 功能介绍、使用说明、前期准备
    2. 微信开放标签说明文档
    3. App获取开放标签中的extinfo数据

    三、重要设置

    • 微信公众平台 设置IP白名单,该IP地址获取access_token

      开发->基本配置->公众号开发信息->IP白名单
      
    • 微信公众平台 绑定安全域名

      设置->公众号设置->功能设置->JS接口安全域名
      
    • 微信开放平台 绑定所需要跳转的App,这里也需要设置安全域名

      管理中心 -> 公众帐号 -> 接口信息 -> 网页跳转移动应用 -> 关联设置中绑定所需要跳转的App
      

    四、几个重要参数!!

    五、使用示例

    页面首先引入js文件

    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    

    wx配置:

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

    页面标签使用:

    <wx-open-launch-app
      id="launch-btn"
      appid="<移动应用Appid>"
      extinfo="your-extinfo"
    >
      <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">App内查看</button>
      </template>
    </wx-open-launch-app>
    

    注册点击事件:

    var launchBtn = document.getElementById('launch-btn');
    if (launchBtn) {
    	launchBtn.addEventListener('launch', function (e) {
            // 尝试进行唤起 操作成功执行的函数
         })
    	launchBtn.addEventListener('error', function (e) {
    		// 尝试进行唤起 操作失败执行的函数	,可选择跳转 AppStore 或者下载引导页等
    	})
    }
    

    样式设置:

    • wx-open-launch-app标签外部样式和内部样式是隔离的
    • wx-open-launch-app这个标签可以加样式style
    <div style="background-color:red">
       <wx-open-launch-app id="launch-btn" appid="appid">
    		<template>
    			<div class="wx-btn" style="height: 30px;font-size: 13px;color: #b16a26;">
    				打开 APP
    			</div>
    		</template>
    	</wx-open-launch-app> 
    </div>
    

    wx.config 参数说明:

    • debug: true :开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印

      若在调试过程中弹出 errMsg:config:ok 证明配置文件已完成,此时需要关闭 debug 位为 false,进行后续打开 app 的操作

    • appId: <开发者ID(AppID)>:必填,公众号的唯一标识

    • timestamp: '':必填,生成签名的时间戳(秒)

    • nonceStr: '': 必填,生成签名的随机串

    • signature:'':必填,签名(获取签名步骤见附录)

    • jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']: 必填,需要使用的JS接口列表(所有的 js 接口列表见附录)

    • openTagList: ['wx-open-launch-app']:可选,需要使用的开放标签列表,例如[‘wx-open-launch-app’],(所有的开放标签列表见附录)

    附录:

    官方文档地址

    获取签名

    官方文档地址:底部附录1

    生成签名之前必须先了解一下 jsapi_ticketjsapi_ticket 是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket 的有效期为7200秒,通过 access_token 来获取。由于获取 jsapi_ticket 的api调用次数非常有限,频繁刷新 jsapi_ticket 会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存 jsapi_ticket

    1. 参考以下文档获取 access_token(有效期7200秒,开发者必须在自己的服务全局缓存 access_token):

      https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

      注:获取 access_token 所需要的参数

    2. 用第一步拿到的 access_token 采用http GET方式请求获得 jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存 jsapi_ticket):

      https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

    成功返回如下JSON:

    {
      "errcode":0,
      "errmsg":"ok",
      "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
      "expires_in":7200
    }
    

    获得 jsapi_ticket 之后,就可以生成JS-SDK权限验证的签名了。

    签名算法

    签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

    即signature=sha1(string1)。 示例:

    noncestr=Wm3WZYTPz0wzccnW
    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
    timestamp=1414587457
    url=http://mp.weixin.qq.com?params=value
    

    步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value
    

    步骤2. 对string1进行sha1签名,得到signature:

    0f9de62fce790f9a083d5c99e95740ceb90c27ed
    

    sha1 签名(JavaScript)

    function encodeUTF8(s) {
        var i, r = [], c, x;
        for (i = 0; i < s.length; i++)
          if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
          else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
          else {
            if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
              c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
                r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
            else r.push(0xE0 + (c >> 12 & 0xF));
            r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
          };
        return r;
    }
    
    // 字符串加密成 hex 字符串
    function sha1(s) {
        var data = new Uint8Array(encodeUTF8(s))
        var i, j, t;
        var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2);
        s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
        for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2);
        s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
        s[l - 1] = data.length << 3;
        var w = [], f = [
          function () { return m[1] & m[2] | ~m[1] & m[3]; },
          function () { return m[1] ^ m[2] ^ m[3]; },
          function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; },
          function () { return m[1] ^ m[2] ^ m[3]; }
        ], rol = function (n, c) { return n << c | n >>> (32 - c); },
          k = [1518500249, 1859775393, -1894007588, -899497514],
          m = [1732584193, -271733879, null, null, -1009589776];
        m[2] = ~m[0], m[3] = ~m[1];
        for (i = 0; i < s.length; i += 16) {
          var o = m.slice(0);
          for (j = 0; j < 80; j++)
            w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
              t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
              m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
          for (j = 0; j < 5; j++)m[j] = m[j] + o[j] | 0;
        };
        t = new DataView(new Uint32Array(m).buffer);
        for (var i = 0; i < 5; i++)m[i] = t.getUint32(i << 2);
    
        var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
          return (e < 16 ? "0" : "") + e.toString(16);
        }).join("");
        
        return hex;
    }
    

    至此,我们就获取到了签名,我们可以对签名进行校验:微信 JS 接口签名校验工具

    js 接口列表

    官方文档地址:底部附录2

    开放标签列表

    • wx-open-launch-weapp
    • wx-open-launch-app
    • wx-open-subscribe
    • wx-open-audio

    六、常见问题

    常见问题:底部附录5

    另:

    • config:ok 之后,需要关闭debug
    • config 注入阶段出错的话,标签不会显示出来
    展开全文
  • 概念:(1)URL Schemes,是 H5 或者别的 app 打开自己 app 的一种方式,常用 bundleID 作为 URL Schemes 的标识(避免取的名字与别的 app 重复,打开了别的 app ),这个标识需要在 Targets/Info/URL Types 中设置。...

    概念:

    (1)URL Schemes,是 H5 或者别的 app 打开自己 app 的一种方式,常用 bundleID 作为 URL Schemes 的标识(避免取的名字与别的 app 重复,打开了别的 app ),这个标识需要在 Targets/Info/URL Types 中设置。

    一、流程:

    Safari 打开 H5 链接,H5 给 Safari 发送重定向,由 Safari 打开 app(或者打开 app 内部详情页),两种重定向类型(下面的代码是H5页上重定向的代码):

    (1)直接打开 app :

    window.location.href ='com.English.AJ://';

    (2)打开 app 内部详情页:

    注释:可以在 H5 的重定向链接后面拼接参数,app 获取后进行解析,推至内部详情页

    window.location.href ='com.English.AJ://?extra={"type":"3","h5_url":"[https://reading.talcloud.com/app/apppages/shareclass.html?act_id=18&raz_role=teacher&razflag=hideTitle](https://reading.talcloud.com/app/apppages/shareclass.html?act_id=18&raz_role=teacher&razflag=hideTitle)"}';

    二、 app 端的代码:

    (1)AppDelegate.m:

    //拦截H5跳转app时的链接地址

    func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {

    //短信 -> H5 -> app内部详情页

    let urlStr = url.absoluteString

    let array = urlStr.components(separatedBy: "extra=")

    guard array.count >= 1 else {

    return true

    }

    let dictString = array.last!

    let extraDict = (dictString as NSString).removingPercentEncoding

    let extraDict2 = self.getDictionaryFromJSONString(jsonString: extraDict!)

    let jsonData = JSON(extraDict2)

    //内部跳转

    let model = HomeEntranceModel.deserialize(from: jsonData.dictionaryObject!)

    JumpDetailVCTool.share.jumpDetailVCWithModel(model: model)

    return true

    }

    //JSONString转换为字典

    func getDictionaryFromJSONString(jsonString:String) ->NSDictionary{

    let jsonData:Data = jsonString.data(using: .utf8)!

    let dict = try? JSONSerialization.jsonObject(with: jsonData, options: .mutableContainers)

    if dict != nil {

    return dict as! NSDictionary

    }

    return NSDictionary()

    }

    展开全文
  • 拼多多微信跳转接口利用了微信官方的weixin://dl/business/?ticket技术,此类接口可以在...ticket=tdfd2ba5686833d7ecdee6e11c86f7f64"}} 拼多多微信跳转api效果:手机浏览器打开测试 生成wxticket值即可用js调用跳转。
  • H5打开APP技术总结

    万次阅读 多人点赞 2018-01-30 11:49:37
    H5页面打开APP的方法一般有两种,在IOS 9以前,一般使用的技术是URL Scheme。这种方式虽然可自定义程度很高,能够巧妙地实现很多跳转,但弊端也很明显:我们只能通过 scheme://example 这种格式的链接来实现跳转,...
  • 有很多场景都需要通过其他APP或者H5打开APP并且有时候会携带参数。 所以在这里我说一下我的做法(大神勿喷,有更好的办法请评论区留言,不胜感激)。 Android端 1.首先在AndroidManifest.xml中修改入口Activity的...
  • h5网页打开手机APP

    千次阅读 2020-05-25 11:45:00
    首先说下需求,一个h5页面点击按钮打开手机某个app,如果有则打开,无自动跳转到应用商店;  然后要明白,js没法检测手机是否有某个app,所以也就没法判断是打开应用商店还是app的链接,  然后一个大概思路就是...
  • H5打开外部APP

    千次阅读 2018-01-16 09:04:55
    下面我们来总结一下H5打开APP的方式。并详细介绍 URL Scheme 打开方式。 目前常见的唤醒APP方式有: 1:URL Scheme 2:Android intent 3:Safari内置APP广告条 4:Universal Links 方式一:URL Scheme IOS和...
  • h5分享页面打开APP

    2019-10-06 19:29:27
    项目中 直播app分享出来的直播h5页面 点击进入按钮:已下载app 就进入app,未下载跳转到下载页面 判断是安卓还是ios var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.index...
  • H5下载打开APP页面通用模板

    万次阅读 2016-01-15 09:48:28
    // 自动打开APP, Bug: 其中IOS利用window.location直接跳转协议地址,Android利用iframe打开。 window.onload = function() {  var url = getUrlParam('url');  if (url) {  url = ...
  • h5页面点击按钮打开app某个页面,若未下载app,则打开下载h5页面点击按钮打开app某个页面,若未下载app,则打开下载 h5页面点击按钮打开app某个页面,若未下载app,则打开下载 ·``` const downloadUrl = ...
  • 安卓 | IOS系统 applinks 声明与app的关联文件安卓 https://域名/.well-known/assetlinks.jsonIOS https://域名/.well-known/apple-app-site-association${uri} 参数:例 name=打开app&age=23xx.xx.xx 表示安卓...
  • H5页面唤起app

    2020-12-14 15:01:01
    前言介绍:近期有需求需要h5页面中唤起app功能 小编试过N++方式,通过js直接以sheme形式跳转app,但是部分机型不兼容 最终使用往上的一个插件js实现开发{具体需求是如果手机已存在app直接跳转app应用中,如果没有该...
  • 安利一波我写的开发框架:MyScFrame喜欢的话就给个Star场景H5界面中的入口有时候为了方便用户在H5界面上直接下载app或者打开手机app,我们会在H5界面上添加一个按钮,点击按钮可以实现下载或者打开app的功能。...
  • 网页web、h5打开app

    2021-07-23 15:52:46
    web端示例 打开淘宝 window.location.href="taobao://item.taobao.com/item.html?id=41700658839" uni-app schema 设置 manifest.json -> App常用其他设置 -> Android设置/Ios设置 -> Urlschemes
  • 有时候为了方便用户在H5界面上直接下载app或者打开手机app,我们会在H5界面上添加一个按钮,点击按钮可以实现下载或者打开app的功能。关于下载功能这里不做叙述,这里主要讲述打开app并跳转到指定界面的业务如何实现。...
  • vue h5页面打开app

    2019-10-24 17:56:47
    1 . 下载插件 npm install callapp-lib --save ...2.import CallApp from “callapp-lib”; import { setTimeout } from ‘timers’; openApp() { // 是微信内部webView if (this.is_weixn()) { alert(...
  • 参考UNIAPP官方文档: Android平台设置UrlSchemes,实现被第三方应用调用 <!--打开APP的链接--> <a href="test://abc">test:<a>
  • H5链接打开APP并跳转到制定界面

    千次阅读 2017-08-02 12:34:00
    手机如果安装了该应用,就直接打开该应用;如果没有安装该应用,就下载该应用。那么下面就对在浏览器中,用js判断某用户是否安装了该应用,并判断是否打开该应用做个简单的介绍。 那么,怎么判断某用户是否安装了某...
  • 移动端产品包括小程序(本文特指微信小程序)、APP(安卓、IOS)、H5页面。其中:小程序是一种不需要下载安装就可以使用的应用,可以在微信APP中直接打开使用;APP则是基于安卓和IOS手机操作系统开发的,能安装在智能...
  • H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面) **ps: 一定一定一定一定先向 ios要 ( ios下载地址 和 ios对应的app协议 ),找安卓要( android下载地址 和 andriod对应的...
  • H5打开本地app应用

    千次阅读 2018-10-25 16:28:01
    前言:业务场景,一个分享出去的h5界面通过页面内某个事件的触发,启动目标app并执行相关逻辑处理或做其他页面跳转(如:跳应用市场下载应用等)。下面是我在企业开发过程中,实操的记录,对于有这块需求的朋友,...
  • 原标题:H5页面APP页面的区别 H5,指的是HTML5,很多人都认为他是一种技术。在做网络开发时,都会问有没有做H5,但其实并不是一项技术,而是一项标准,其中所包含的技术主要有页面素材预加载技术,音乐加载播放技术...
  • h5页面唤醒app

    千次阅读 2019-05-23 20:13:20
    h5页面发送请求打开app自定义url scheme,如taobao://home(淘宝首页) 、etao://scan(一淘扫描)); 如果安装了客户端则会直接唤起,直接唤起后,之前浏览器窗口(或者扫码工具的webview)推入后台; 如果在指定的...
  • H5网页启动APP

    千次阅读 2018-11-14 14:10:11
    H5页面端:  &lt;div&gt;  &lt;a href="http://myapp.com"&gt;启动APP&lt;/a&gt;  &lt;/div&gt; Android端:  ​​​​​ //指定文档类型及编码格式,由系统已...
  • 在阅读本文之前你首先应该对js有基本对掌握,并且对Scheme,intent有一定的...原文链接https://lihengc.github.io/2019/09/24/H5%E7%BD%91%E9%A1%B5%E5%94%A4%E9%86%92app-%E5%88%A4%E6%96%ADapp%E5%AE%89%E8%A3%85/
  • 需求:微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app)变通方法:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,846
精华内容 9,138
关键字:

h5页面打开app