坑:记iOS原生分享URL与HTML一二事

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

比如:

微信分享示例

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

惊喜 NO.1:

在从appstore 分享出来的网址源代码中,搜索显示的摘要发现了在<header>一个标签

<meta property="og:description" content="摘要"/>

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

我把含有<meta itemprop="" content=""/>标签的网页在自己电脑上发布了,同一局域网下在手机上进行分享,然而!不行!分享还是老样子啊,还是没有取到 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 的提供形式。

<meta itemprop="image" property="og:image" content="/public/img.jpg"/>

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

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

<meta itemprop="image" property="og:image" content="图片的base64"/>

尝试2:设置图片不使用网络图片形势,直接放缩略图的 data

结果:微信可以通过图片的源文件来显示,但是 QQ 不行,QQ 无法正常显示

——all:还是放有完整路径的网络图片吧。

总结:

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,100评论 1 32
  • 打开黑夜的窗子去迎接一轮月亮远方的星辰由此而来伴随无尽的黑夜而来 黑夜是美丽的花朵星辰是美丽花朵的伤疤黑夜正在受伤...
    笑笑小郎君阅读 821评论 13 26
  • 《一笑皆消》 风卷云, 翻腾万里九重霄。 缕缕炊烟升, 奇幻身影渐消。 观山河景色, 如此美妙。 尽数天地万千, ...
    金缘逸书2017阅读 254评论 0 4
  • 他是我们公司的员工,因为因为亲戚关系在我们这公司上班。干的是杂工的活,每天看门关门,搬运货物每月工资4000左右。...
    小小思语阅读 127评论 0 1
  • 1 丘山公园里面的宫殿啊,石栏啊,拱桥啊都是老刘看着修复起来的。那时候公园还没开放,他还是石匠,脑子也没有坏。后来...
    与月阅读 331评论 3 4