转自：/multidevice-frontend-debug/
通过移动端使用 Web 服务的比率越来越大，例如淘宝今年双十一，移动端交易份额就达到&。由此可见，掌握移动端的前端开发和测试是非常有必要的。
由于之前做过大量有响应式需求的项目；今年（2014）年初也配合 Denis 的&&做了一些用于微信的移动端项目；在淘宝 UED 实习的时候，也有参与过一个针对移动端的游戏的部分开发。所以算是积累了一点移动端调试的经验，在这里分享一下。
本文只介绍与调试有关的内容，至于其他移动端开发知识（技巧、坑）太多太大，推荐&&移动前端开发知识库。这个项目很久没有大动静了，欢迎大家猛烈关注，不要让它&太监&了。
由于本文较长，如果没有太多时间和精力查看，建议跳转到&不同测试场景下需要用到的技术和工具&一节，找到适合自己测试需求的场景，再查阅相关章节。
响应式测试
响应式现在基本是中小型项目的标配了，先来谈谈响应式测试技巧。
基础的响应式测试
响应式的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。当然，你的 CSS 中 Media Queries 判断条件设置时要使用&max-width&才行，如果使用&max-device-width&则会根据你设备的屏幕尺寸来判断。区别详情请看&。
对于 Chrome 浏览器，你可以将 Chrome DevTools 放在右边，这种布局方式尤其适合用在外接的大屏幕上。然后通过拖动 DevTools 快速测试响应式的显示效果：
优点就是对于 Chrome 开发者可以快速查看响应式变化效果。缺点就是分辨率尺寸不会很精确，因为它的页面宽度是添加了滚动条之后的宽度，这样对 Media Queries 的临界值效果不好测试。
对于 Firefox 浏览器，不愧是早期开发的必备神器，它早就内置了响应式测试工具，可以通过&Firefox 工具&-》Web 开发者&-》自适应设计视图&启用：
可以设置分辨率等参数，以及模拟&touch&事件、屏幕截图等功能，可以随意拖动。足够简单和流畅，很方便测试响应式的变化效果等。对于基础的响应式测试以及临界值变化情况测试，强烈推荐 Firefox 浏览器。
由于响应式测试太简单，于是有了一大堆的书签栏 JS 工具或者 Chrome 扩展，并且以很多交互特效、复杂的功能来吸引用户。实际上使用起来，你可能需要依靠网络才能使用，还会遇到切换缩放不够流畅、刷新不方便等等问题，在这里不推荐。
Chrome 模拟设备尺寸
如果你需要测试某种明确的机型，Chrome 新版的&Emulation&就可以派上用场了。Emulation&现在变成了一个手机图标（），之前的&Emulation&面板被放在了 DevTools 的分裂视图中了，如果你怀念以前的&Emulation&面板或者需要模拟地理位置、加速计等功能，在 DevTools 界面摁下&ESC&即可打开分裂视图。打开 DevTools 之后，点击这个&手机图标&即可进入 Chrome 手机模拟器：
在 Device 你可以选择预置的设备，快速切换分辨率和屏幕有关参数。此外还可以设置分辨率比率，来模拟 Retina 或者更高级屏幕下的效果，这样可以测试你的响应式图片是否被正确替换等。它甚至提供了网络测试，来测试低网速情况下你的页面加载情况。慢网速的测试，往往需要用抓包工具（Charles 等）来模拟，现在用 Chrome 也可以模拟了。
除此之外，Chrome 的手机模拟器还提供了非常非常多的实用功能，比如模拟&touch&事件、捏等手势操作、地理位置、加速计、Retina 等等，详情请见&，英文不好的朋友可以看我的&。节约篇幅，这里不再赘述。
这里的方法仅能作为基础的响应式测试，对于中小型、比较简单的项目，完全足够用了，对于稍微复杂的页面，还是需要用虚拟机或者真机测试，这样更加可靠。
基于 Android 的移动端前端开发调试
Android 系统是份额最大的移动端设备操作系统。一方面，Android 是 Google 开发的，浏览器等也是基于 Blink 内核（早期版本基于 Webkit ），都是 Google 开发的，所以技术上应该是没有问题的。另一方面，Google 无偿开源 Android 系统，结果导致很多小厂商自己乱改 Android 系统，各种版本遍地生花，各种 BUG 层出不穷。
Android 虚拟机测试
在电脑上安装 Android 虚拟机，就可以用虚拟机打开进行测试。一般推荐两个：
Genymotion
是一个很棒的 Android 虚拟机。但是首次安装配置需要麻烦一些。由于基于 VirtualBox 内核，所以要先安装&，然后需要注册账号 Genymotion，可以免费使用，但是有功能限制。如果遇到重要的项目，临时买一两个月高端账号也是 OK 的。
安装完成，登陆之后，选择 Android 版本和手机型号，即可下载对应的虚拟机包，下载好的虚拟机会显示在列表中，你可以选择开启。
安装好的虚拟机与你 Host 本机处于一个局域网，这样你就可以用&&之类的，开启一个局域网 IP 本地服务器，在移动设备上同步测试了。关于 BrowserSync，如果你没接触过，下面有讲。
比较蛋疼的是，Genymotion 虚拟机里面安装 APP 好像比较麻烦，安装 Chrome 不太方便，这样不方便连接桌面版 Chrome 进行调试，只能使用 Weinre 调试。如果你有 Genymotion 使用这方面的经验欢迎分享。
&是基于 Mac 平台的虚拟机，使用它创建虚拟机的时候，可以直接下载 Android 系统并安装，超级傻瓜的操作，但是超级好用。
没错，它还可以装 Chrome OS，只需要点击一下等待下载即可。
其他虚拟机软件应该也可以实现，不如这两种好用，如果这两种你无法使用，可以自行搜索选择其他方法尝试。Win 系统可以直接安装 Android SDK 也可以通过虚拟机方式，这里不再赘述。
安装完虚拟机，就可以用里面的浏览器打开网页进行测试了，虚拟机与本机处于一个局域网，可以用局域网 IP 来调试本地页面。
虚拟机不是真机，但是要比直接用浏览器测试强一些，在桌面操作比较方便，还可以安装多个版本测试。
Android 真机调试
桌面端的前端开发调试非常简单，因为有 Firebug、Chrome DevTools 等工具，直接右击打开就可以看到元素的 CSS，并且可以查看各种资源、修改运行调错 JS 等。而移动端浏览器显然没法带有这些功能，于是可以用数据线连接设备，然后用电脑上的 Chrome DevTools 来调试移动设备上的页面。
首先，你的 Chrome 版本必须高于 32。其次你的测试机 Android 系统高于 4.0，测试机安装 Chrome for Android 才可以使用 Chrome 远程调试这项功能。
先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面&开发者选项&中的 &USB 调试&功能。在 Android 4.2+ 系统上&开发者选项&默认是隐藏的，所以你需要先开启&开发者选项&（开启方法：设置&-》&关于本机&-》猛击版本号（Build number）多次&即可开启开发者选项）。之后如果没有开启，或者没有反应，可能是你的版本问题或者点击错了，你可以尝试把&关于本机&上所有的选项都猛击几次，就会开启。
然后在桌面版 Chrome 打开&chrome://inspect&即可查找你的设备，在设备上的 Chrome 打开网页，即可看到，然后就可以在桌面版 Chrome DevTools 调试移动设备上的页面了。
此外，还可以直接在桌面版 Chrome 输入 URL 在移动设备上打开；在本地用 Nodejs 或者其他功能开启一个本地服务器，用端口转接让移动设备直接访问本机 localhost 上的页面，再配合 LiveReload、BrowserSync 之类的工具，自动刷新，测试简直爽歪歪。
更多细节不再赘述，可以查看&&或者我的&。
Android WebView 前端开发调试
现在越来越多的移动端 APP 是 WebView，因为开发方便，更新快捷。那么就会有调试 WebView 的需求，因为他们本身就是网页。
基于 Chrome 的调试
在 Android 4.4（KitKat）或者更新版，你可以使用 DevTools 来调试原生安卓应用中的 WebVies 内容。
不过需要在你开发的应用中，添加有关代码才可以启用 WebView 的调试，这里比较有局限性，有兴趣的朋友可以参照&&或者我的&&试下，这里不再赘述。
使用 Weinre 调试
Weinre 是一个相当简单好用的调试工具。它会在你本地创建一个监听服务器，并提供一个 JavaScript，你只需要在需要测试的页面中加载这段 JS，就可以被 Weinre 监听到，在 Inspect 面板中调试你这个页面。
目前 Weinre 也发布到 NPM 上了，Mac 下具体使用方法如下（ Win 的同学请参加：）：
首先安装 Weinre：
npm install -g weinre
安装完成之后，要在本地开启一个监听服务器，需要获取本机的局域网地址：
Mac 在终端执行&ipconfig getifaddr en0&命令。
Win 在命令行执行&ipconfig&命令。
这时候拿到一个 IP，就本例而言，我的 IP 为&10.189.249.254，这时候执行：
weinre --boundHost 10.189.249.254
开启本地监听服务器。
这里有一个网址，就是 Weinre 的一些说明，我们可以打开看下：
这里最重要的是箭头所指的&&script src="http://10.189.249.254:8080/target/target-script-min.js#anonymous"&&/script&&这个 JS，我们需要把这个 JS 放到我们要调试的页面中，这样访问页面的时候，加载这个 JS，就会被 Weinre 监听到进行控制。
小提示：这个 JS 后面的&#anonymous&起到一个标识作用，为了区别，我们可以将其修改成&#test&放到页面中。这时候，我们的 Inspect 面板的地址就不是&http://10.189.249.254:8080/client/#anonymous&了，而是http://10.189.249.254:8080/client/#test。
当我们访问页面的时候，就会出现在监听列表中，如果有多个网页，你可以从列表中选择一个。然后就可以使用后面的 Elements、Console 等面板来进行调试操作了：
Weinre 非常灵活，只需要在页面中加载这个 JS，然后访问即可，因此 WebView 可以用这种方法调试，一些低版本的 Android、iOS 也可以支持，Window Phone 也是可以用的。在调试移动设备时你可能需要在本地搭建一个局域网 IP 的服务器，将设备与本机网络连接成一个局域网，用移动设备访问这个网页即可。
当然 Weinre 也不是万能的，相比 Chrome 的调试工具，它缺少 JavaScript debug 以及 Profiles 等常用功能，但是它兼容性强，可以实现基础调试功能。
基于 Chrome 的测试是鸡肋的
Chrome 功能很强大，调试很方便，提供了很多调试功能。但是前提是安装 Android 版本的 Chrome 浏览器，才可以连接调试。
之所以说它鸡肋，是因为并不是所有用户都使用 Chrome 浏览器，这一点尤其体现在国内。国内用户大都使用 UC 浏览器、百度浏览器以及 QQ 手机浏览器等等（），而这些浏览器通常使用的是 WebView，或者自己改造的内核。而 Chrome 作为最强大的浏览器，在它上面测试通过并不表示在当前 Android 的内置浏览器正常，通常内置浏览器功能会比较弱。
此外国内用户也有一定的比例使用微信、手机 QQ 等的内置浏览器来访问网页，使用的是 WebView 借用原生浏览器（有待进一步测试考证）。也有人测试说如果安装了 QQ 手机浏览器，那么微信、手机 QQ 里面的浏览器就使用 QQ 手机浏览器的内核。这些都造成了 Android 下面移动端调试的难度和复杂度。
因此，你需要分析你的用户使用份额，然后进行测试，而不能仅仅在最新版测试 Chrome。从这一点来看，Weinre 是最折中实用的测试方案。
基于 iOS 的移动端前端开发调试
iPhone 等一系列苹果设备对前端还是相当友好的，性能够好，Safari 浏览器也是不错，型号固定统一，问题也比较好解决，此外苹果公司也提供了一系列开发者工具。
Safari 默认是隐藏开发选项的，在第一次使用的时候，需要在 Safari 中选择 &偏好设置&-》&高级&-》&在菜单栏中显示开发选项&：
使用 iOS Simulator 调试开发
iOS Simulator 是 Xcode 开发工具内置的 iOS 模拟器，因此该功能仅能在 Mac 系统下使用。按照如下方式即可打开：
打开之后，你可以用模拟器里面的 Safari 打开需要调试的网页。它可以直接打开本地 localhost 的页面，无须任何设置。你可以选择上面菜单中的&硬件&来模拟其他 iOS 设备，包括 iPad 等。如果你升级了你的 OS X 系统和 Xcode 6，你还可以模拟 iPhone 6 和 iPhone 6 Plus。
如果需要调试，打开桌面版的 Safari，在&开发&中选择要调试的页面，即可打开 Safari 调试面板：
这样就可以进行调试了。这里提供一个技巧：将 URL 粘贴到模拟器的地址栏时，用&CMD + V&是无法粘贴进去的。如果想要粘贴，先摁下&CMD + V&然后再用鼠标点击一下地址栏，稍等会出现&Paste&按钮，再用鼠标点击一下这个按钮即可粘贴进去。
iOS 设备真机调试
模拟器已经足够强大方便了，但有些手势操作测试以及最真实的用户体验测试还是需要真机。Safari 调试真机上的网页也是非常简单的。
首先需要在 iPhone 等设备上设置一下 Safari 浏览器，开启调试功能。具体步骤：&设置&-》&Safari&-》&高级&-》&Web 检查器&。使用数据线连接电脑，在设备上用 Safari 浏览器打开需要调试的页面，之后在桌面版的 Safari 开发选项中即可看到进行调试，跟用 iOS Simulator 一样，只不过现在换成了真机。
但是调试本地网站，你可能要将手机与电脑连在一个局域网内，然后开启一个局域网 IP 的服务器进行调试，稍微麻烦。
此外 Safari 还可以调试在 iOS 上面的 WebView，比如用&等，方法类似，&还有个测试用 APP，会 iOS 开发的朋友可以看下。
提示：iOS 系统版本 8+ 的设备，需要使用 Safari 7.1+ 调试，老版本 Safari 会无法识别。你可以将 OS X 更新到 10.9.5，或者升级到 Yosemite。具体可以看&。
使用 MIHTool 进行远程调试
&是国人&&开发的，基于 Weinre，用于 iOS 设备的前端开发测试。
上面有提到 Weinre 大体的工作方式，即开启一个服务器，然后将 JS 插入到页面中，访问进行调试。MIHTool 将这个过程简化了，它是一个 APP，可以直接安装到你的 iOS 设备里面，然后内置一个简单的浏览器可以打开你的测试页面，当它开启时，会自动向页面中插入 Weinre 的 JS，并告知 Weinre 控制台 URL 等信息，让你可以访问进行调试。
它还提供了一个公共的 Weinre 调试服务，生成类似&/dev/client/#AwAj&这样的链接，打开即可调试，非常方便，就是有些卡。
除此之外，它还提供了很多方便调试的功能，有兴趣的朋友可以看下&&和&。感觉就是丑了一些，如果能请设计师或者交互设计一下，会好得多。
移动设备在线测试
移动端设备如此之多，小公司或者团队，没有这么多资金和精力购买如此多的测试设备进行测试。于是就有人买了这些设备，连接起来，提供在线调试服务。
例如用不同的设备访问你的网站，并截图：
甚至可以让你远程控制一台机器，进行测试操作：
&就提供这种服务，它可以实时在线调试，也可以&、&等等。
此外&&也提供这种服务，当然这里的 Keynote 不是 Mac 上的幻灯片 APP。它提供更加真实的 Mobile 测试，我简单的试了一下，果然比较卡，应该是真机测试：
其他移动端调试方法和技巧
UC 浏览器测试
UC 浏览器是国内使用份额最大的移动端浏览器，值得高兴的是，它专门提供了开发版方便开发者连接调试。
当然配置起来稍微麻烦，但总比没有强的多。
配置和开发文档官方已经非常详细了，这里不再赘述，请移步。
BrowserSync 同步操作
&是我最爱的多终端测试工具。在没有使用这个BrowserSync 之前的原始的测试流程一般是这样的：
先把本地的网页上传到远程服务器（因为好多设备都要去访问一个固定的地址），然后将网址输入到各个测试机的测试浏览器里面手动打开(或者使用浏览器插件等，生成二维码扫一下）。然后手机开始下载页面，需要等待下载。观看效果进行测试，每个测试机都要操作一遍。测试其他网页的时候，每个测试机重新输入网址、刷新。如果代码有修改，需要重新上传服务器进行刷新。
而 BrowserSync 这个工具，可以用你局域网 IP 创建一个本地服务器，生成一个类似http://10.189.249.135:3002&的 URL，这样所有与你电脑处在一个局域网的设备，都可以访问到你本地的页面。
建议使用无线路由器搭建一个无线局域网，所有设备都连入这个无线局域网。Win 系统电脑用软件开启 Wifi 共享也是可以的，Mac 就比较悲剧了，只有在插网线的时候，可以开启 Wifi 共享功能。
BrowserSync 还会监听文件变动，当监听的文件发生变动，会自动刷新所有连接本地服务器的页面。BrowserSync 最主要的功能是同步，同步一切操作，当你在某个浏览器中触发的操作，会在所有测试浏览器中同步操作，例如在电脑上滚动页面，所有手机都会滚动页面；电脑上更换了 URL 测试另一个页面，所有手机都跳转到另一个页面。
应用 BrowserSync 工具之后的新版测试流程就变成这样了：
用 BrowserSync 开启本地服务器，所有测试设备连接到局域网中，依次打开&http://10.189.249.135:3002/（BrowserSync 创建的本地服务器地址）。在一台设备操作，观察其他设备的情况，修改了 CSS、HTML 或者 JS 代码，保存一下，自动在所有设备自动刷新。
BrowserSync 的使用非常简单，在要创建服务器的目录下面执行：browser-sync start --server --files="*"&命令即可，表示创建一个服务器并监听该目录下的文件变动。它也有提供 Grunt 和 Gulp 插件，更多的用法移步，这里不再赘述。
BrowserSync 的原理大体是这样的，它会在 HTML 页面里面插入 JS，然后监听页面操作。所以当你滚动页面或者跳转新页面，BrowserSync 可以捕获到这个操作，通过 Socket.io 向所有 Client 的 JS 发出操作指示，其他设备也会随之&scroll&或者&location.href&跳转等，实在太巧妙。
此外，两个 BrowserSync 的小提示：
BrowserSync 默认请求&index.html，如果你的目录里面没有这个文件夹，会返回&Cannot GET /，这时候你需要指定具体的目录、文件。
在开启 BrowserSync 的命令中，--files="*"&表示要监听变动的文件。如果你指定了&--files="css/*.css"就表示只监听&css/&下的所有 css 文件变动。如果遇到修改代码没有自动刷新的问题，可能是你监听的路径和文件有问题。对于 CSS 的修改，它会采用无刷新注入的方式，JS 和 HTML 的修改，它会采用刷新的方式。
Charles 代理应用
&是 Mac 系统下面的抓包、代理工具。如果你电脑是 Win 系统，可以使用&&实现本节要介绍的技巧。
使用场景举例：当我们在本地开发时使用内网登陆功能（需要同域），往往需要绑定 Host，比如将本机&127.0.0.1绑定为&。这样我们访问本地服务器时使用&，才可以正常使用 登陆 等等服务（需要用到 Cookie）。
那我们用移动端设备测试这个页面的时候，也需要修改移动端设备上的 Host。因此 Android 需要 root，iPhone 需要越狱，而且每次都要开启，极为不方便。这时候，我们就可以使用 Charles 这里抓包工具做一个代理。
当打开 Charles 时，它会自动在本机开启一个代理服务，默认接口为&8888。这时候，我们设置同局域网内的移动设备的代理为本机局域网 IP，即可通过 Charles 转发请求，在移动设备上访问电脑可以访问的内容。基本原理如下图：
通过这个代理服务，移动设备的请求被转移到到电脑上发送出去，并将电脑得到的响应返回给移动设备。其他同类问题（想用手机访问只有电脑才能访问的内容）均可用这种方式解决。此外，因为经过 Charles 代理，因此可以使用 Charles 的查看有关请求和响应、做本地资源映射等等功能，来简化开发和调试 BUG。
启用方法详情请见：&中的 截取iPhone上的网络封包 一节，这里不再赘述。
提供一个 Charles 的小技巧：Charles 只提供了全局监听和 Firefox 监听，但我常用的是 Chrome 浏览器，我只想监听 Chrome 浏览器中某个页面的请求信息，也可以通过设置代理来解决。这里使用 SwitchySharp 代理插件（GAE FQ必备），增加一个新的情景模式，绑定本地 Charles 代理。
这样当我们想抓包某个页面时，只需要打开 Charles 并勾掉&Proxy-》Mac OS X Proxy&和&Mozilla Firefox Proxy，之后再在 SwitchySharp 中勾选这个情景模式，即可清爽的只监听 Chrome 浏览器发送的请求了。
关于 Charles 的使用，可以自行搜索教程，Fiddler 同样原理，不再赘述。
使用 Ghostlab 等集成测试工具
&是一个带着美观界面的集成的测试工具。大体功能相当于 Weinre + BrowserSync，带有简洁美观的界面，用鼠标拖动操作，简单几个点击即可启动一个本地局域网 IP 服务器，会监听网页的终端，并同步各种操作。当点击Inspect&的时候，会打开 Weinre 进行调试。
带有界面使其使用十分简单，不需要执行命令，也有很多额外的参数来辅助调试。因此这个软件是收费的，而且只针对 Mac 平台。
更具体的可以看下&，有一段介绍视频简洁明了的介绍了有关功能。
同类的产品还有&&和&&功能类似各有特点，这里不再赘述。
回顾总结与扩展阅读
移动端前端重构项目开发流程最佳实践
新建项目相关文件，然后应用 BrowserSync 等工具（可以配合&&等）启动本地服务器。在 Chrome 中启用 Emulation 来模拟 iPhone 等设备的尺寸，进行编码开发。这样就可以无刷新、比较直观的看到手机上的效果。
开发基本完成，将测试机、虚拟机等打开联入局域网，输入本地服务器地址，开始测试。对文件的修改实时刷新在所有设备中，即时看到效果。
对于有点复杂的 BUG 或者有关问题，使用 Safari 或者 Chrome 连接虚拟机或者真机进行调试。分析用户浏览器使用习惯，针对相关浏览器等进行测试。
不同测试场景下需要用到的技术和工具
响应式测试：Chrome DevTools 面板右侧拉伸快速查看效果；Firefox 响应式工具进一步调整；Chrome Emulation 精细测试。
Android 设备测试：使用 Android 虚拟机；优先使用 Weinre 测试，分析用户浏览器使用份额，有针对的进行测试。高版本 Android 测试机，使用 Chrome 连接调试。Android 4.4+ 的 WebView 修改 APP 源代码，也可以用 Chrome 调试。
低版本系统和其他品牌手机以及 WebView：统统可以用 Weinre 来解决。
iOS 设备测试：使用 Xcode 自带 iOS 模拟器，使用 Safari 调试；WebView 也可以被电脑上 Safari 调试；测试机连接电脑，也可以用 Safari 调试；MIHTool 可以在 iOS 设备上使用，提供类似 Weinre 的调试功能。
测试多种设备：BrowserStack 和 Keynote。
使用 BrowserSync 可以创建本地局域网 IP 服务器，并同步操作、监听刷新，极大减少测试操作，提高测试效率。
当移动端设备无法访问某项资源时，使用 Charles 做代理，通过电脑去访问。
扩展阅读与资料参考
阅读(...) 评论()标签：至少1个，最多5个
先声明一下关于ios中9.0打开方式的文章来自博客：
对于一个完备的互联网产品而言需要有app端与web端两个不同前端，对于产品而言很多都希望能够将wap页上的用户引向native app上这就要求前端工程师们为网页提供各种入口去打开app，今天我们就聊一聊app的打开方式（有错误的地方还请高手指正）。
对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app，如下的
myapp://open
myapp://type=1&id=2sdeo223lwe
这些抛出都是以url的方式进行抛出，app捕捉到这些抛出去做相应的处理，本文对app的处理不做详细描述，app开发请自行谷歌百度。对于前端而言抛出的方式也有很多，而最理想的方式是通过iframe的src对其进行链抛出，来！说的在多都没有代码来的清晰，请看下面。
首先我们需要有一个iframe：
//实际上就是新建一个iframe的生成器
createIframe=(function(){
return function(){
if(iframe){
iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
之后我们还需要一个url scheme:
//生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的
var baseScheme = "myApp://"
var createScheme=function(options){
var urlScheme=baseS
for(var item in options){
urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
return encodeURIComponent(urlScheme);
这种scheme形式的其实不是最好的,根据我们踩过的坑，觉得约定为与http协议相近可能更好一些，具体的协议需要前端人员自己去和app端人员约定。
ok万事具备，iframe有了，urlScheme也有了，该去打开app了
var openApp=function(){
var localUrl=createScheme();
var openIframe=createIframe();
if(isIos()){
//判断是否是ios,具体的判断函数自行百度
window.location.href = localU
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime & 1000) {
window.location.href = "你的下载页面";
}else if(isAndroid()){
//判断是否是android，具体的判断函数自行百度
if (isChrome()) {
//chrome浏览器用iframe打不开得直接去打开，算一个坑
window.location.href = localU
//抛出你的scheme
openIframe.src = localU
setTimeout(function () {
window.location.href = "你的下载页面";
//主要是给winphone的用户准备的,实际都没测过，现在winphone不好找啊
openIframe.src = localU
setTimeout(function () {
window.location.href = "你的下载页面";
以上就是你要打开scheme的主要代码了，好吧，实际上不只是打开app，还要实现未打开的时候跳到下载页去。其中安卓实际上无论有没有打开都会跳到下载页去，而ios........好吧!按照网上的说法是浏览器失焦后会挂起脚本，呵呵，这是多老的ios版本的表现了，实际上现在的ios已经没有这么做，有些版本会跟安卓的表现一样，而有些则是直接跳转根本不会去打开，还有打开的时候那个恶心的系统弹窗是什么鬼。好吧，实际上至此你会发现，ios9.0以上的有些打不开直接跳，有些打得开还会有允许弹窗，而微信则是无论如何都打不开，实际上微信会在他的浏览器里拦截掉所有未经其允许的scheme包括app store，那么接下来我们要解决这些问题。
针对ios9及以上的打不开问题，实际上ios9提供了更好的解决方案————通用链接。
什么是Universal Links(通用链接)?
这是iOS9推出的一项功能，如果你的应用支持Universal Links(通用链接)，那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app，不需要额外做任何判断等)，或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明，在iOS9之前，对于从各种从浏览器，Safari、UIWebView或者 WKWebView中唤醒APP的需求，我们通常只能使用scheme。
以上来自网上关于通用链接的介绍，对于前端简单点讲就是你访问一个http的url，如果这个url带有你提交给开发平台的配置文件中匹配规则的内容，ios系统会去尝试打开你的app，如果打不开，系统就会在浏览器中转向你要访问的链接。很好的一个属性，因为通过这个属性在ios9上我们能够绕过微信的拦截从而打开app。
以下是ios开发人员要做的百度搜索结果第一条：
而我们要做的真的很简单，实际上我们只需要抛出链接就好了（实际上博主只是来骗经验的）。在此之前请准备好与主站不同的域名，比如主站，你们可以准备好的域名作为重定向用。好吧！实际上通用链接有一个很坑的属性，必须是异域打开，而且如果你提交的是你主站的链接，你打开你的主站你会发现网站上方会挂着一个难看的灰条转向appstore中你们的app，没错，就是ios系统干的这个事，具体的其他注意事项可以参考这篇文章。
那么接下来我们的代码得做好更改
//增加通用链接的生成,
var baseScheme = "myApp://",
baseLink="?";
var createScheme=function(options,isLink){
var urlScheme=isLink?baseLink:baseS
for(var item in options){
urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
return isLink?urlScheme:encodeURIComponent(urlScheme);
然后对抛出做
var openApp=function(){
//生成你的scheme你也可以选择外部传入
var localUrl=createScheme({type:1,id:"sdsdewe2122"});
var openIframe=createIframe();
if(isIos()){
//判断是否是ios,具体的判断函数自行百度
if(isGreaterThan9()){
//判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号
localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代码还可以优化一下
location.href = localU//实际上不少产品会选择一开始将链接写入到用户需要点击的a标签里
window.location.href = localU
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime & 1000) {
window.location.href = "你的下载页面";
}else if(isAndroid()){
//判断是否是android，具体的判断函数自行百度
if (isChrome()) {
//chrome浏览器用iframe打不开得直接去打开，算一个坑
window.location.href = localU
//抛出你的scheme
openIframe.src = localU
setTimeout(function () {
window.location.href = "你的下载页面";
//主要是给winphone的用户准备的,实际都没测过，现在winphone不好找啊
openIframe.src = localU
setTimeout(function () {
window.location.href = "你的下载页面";
实际上就只需要更改这么点，最重要的是app端接入通用链接，注意抛出的链接不要跟主站同域即可，之后就是不断的调试，自己去踩坑吧，记得绑定域名，这个对域名具有一定的依赖性。
微信中打开
至此只有微信是打不开的，实际上腾讯系的产品都是打不开的，包括qq浏览器。
对于微信中有两种方式：
一种简单的方式就是弹窗告诉用户让他去浏览器中打开——在技术之外的办法
还有一种方式就是应用宝
是的如果是微信就去打开你的app对应的应用宝，应用宝会去检测你的app是否存在有则去打开，但只是去打开。实际上腾讯的应用宝对于开发者在功能上做的比想象中的要强大，你在应用宝的微下载中配置申请你的applink与app store的链接,之后你只要在你的链接参数中带上android_schema="myApp://"就在应用宝中打开app中的特定功能，如果忽略应用宝的页面跟自己scheme打开没有太大区别，具体的操作可以查看应用宝的说明。简而言之，腾讯的产品中都去借助应用宝这个平台去执行你需要的操作。在此就不贴代码了，只要判断浏览器如果是微信或者是qq就去跳你的应用宝链接就行。
实际上单纯打开app非常简单，目前无论安卓还是ios都能够很好的支持scheme，当然腾讯系产品除外，实际上百度浏览器也会拦截scheme（我觉得真是奇了葩！！！微信这种尚能理解，一个浏览器居然擅自去拦截scheme）目前对百度浏览器还没有什么很好的办法，可以尝试是否能够通过百度应用市场去解决。如果是希望打开app同时又要打开下载页，那么ios9及以上就得用通用链接去解决，重点就是这个通用链接。
6 收藏&&|&&119
你可能感兴趣的文章
99 收藏，2.8k
15 收藏，2.1k
53 收藏，9.1k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
你好题主，我关于你文中有一处不明，想请教，你题中说：「其中安卓实际上无论有没有打开都会跳到下载页去」，可我通过手机百度到的关于知乎啊，贴吧啊啥的链接，点开后，都没有跳到下载页啊，是不是我理解的有问题啊。能方便解答一下吗。谢谢。
你好题主，我关于你文中有一处不明，想请教，你题中说：「其中安卓实际上无论有没有打开都会跳到下载页去」，可我通过手机百度到的关于知乎啊，贴吧啊啥的链接，点开后，都没有跳到下载页啊，是不是我理解的有问题啊。能方便解答一下吗。谢谢。
这其实是有一个产品需求前提的，产品要求做到wap页唤起app如果用户没装app则跳转到下载页，但实际上对于前端来说我们是无法获知用户是否安装特定app的信息的，所以我们只能做到抛出scheme然后不管是否打开都直接跳下载页（通用链接除外）。你说的情况我看了一下，贴吧的打开只是单纯的贴了一个应用的下载地址不管你有没有安装都直接去下载安装包（这很有百度的风格），知乎的我没找到，不过之前对知乎进行调研的时候发现他只会提供一个打开功能，如果你有装应用那么他就会去打开，如果你没装就什么反应都没有
这其实是有一个产品需求前提的，产品要求做到wap页唤起app如果用户没装app则跳转到下载页，但实际上对于前端来说我们是无法获知用户是否安装特定app的信息的，所以我们只能做到抛出scheme然后不管是否打开都直接跳下载页（通用链接除外）。你说的情况我看了一下，贴吧的打开只是单纯的贴了一个应用的下载地址不管你有没有安装都直接去下载安装包（这很有百度的风格），知乎的我没找到，不过之前对知乎进行调研的时候发现他只会提供一个打开功能，如果你有装应用那么他就会去打开，如果你没装就什么反应都没有
我想问个问题，我使用您这个代码，但是一直都是有报错的，这是为什么？而且就算判断了ios还是android，它最后都是跳转到window的，这个又是为什么呢？能帮忙解决问题吗
我想问个问题，我使用您这个代码，但是一直都是有报错的，这是为什么？而且就算判断了ios还是android，它最后都是跳转到window的，这个又是为什么呢？能帮忙解决问题吗
代码Scheme生成的那个有点问题改了一下不过不会报错，报错主要应该是我这边用来判断的各个函数都是没有加的缘故，需要你们自己去写一下，isIos isAndroid isGreaterThan9 isChrome这些百度一下就有了所以我没加上去，如果你写了最后都跳到window的话可能是你的判断函数写错了，我自己用我的判断函数的话没有这个问题
代码Scheme生成的那个有点问题改了一下不过不会报错，报错主要应该是我这边用来判断的各个函数都是没有加的缘故，需要你们自己去写一下，isIos isAndroid isGreaterThan9 isChrome这些百度一下就有了所以我没加上去，如果你写了最后都跳到window的话可能是你的判断函数写错了，我自己用我的判断函数的话没有这个问题
在用户没有装app 的情况下 是会弹出一个 错误的，这个怎么解决？
在用户没有装app 的情况下 是会弹出一个 错误的，这个怎么解决？
什么系统的？哪个浏览器，一般来说可以改变链接的抛出方式来避开(并不绝对)，最合理的是用iframe去打开链接
什么系统的？哪个浏览器，一般来说可以改变链接的抛出方式来避开(并不绝对)，最合理的是用iframe去打开链接
ios9 Safari
好的，不知道不是是在当前页打开的原因 就提示错误，我试试 iframe ,感谢
ios9 Safari
好的，不知道不是是在当前页打开的原因 就提示错误，我试试 `iframe` ,感谢
ios9 safari用iframe已经无法跳转app
ios9 safari用iframe已经无法跳转app
好象只能用iframe，如果直接用location.href,他跳转的是在当前域名下+url Scheme，比如 location.href='myapp://',实际跳转的是 /myapp:// 这种地址
好象只能用iframe，如果直接用location.href,他跳转的是在当前域名下+url Scheme，比如 location.href='myapp://',实际跳转的是 /myapp:// 这种地址
应该是不会的，可能极少的安卓机的浏览器会这么搞，之前评测的时候有一个机器的uc还是哪个浏览器是这样子的。
应该是不会的，可能极少的安卓机的浏览器会这么搞，之前评测的时候有一个机器的uc还是哪个浏览器是这样子的。
iOS9以上确实iframe打不开APP的大家尽量考虑接上通用链接吧，微信applink的话好像现在只给提交不给通过了，所以新进产品都是用不上的
iOS9以上确实iframe打不开APP的大家尽量考虑接上通用链接吧，微信applink的话好像现在只给提交不给通过了，所以新进产品都是用不上的
AppLink在哪里申请的啊，貌似我都没地方申请。问了客服说是S级的应用才能使用AppLink。
AppLink在哪里申请的啊，貌似我都没地方申请。问了客服说是S级的应用才能使用AppLink。
我现在用的都是 window.location.href 的方法进行跳转，这个方法同ios9以上的通用链接相比，建议使用哪种呢？（不仅要打开应用，还要打开指定的某个页面）
我现在用的都是 window.location.href 的方法进行跳转，这个方法同ios9以上的通用链接相比，建议使用哪种呢？（不仅要打开应用，还要打开指定的某个页面）
楼主您的文章写得很不错，但是我还是有一点不明白，能否具体阐述一下，如何使用应用宝的Applink实现跳转到app中对应的文章页面。
楼主您的文章写得很不错，但是我还是有一点不明白，能否具体阐述一下，如何使用应用宝的Applink实现跳转到app中对应的文章页面。
应用宝有个开发者账号，这个账号可以为你的应用申请各种接口，其中有一个就是AppLink，申请通过之后就能在转向应用宝的链接里使用android_schema这个参数里面可以带有你需要抛出的scheme，简单的说就是你在应用宝开发者平台申请接口，接口申请下来之后他会开放出来一个参数让你带个scheme给他由他来抛这个scheme。你可以参考一下网易新闻在微信安卓里的表现他们是申请下来了的，我们在他们之后申请接口应用宝只能申请不给通过，不知道现在应用宝有没有开放出来。
应用宝有个开发者账号，这个账号可以为你的应用申请各种接口，其中有一个就是AppLink，申请通过之后就能在转向应用宝的链接里使用android_schema这个参数里面可以带有你需要抛出的scheme，简单的说就是你在应用宝开发者平台申请接口，接口申请下来之后他会开放出来一个参数让你带个scheme给他由他来抛这个scheme。你可以参考一下网易新闻在微信安卓里的表现他们是申请下来了的，我们在他们之后申请接口应用宝只能申请不给通过，不知道现在应用宝有没有开放出来。
请问下，在android平台下微信里可以通过加android_schema参数来唤醒app，但是ios下怎么实现呢？
请问下，在android平台下微信里可以通过加android_schema参数来唤醒app，但是ios下怎么实现呢？
universal links
@whitout universal links
但是这只支持ios9以上啊
@神秘博士 但是这只支持ios9以上啊
现在网易也不能自动唤起了。。是应用宝关了么
现在网易也不能自动唤起了。。是应用宝关了么
在openinstall上面，android和ios的跳转都可以实现了。而且也在微信里面跳转的问题也是解决了的。
在openinstall上面，android和ios的跳转都可以实现了。而且也在微信里面跳转的问题也是解决了的。
我用window.location.href="scheme"打开chrome浏览器的app，无效，请问是什么原因的？
我用window.location.href=&scheme&打开chrome浏览器的app，无效，请问是什么原因的？
我想问一下，现在大众点评可以从微信直接打开APP（安卓端），是用什么方式做的？
我想问一下，现在大众点评可以从微信直接打开APP（安卓端），是用什么方式做的？
2种可能，1是合作企业可以加入白名单，2是手机有装应用宝
2种可能，1是合作企业可以加入白名单，2是手机有装应用宝
我按照楼主的方式在安卓的AndroidManifest添加了schema，IOS是在info.plist中找了匹配的值，在被唤起的APP都在手机后台运行的情况下，安卓手机和苹果都可以正常呼起APP，但是程序被杀死的情况下，苹果的可以，但安卓的闪了以下就没了。
我按照楼主的方式在安卓的AndroidManifest添加了schema，IOS是在info.plist中找了匹配的值，在被唤起的APP都在手机后台运行的情况下，安卓手机和苹果都可以正常呼起APP，但是程序被杀死的情况下，苹果的可以，但安卓的闪了以下就没了。
百度浏览器拦截scheme也是够恶心的
百度浏览器拦截scheme也是够恶心的
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：