以前,当有需求说要做分享,第一反应,找第三方 SDK 呀,用友盟呀,从来没有用过原生的 UIActivityViewController去处理分享,依稀只记得原生的分享,只能在微信卡片上显示自定义的标题和缩略图,描述确显示不出来,只会显示当前分享的网址,QQ 不显示网址,但是也没有办法显示出我需要的摘要。
比如:
微信分享示例
但是现在需求来了,需要显示摘要,怎么办呢,突然想到 Appstore 是怎么做的分享呢,作为苹果自己的软件,总不会去用第三方吧,在经过测试后,发现,嘿呀 appstore 怎么就能在微信和QQ都显示出自己的摘要呢。接下来就是人生的起起伏伏了。
惊喜 NO.1:
在从appstore 分享出来的网址源代码中,搜索显示的摘要发现了在一个标签
og 协议,即Open Graph Protocol(开放内容协议),网页遵循了og协议,即代表允许社会化网站引用,SNS 网站也可以根据 og 的设置提取有用信息提供给用户。经验证,微信正是可以通过 og 协议,提取 title,desc, 和 image,当然协议属性不止这三个。事实上,如果没有设置 og:image ,原生分享到微信,会自动读取网页中
内第一个。如果没有设置og:title ,也会自动读取,唯一需要搞定的其实就是description。此处对与 og 标签属性做一个记录:og:type(页面类型),og:title(页面标题),og:description(页面的简单描述),og:url(页面地址),og:image(缩略图地址),og:site_name (页面所在网站名),og:videosrc(视频或者Flash地址),og:audiosrc(音频地址)
坑 NO.1:
微信可以了,但是 QQ 还不行呀,找遍 appstore 源代码,也再没有相关标签了,他好像并不是用 meta 来实现的。
惊喜 NO.2:
遍查资料发现,QQ也是有 meta 的,官方文档里就有通过meta的实现的例子。这可把自己激动坏了,感觉这事要成了。
截自腾讯移动 web 开发平台
坑 NO.2:
我把含有标签的网页在自己电脑上发布了,同一局域网下在手机上进行分享,然而!不行!分享还是老样子啊,还是没有取到 title,desc,image阿。这可如何是好,遍查网络,也来来回回看了官方介绍,也没有介绍。
惊喜 NO.3:
偶然间,看到说 QQ 的分享,分享的网页要和设置的 url 在同一域名下。灵光乍现!!!域名!!!!!自己电脑上发布的,测验的网址都是以ip 地址的形式的,后来,发布到了服务端,通过域名的方式做分享操作,喜极而泣!!!!
坑 NO.3:
我以为这都已经好了,我也告诉 boss 都好了,然而还是我太年轻了,第二天整理的时候发现,咦???QQ分享的缩略图呢!被谁吃了哇。没道理标题和描述都可以,但是图片没有呀。
惊喜 NO.4:
偶然机会发现网站地址更换了后,图片是可以拿到的,那大概率是缓存了吧,然鹅把 app 卸了装装了卸,清各种缓存,并不行,沙盒里也没有找到这图片,那么存在哪里了,到现在也不知道。希望后面能学习的更深,了解到内部机制。现在就通过改变网址了。虽然还不知道原因,但是起码知道获取是没问题的,也是个惊喜了。
坑 NO.5:
经历了起起伏伏,个人觉得总没问题了,然而这都是我以为。确实,自己各种验证过了可以了,正式使用时候发现还有坑!在我们项目系统中生成的 html,添加了标签,但是 我!拿不到!一度跟 web 开发人员发生争执。web坚称她用 safari 分享这个网页的时候,QQ有正常显示摘要,微信没有,还一度怀疑是不是微信有问题。想哭!可是我自己发布网站的时候可以的呀。
惊喜 NO.6:
最后取了网页源文件知道了原因,这个网页一开始的机制是前台进行网页渲染,也就是我拿到的待分享的网址,其实是空的,在浏览器打开的过程中,网页通过结果获取数据各种填充进去,把界面渲染出来。网址里面的内容在加载的时候是有一个从无到有的过程,这也是为什么看这个网页的源代码的时候,资源文件里是标签里动态数据是空的,但是元素里又是有的。
网页源代码
但是,当使用原生分享的时候,并没有一个渲染展示这个网页的过程,app 使用UIActivityViewController的时候只把 NSURL 传送给了系统,系统通过 url 分析内容,并没有这个过程。至于为什么 safari 上,QQ 的分享是能有解析出来的,这只能暂时猜测在 Safari 里是不是有 js 什么的机制处理过了吧。也不是很懂网站的机制。
最后的最后,通过网页端更改渲染方式,由前台渲染改成在服务端渲染解决了问题,万幸自己的功夫没有白费。不然在解决不了的情况下,估计又只能找第三方 SDK 了。
Tip:
在处理完这些还做了小常识,对于里面imge 的提供形式。
尝试1:在服务端,网址同域名下存放了一张图片,在 html 里使用不完整路径。
结果:微信无法正常显示图片,QQ可以,QQ 应该是会自己给图片地址拼接当前网址的域名
尝试2:设置图片不使用网络图片形势,直接放缩略图的 data
结果:微信可以通过图片的源文件来显示,但是 QQ 不行,QQ 无法正常显示
——all:还是放有完整路径的网络图片吧。
总结:
虽然花了一些功夫,但是我觉得坑啊,不自己踩一踩,永远都没有长进。看似遇到一个又一个的问题,谁说不是自己的能力不足呢,还是需要全面发展。多看多试多学习,曾经踩过的坑都是脑子里的洞。
小菜鸟第一次写文章,主要也为了以后不会忘记掉遇到过的问题,做此记录,希望有写的不对的多多指正。