iOS原生苹果缓存HTML技巧与分享URL实战经验分享

以前&＃xff0c;当有需求说要做分享&＃xff0c;第一反应&＃xff0c;找第三方 SDK 呀&＃xff0c;用友盟呀&＃xff0c;从来没有用过原生的 UIActivityViewController去处理分享&＃xff0c;依稀只记得原生的分享&＃xff0c;只能在微信卡片上显示自定义的标题和缩略图&＃xff0c;描述确显示不出来&＃xff0c;只会显示当前分享的网址&＃xff0c;QQ 不显示网址&＃xff0c;但是也没有办法显示出我需要的摘要。

比如&＃xff1a;

微信分享示例

但是现在需求来了&＃xff0c;需要显示摘要&＃xff0c;怎么办呢&＃xff0c;突然想到 Appstore 是怎么做的分享呢&＃xff0c;作为苹果自己的软件&＃xff0c;总不会去用第三方吧&＃xff0c;在经过测试后&＃xff0c;发现&＃xff0c;嘿呀 appstore 怎么就能在微信和QQ都显示出自己的摘要呢。接下来就是人生的起起伏伏了。

惊喜 NO.1:

在从appstore 分享出来的网址源代码中&＃xff0c;搜索显示的摘要发现了在一个标签

og 协议&＃xff0c;即Open Graph Protocol(开放内容协议)&＃xff0c;网页遵循了og协议&＃xff0c;即代表允许社会化网站引用&＃xff0c;SNS 网站也可以根据 og 的设置提取有用信息提供给用户。经验证&＃xff0c;微信正是可以通过 og 协议&＃xff0c;提取 title&＃xff0c;desc, 和 image&＃xff0c;当然协议属性不止这三个。事实上&＃xff0c;如果没有设置 og:image &＃xff0c;原生分享到微信&＃xff0c;会自动读取网页中

此处对与 og 标签属性做一个记录&＃xff1a;og:type(页面类型)&＃xff0c;og:title(页面标题)&＃xff0c;og:description(页面的简单描述)&＃xff0c;og:url(页面地址)&＃xff0c;og:image(缩略图地址)&＃xff0c;og:site_name (页面所在网站名)&＃xff0c;og:videosrc(视频或者Flash地址)&＃xff0c;og:audiosrc(音频地址)

坑 NO.1:

微信可以了&＃xff0c;但是 QQ 还不行呀&＃xff0c;找遍 appstore 源代码&＃xff0c;也再没有相关标签了&＃xff0c;他好像并不是用 meta 来实现的。

惊喜 NO.2:

遍查资料发现&＃xff0c;QQ也是有 meta 的&＃xff0c;官方文档里就有通过meta的实现的例子。这可把自己激动坏了&＃xff0c;感觉这事要成了。

截自腾讯移动 web 开发平台

坑 NO.2:

我把含有标签的网页在自己电脑上发布了&＃xff0c;同一局域网下在手机上进行分享&＃xff0c;然而&＃xff01;不行&＃xff01;分享还是老样子啊&＃xff0c;还是没有取到 title,desc,image阿。这可如何是好&＃xff0c;遍查网络&＃xff0c;也来来回回看了官方介绍&＃xff0c;也没有介绍。

惊喜 NO.3:

偶然间&＃xff0c;看到说 QQ 的分享&＃xff0c;分享的网页要和设置的 url 在同一域名下。灵光乍现&＃xff01;&＃xff01;&＃xff01;域名&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;自己电脑上发布的&＃xff0c;测验的网址都是以ip 地址的形式的&＃xff0c;后来&＃xff0c;发布到了服务端&＃xff0c;通过域名的方式做分享操作&＃xff0c;喜极而泣&＃xff01;&＃xff01;&＃xff01;&＃xff01;

坑 NO.3:

我以为这都已经好了&＃xff0c;我也告诉 boss 都好了&＃xff0c;然而还是我太年轻了&＃xff0c;第二天整理的时候发现&＃xff0c;咦&＃xff1f;&＃xff1f;&＃xff1f;QQ分享的缩略图呢&＃xff01;被谁吃了哇。没道理标题和描述都可以&＃xff0c;但是图片没有呀。

惊喜 NO.4:

偶然机会发现网站地址更换了后&＃xff0c;图片是可以拿到的&＃xff0c;那大概率是缓存了吧&＃xff0c;然鹅把 app 卸了装装了卸&＃xff0c;清各种缓存&＃xff0c;并不行&＃xff0c;沙盒里也没有找到这图片&＃xff0c;那么存在哪里了&＃xff0c;到现在也不知道。希望后面能学习的更深&＃xff0c;了解到内部机制。现在就通过改变网址了。虽然还不知道原因&＃xff0c;但是起码知道获取是没问题的&＃xff0c;也是个惊喜了。

坑 NO.5:

经历了起起伏伏&＃xff0c;个人觉得总没问题了&＃xff0c;然而这都是我以为。确实&＃xff0c;自己各种验证过了可以了&＃xff0c;正式使用时候发现还有坑&＃xff01;在我们项目系统中生成的 html&＃xff0c;添加了标签&＃xff0c;但是 我&＃xff01;拿不到&＃xff01;一度跟 web 开发人员发生争执。web坚称她用 safari 分享这个网页的时候&＃xff0c;QQ有正常显示摘要&＃xff0c;微信没有&＃xff0c;还一度怀疑是不是微信有问题。想哭&＃xff01;可是我自己发布网站的时候可以的呀。

惊喜 NO.6:

最后取了网页源文件知道了原因&＃xff0c;这个网页一开始的机制是前台进行网页渲染&＃xff0c;也就是我拿到的待分享的网址&＃xff0c;其实是空的&＃xff0c;在浏览器打开的过程中&＃xff0c;网页通过结果获取数据各种填充进去&＃xff0c;把界面渲染出来。网址里面的内容在加载的时候是有一个从无到有的过程&＃xff0c;这也是为什么看这个网页的源代码的时候&＃xff0c;资源文件里是标签里动态数据是空的&＃xff0c;但是元素里又是有的。

网页源代码

但是&＃xff0c;当使用原生分享的时候&＃xff0c;并没有一个渲染展示这个网页的过程&＃xff0c;app 使用UIActivityViewController的时候只把 NSURL 传送给了系统&＃xff0c;系统通过 url 分析内容&＃xff0c;并没有这个过程。至于为什么 safari 上&＃xff0c;QQ 的分享是能有解析出来的&＃xff0c;这只能暂时猜测在 Safari 里是不是有 js 什么的机制处理过了吧。也不是很懂网站的机制。

最后的最后&＃xff0c;通过网页端更改渲染方式&＃xff0c;由前台渲染改成在服务端渲染解决了问题&＃xff0c;万幸自己的功夫没有白费。不然在解决不了的情况下&＃xff0c;估计又只能找第三方 SDK 了。

Tip&＃xff1a;

在处理完这些还做了小常识&＃xff0c;对于里面imge 的提供形式。

尝试1&＃xff1a;在服务端&＃xff0c;网址同域名下存放了一张图片&＃xff0c;在 html 里使用不完整路径。

结果&＃xff1a;微信无法正常显示图片&＃xff0c;QQ可以&＃xff0c;QQ 应该是会自己给图片地址拼接当前网址的域名

尝试2&＃xff1a;设置图片不使用网络图片形势&＃xff0c;直接放缩略图的 data

结果&＃xff1a;微信可以通过图片的源文件来显示&＃xff0c;但是 QQ 不行&＃xff0c;QQ 无法正常显示

——all&＃xff1a;还是放有完整路径的网络图片吧。

总结&＃xff1a;

虽然花了一些功夫&＃xff0c;但是我觉得坑啊&＃xff0c;不自己踩一踩&＃xff0c;永远都没有长进。看似遇到一个又一个的问题&＃xff0c;谁说不是自己的能力不足呢&＃xff0c;还是需要全面发展。多看多试多学习&＃xff0c;曾经踩过的坑都是脑子里的洞。

小菜鸟第一次写文章&＃xff0c;主要也为了以后不会忘记掉遇到过的问题&＃xff0c;做此记录&＃xff0c;希望有写的不对的多多指正。