以前，当有需求说要做分享，第一反应，找第三方 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：还是放有完整路径的网络图片吧。

总结：

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

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