iOS添加快捷方式到桌面.pdfVIP

iOS添加快捷⽅式到桌⾯ 前⾔ openURL、HTML、JavaScript、Data URI Scheme、Base64 等。通过这个需求顺便将这些知识都学习了，然后整理出来。 原理 操作过程其实很简单，就是在 app ⾥⾯通过 Safari 浏览器打开⼀个引导页⾯，然后点击添加到主屏幕，如下图 ，再点“添加”就⾏。后⾯点击图标直接打开app，跳转到对应页⾯。这个过程⾥⾯涉及两个问题 1. 添加到桌⾯时保存的就是引导页⾯ url，点击打开的时候为啥不是打开引导页⾯，⽽是直接跳转到 app⾥⾯，这个如何实现？ 2. 没⽹的情况下点击图标，打开页⾯如何能加载页⾯内容并打开app呢？ 第⼀个问题的解决办法是这样的，从 app ⾥⾯打开引导页⾯默认是⾮全屏的，但是从⼿机桌⾯点击 icon 打开是全屏的，因此可以根据是否是全 屏来执⾏对应脚本，如果是全屏那么久执⾏脚本跳转到app，如果⾮全屏则添加相应的 HTML 内容，呈现引导页。判断是否是全屏的 JavaScript ⽅法是 window.navigator.standalone，为 true 是全屏，为 false 则⾮全屏。 第⼆个问题解决办法是这样的，引导页⾯需要在没⽹的情况下也能加载，那么显然是⾸先就要保存在我们app⾥⾯，在app⾥⾯通过 openURL 打 开的页⾯没办法直接打开这个app⾥⾯的引导页⾯，因此我们写⼀个⼀个中转的HTML页⾯保存在我们服务器上，得到这个服务器上 HTML 的 url。然后使⽤ Data URI Scheme 技术，将我们本地的 HTML 页⾯转成⼀个字符串放到服务器HTML 的 url 问号后⾯。当通过到 openURL 打 开这个拼装好的 url 后，成功加载这个页⾯。然后通过 JavaScript ⽅法，获取到我们本地引导页 HTML 转的字符串，使⽤ window.location.replace()直接将当前页⾯替换为本地页⾯，然后添加到桌⾯的就是添加的本地页⾯，这⾥保存的链接就是通过 Data URI Scheme 将本地页⾯⽣成的字符串。 步骤 1. 开发引导页⾯ 引导页⾯ HTML 代码如下 !DOCTYPE html html head meta name=apple-mobile-web-app-capable content=yes meta name=apple-mobile-web-app-status-bar-style content=default meta content=text/html charset=UTF-8 http-equiv=Content-Type / meta name=viewport content=width=device-width,initial-scale=1.0,user-scalable=no / link rel=apple-touch-icon href=TransitCodeIconImageData titleTransitCodeAppTitle/title /head body a href=TransitCodeAppScheme id=qbt style=display:none/a span id=msg/span /body script if (window.navigator.standalone == true) { var lnk = document.getElementById(qbt).click(); } else { } /script /html 代码中包含的⼀些字符串含义如下： TransitCodeIconImageData：快捷⽅式在桌⾯的图标 TransitCodeAppTitle：快捷⽅式的名称 TransitCodeAppScheme：跳转页⾯对应的 scheme，⽐如 hellobike:///transitcode/home TransitCodeLaunchImageData：引导页背景图 通⽤这⼏个字符串代替实际内容，主要是为了后⾯统⼀替换，也⽅便其他业务⽅使⽤，不然写死了就只能乘车码⼀个业务使⽤了。 这⾥通过 window.navigator.standalone 可以知道引导页是否是全屏展⽰，如果是全屏那么跳转到 app 对应页⾯，⾮全屏则插⼊具体 HTML 内容，展⽰引导内容。 2. 使⽤ Data URI Scheme