热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

在处理分享功能时,以往通常会首先考虑使用第三方SDK,如友盟等。然而,通过实际项目经验发现,利用iOS原生的UIActivityViewController不仅可以实现高效、稳定的分享功能,还能更好地控制用户体验。本文将详细介绍如何利用iOS原生技术缓存HTML内容,并结合URL分享的最佳实践,帮助开发者在实际开发中提升应用性能和用户满意度。

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

比如:

f1b5e2b88395?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

微信分享示例

但是现在需求来了,需要显示摘要,怎么办呢,突然想到 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的实现的例子。这可把自己激动坏了,感觉这事要成了。

f1b5e2b88395?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

截自腾讯移动 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:

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

f1b5e2b88395?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

网页源代码

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

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

Tip:

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

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

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

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

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

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

总结:

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

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



推荐阅读
  • 利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码,轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行,而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
  • 国际高保真音乐流媒体平台的崛起:亚马逊与谷歌的竞争策略
    近期,亚马逊和谷歌正积极筹备推出高保真音乐流媒体服务,预计在2019年底前上线。根据市场研究机构CIRP的数据,截至2018年12月,美国智能音箱的安装量已增至6600万台,较第三季度增长显著。这一趋势对Spotify等传统流媒体平台构成了新的挑战。 ... [详细]
  • 并发编程 12—— 任务取消与关闭 之 shutdownNow 的局限性
    Java并发编程实践目录并发编程01——ThreadLocal并发编程02——ConcurrentHashMap并发编程03——阻塞队列和生产者-消费者模式并发编程04——闭锁Co ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 访问一个网页的全过程
    准备:DHCPUDPIP和以太网启动主机,用一根以太网电缆连接到学校的以太网交换机,交换机又与学校的路由器相连.学校的这台路由器与一个ISP链接,此ISP(Intern ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • Nginx 反向代理与负载均衡实验
    本实验旨在通过配置 Nginx 实现反向代理和负载均衡,确保从北京本地代理服务器访问上海的 Web 服务器时,能够依次显示红、黄、绿三种颜色页面以验证负载均衡效果。 ... [详细]
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
  • 主板IO用W83627THG,用VC如何取得CPU温度,系统温度,CPU风扇转速,VBat的电压. ... [详细]
  • 简化报表生成:EasyReport工具的全面解析
    本文详细介绍了EasyReport,一个易于使用的开源Web报表工具。该工具支持Hadoop、HBase及多种关系型数据库,能够将SQL查询结果转换为HTML表格,并提供Excel导出、图表显示和表头冻结等功能。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 深入剖析JVM垃圾回收机制
    本文详细探讨了Java虚拟机(JVM)中的垃圾回收机制,包括其意义、对象判定方法、引用类型、常见垃圾收集算法以及各种垃圾收集器的特点和工作原理。通过理解这些内容,开发人员可以更好地优化内存管理和程序性能。 ... [详细]
  • 远程过程调用(RPC)是一种允许客户端通过网络请求服务器执行特定功能的技术。它简化了分布式系统的交互,使开发者可以像调用本地函数一样调用远程服务,并获得返回结果。本文将深入探讨RPC的工作原理、发展历程及其在现代技术中的应用。 ... [详细]
  • 在项目中使用 Redis 时,了解其不同架构模式(如单节点、主从复制、哨兵模式和集群)对于确保系统的高可用性和扩展性至关重要。本文将详细探讨这些模式的特点和应用场景。 ... [详细]
author-avatar
手机用户2502926053_634
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有