flutter手机淘宝,flutter仿京东

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Flutter 与 iOS 原生 webView 对比

本文对比的是 UIWebView、WKWebView、flutter_webview_plugin（在iOS中使用的是WKWebView）的加载速度，内存使用情况。

测试网页打开的速度，只需要获取 WebView 在开始加载网页和网页加载完成时的时间戳，时间戳的差即为打开网页的时间

为了使差异更明显，我们选择较为复杂的新浪首页进行加载的对比，为了减小网络对加载速度的影响，我们让手机连接同一个网络，分别进行 10 次测试然后取平均值，另外，我们需要关闭 WebView 的缓存，防止缓存对加载速度产生影响

下面使笔者进行 10 次测试所得到的数据

结果让我有点惊讶，一直以为 WKWebView 会是个王者。结果看，速度上 WKWebView 略慢一点，不过总体差异不大（该结果仅仅是测试新浪的结果，仅供参考啦）

在这里，笔者又加了一个测试，尝试记录从 viewController 的 viewDidLoad 到 webview 的 didFinish 时间，测试了新浪的数据，如下：

UIWebViewA ： 4970、3808、3815、4250、3556 avg(4079.8) （加载完所有页面）

UIWebViewB ： 4103、3124、3070、3256、2835 avg(3277.6)（加载sina完毕）

WKWebView ： 3672、3032、2892、2912、2739 avg(3049.4)

flutter_webView ： 4532、3901、4310、3496、3378 avg(3923.4)

其中可以看到，webView 有两行，UIWebViewB 的数据就是加载 sina 主站的时间；UIWebViewA 的数据是因为在加载完 sina 主站之后，新浪又加载了一个，所以导致总时间延长，不过即使按照 UIWebViewB 的数据来比较，也是 wkWebView 略胜一筹。

此处可以看出 flutter_webView 使用的是 wkwebView，所以它吃亏的主要原因是 flutter 包了一层。

结论：

速度（didStart - didFinish） UIWebView flutter_webview WKWebView

速度（viewDidLoad - didFinish）WKWebView UIWebView flutter_webview

这里查看内存使用的是 xcode 的 debug session 中的 memory。

首先看之前测试时，连续打开十次新浪的内存情况

接着我们在看一下打开淘宝首页的内存情况

从图上可以看出，WKWebView 在内存方面有很大的优势啊，UIWebView 的内存是真的伤啊，然后 debug 看了一下 flutter_webView，他使用的就是原生的 webView 。

他相比较原生 WKWebView 的内存开销稍大一点，从测试表现来看，一般大个 30 MB 左右。

结论：内存 WKWebView flutter_webview UIWebView

可以在 html5test 中对浏览器的兼容性进行评分，通过测试发现得分分别如下

因为 flutter 里使用的就是 WK，所以和原生的 WKWebView 一样都是 444 分，比 UIWebView 的 437 略胜一筹

结论：兼容性 WKWebView = flutter_webview UIWebView

UIWebView : 速度相比较 WKWebView 稍快一点，但是内存是一大硬伤，所以只要条件允许，就不推荐使用了

WKWebView : 速度略慢一点，不过差别不大，总体可以接受。是比UIWebView更好的选择，推荐使用。

flutter_webView_plugin ：在iOS中使用的就是原生的WKWebView，所以总体和 native WKWebView 表现差不多。如果是混编项目中，因为它被包了一层，所以页面加载上存在一定的劣势，所以混编项目中仍然推荐使用 WKWebView。不过如果从多端考虑、以及项目可迁移等，那么使用也未尝不可，就是维护成本要增加一些，需要维护两套 webView。这个就需要根据自己的情况自己取舍了。

相关问答

Q1: 我的第一个flutter项目：购物app

这是个产假作业。故事是这样的。

生了娃，生活一地鸡毛。擦，碎钞机的需求怎么那么多。

当时，有一堆返利优惠券app比较火

...这里扯多了这篇文章被锁了....

我就想，来扒一扒，他们是怎么赚钱的。

结论：淘宝联盟。

淘宝联盟是阿里巴巴旗下的亲儿子，不那么有名是因为是个私生子吧，官网上还有个没听过的名号叫“阿里妈妈”，呵呵。淘宝联盟是给淘宝上推广商品的人用的，他们有一个专门的名称，叫做淘宝客，即“推广者（Publisher）”，他们帮电商平台推荐商品给别的买家，买家购买后，电商平台可以增加销量，而他们则可以获得推广佣金。

后来，知道京东也有自己的联盟平台，叫做“京东联盟”，拼多多也有，叫做“多多进宝”。

回到这些app的赚钱逻辑上来。对于用户而言，它们的两个噱头是：

“用我们的app买，你可以自用省钱”

“用我们的app，分享给别人下单，你可以赚钱！”

所以，这些app推广起来很容易啊，因为谁用谁赚钱呀！

那么为何不自己搭一个呢？

与其这些佣金落到别人口袋，不如自己直接做最顶层上线，发展出N个下线，岂不是躺着赚钱，哈哈哈哈哈

搞清楚赚钱逻辑之后，我发现淘宝联盟的api是很开放的。

商品链接： ;pid=mm_343780171_368000361_101527600308itemId=595640102734src=qtka_wxxtdx=1

其中，activityId是优惠券id，pid是推广者在阿里妈妈官网注册的id，只有这个id是我注册的，那么佣金就到我口袋去了，哈哈哈。

刚好练一下flutter，一次开发，两端使用，我一个人就可以了。app暂时取名为“小猪购”，拿粉红猪贴牌。

演示视频：

Q2: 做混合的话Uniapp和Flutter我应该学哪个啊？

Uniapp目前比较成熟，而且用的是Vue语法，学习成本比较低，而且行业里面用的也比较广泛，而Flutter的话，学习成本略高，因为要学习新的语言，还有就是目前生态不是特别完备，等他再发展发展吧。黑马程序员官网有成套免费视频哦，有什么不懂的可以直接过去学习。您的采纳是对我成长的鞭策

Q3: 苹果在“伟大”背后其实是龌龊油腻大叔（连载之一）

在几千年的商业历史上，迄今为止，应该没有一个品牌能像苹果这样在全世界范围内被广泛且深入地神话化、宗教化、图腾化，使其品牌形象在44年间逐渐升华至一种超越宗教、超越人种、超越国家且超越真实（即虚假）的崇高和伟大。这种崇高和伟大触及各种我们能想到的普世价值：自由、平等、尊重个性、创新、关怀弱势等。以至于在中华大地，特别是在知乎这种集聚着被充分洗脑的高不成低不就的果粉的平台，如果对苹果发表一些基于事实的负面评论，那将立即被群起而攻之，那种委曲和愤愤不平让人感觉甚于侮辱了他们的父母。对于苹果，这是一种幸福，也是一种目标实现，因为这正是他们每年花上百亿美元做各种营销的目的。对于商业圈内的友商，对于被苹果欺负和压榨的企业或个人，这是一种霸权主义，这是一种以大欺小，这是一种店大欺客，这是更是一种深深的无奈和悲伤。

如果将企业拟人化，44岁的苹果，无论他外表多么光鲜靓丽，从各种事实来说，在本质上苹果其实是一个唯利是图、不择手段的龌龊油腻大叔。

下面我们弄一个简单编年史来说说苹果为什么是一个唯利是图、不择手段的龌龊油腻大叔。

一、Adobe篇：苹果公报私仇封杀Flash

1982年，从施乐公司辞职创业的查尔斯与沃诺克携手创办Adobe，推出打印软件产品PostScript，大受欢迎。苹果当时的麦金塔电脑好看不好用：缺乏应用软件，于是乔布斯请查尔斯与沃诺克吃饭喝酒，让Adobe为苹果的封闭系统开发苹果版的PostScript，最终双方达成合作意向。苹果还投资250万美元购买了340万股Adobe的股票。Adobe技术结合苹果产品组合获得了成功。

1985年，乔布斯被苹果董事会扫地出门。Adobe的创始人沃诺克为乔布斯说好话，并继续与乔布斯保持密切联系，引起当时苹果强烈不满。于是在1989年，苹果联合微软收拾Adobe，让微软为苹果提供替代PostScript的应用，并卖掉全部Adobe的股票。股票套现成功，赚了约8000万美元，但联合行动失败，苹果在1991年被迫与Adobe恢复合作伙伴关系。

（评论：这是苹果的第一次公报私仇。）

1996年底，乔布斯回归奄奄一息的苹果。1998年，乔布斯找Adobe，希望Adobe为苹果电脑开发一套视频处理软件。当时苹果电脑市场份额低至5%，而开发一套视频处理软件需要耗费巨大的人力物力，Adobe觉得这个项目实在没办法赚钱，于是婉拒了乔布斯，没想到这为10多年后埋下了祸根。

（评论：记仇是苹果各种龌龊行为的一个显著特征。）

2007年，第一代iPhone发布，一炮而红，但iPhone与当时火热的Adobe Flash不兼容（当时世界上所有其他手机厂商都支持Flash）。Adobe争取苹果的支持，但乔布斯拒绝表态。

2008年，第二代iPhone（iPhone 3G）发布。对于Flash，乔布斯模糊地说了一句：Flash并不是很适合iPhone。Adobe觉得还有希望，继续争取。

2009年，第三代iPhone（iPhone 3GS）发布。乔布斯还是没有明确表态。

2010年1月，Adobe决定不等了，称不管苹果愿意与否都投入到针对iOS的Flash开发。同年4月，乔布斯写了一封长篇公开信，宣布iOS不支持Flash，并一口气判了Flash六宗罪，并在别的公开场合跳出产品范畴攻击Adobe这个企业：“Adobe很懒惰…..他们缺乏像苹果一样的行事方法”。对于乔布斯的六宗罪，Adobe进行了逐一反驳，但当然没用。在苹果封杀和各种诋毁下，Flash在最终被HTML5等其他技术淘汰，将在2020年底彻底停止更新。

（评论：乔布斯为了这完美复仇，足足等了14年，而且在iPhone推出后，还继续等了3年多才公开表态，因为他知道要等iPhone足够强了才能有底气与Adobe彻底摊牌，否则这个复仇风险太高。如果在iPhone还不强的时候与Adobe正式宣战，万一Adobe全面停止对苹果产品的支持怎么办？要知道，龌龊需要资本，油腻说明有经验。下面我们看看乔布斯的六宗罪是怎么说的。）

第一罪：Flash是一套封闭的系统。

（评论：我的天！苹果还有脸说别人封闭！苹果整个生态都是封闭的好吗？听到苹果说别人封闭，不仅我们觉得好笑，Adobe也觉得好笑，它的官方回复是：“非常幽默。”Flash的确是一个开放的标准，在2009年它在全球有13亿次安装量，超过200万Flash开发者，92%的Windows用户会装Flash Player，无数动画和游戏都需要Flash。）

第二罪：完整的网络：苹果的用户不用Flash没问题，因为有别的可玩的。

（评论：这个神逻辑很有川建国的风范。逻辑可以简化为：你有个好东西，好多人都用，但我就不用，为什么？因为我有别的东西，别的东西也很好。请问这解释了不用的原因吗？没有。这只是说了不用的补救措施，随便吹嘘一下自己。）

第三罪：可靠性、安全性和性能：Flash造成Mac死机，Flash不安全，Flash在移动端表现不行。

（评论：这是无数果粉用来洗白苹果的理由，更用Flash最终消亡的结果神化乔布斯，说他多么高瞻远瞩，其实根本是胡扯。如果一个软件能引起一个电脑的操作系统死机，你说这个操作系统本身还安全可靠吗？说Flash不安全，感觉的确有点道理，Flash的确好多漏洞，Adobe及Flash的开发者一直在补漏洞。但话又说回来，系统开放的代价是风险提高，但不能因为这个系统有一点风险就彻底否定它，而是应该综合衡量各种因素，特别是用户体验。系统的安全是靠迭代去提升的，不可能一开始就有完美的系统，包括苹果自己。苹果即使是封闭的系统，他的iCloud不是总被攻破吗？iPhone不是也总被刷机破解吗？一件事情要放在一定的历史背景下讨论才有意义：在2000年到2010年间，Flash的的确确让十多亿的用户提供了便利和乐趣，在当时，Flash的确也是苹果客户想兼容的。最后，乔布斯说Flash在移动端表现不行，但事实是当时Flash Player在Google Play上曾广受欢迎，有三分之二的用户给其打了最高分。最终Flash的确是消亡了，但它的消亡一半是因为苹果的封杀（其实还有微软和Youtube的封杀），一半是HTML5在技术上的确有优势，但这个客观结果绝对不能用来洗白乔布斯主观上的公报私仇。再补充一点，果粉老是吹嘘苹果怎么把安全视为生命线，但事实是乔布斯并没有把这点放在最重要的第一罪或最后一罪。）

第四罪：耗电：Flash是软件解码，所以耗电多了1倍。

（评论：乔布斯的原话是：“iPhone播放H.264视频可以坚持10小时，而使用软件解码模式，电池在5小时内耗尽。”请问哪一代的iPhone可以连续看视频10小时？从来没有好不好？iPhone出了名耗电惊人，华为说这个话我们可能相信，苹果说这话自己不心虚？Adobe在安卓上已经验证过用Flash和不用Flash看视频的电量区别，乔布斯根本就是胡扯。）

第五罪：Flash做触摸屏体验不行，而且开发者需要花很多额外的劳动在Flash上实现触摸。

（评论：事实已经证明乔布斯在这点上也是毫无根据。Flash在安卓上体验完美，一点问题没有。至于说开发者不高兴，Flash在当时有无数的应用，开发者都挤破头加入，他们没不高兴，你乔布斯为什么不高兴？Flash收取开发者的费用非常低廉（使用低级功能免费），与苹果的30%抽成相比，你说开发者更喜欢谁？）

第六罪：乔布斯说这是最重要的原因：Flash是一个跨平台开发工具，因此Adobe的目标不是帮助开发者编写最棒的苹果应用软件，于是苹果客户也不能有最好的体验。

（评论：这个逻辑是伪逻辑。为什么Flash是一个跨平台开发工具就能推导出Adobe的目标不是帮助开发者编写最棒的苹果应用软件？我们能举出一堆世界级的跨平台开发工具给iOS带来好体验的例子：腾讯的微信小程序，谷歌的Flutter（咸鱼，京东及美团在用），Facebook的React Native（QQ音乐，QQ空间及手机百度在用），阿里的Weex（淘宝及支付宝在用），还有Adobe的PhoneGap（对的，是你乔布斯说的跨平台不好，现在也是跨平台的工具，还更是Adobe的东西，这个你怎么又不封杀呢？）。可见，乔布斯这一点也是扯淡的。）

综合上面六个罪，乔布斯没有一个理由是靠得住的，这也在侧面证明了苹果封杀Flash纯粹就是以大欺小，公报私仇。

下一篇预告：iPhone 4信号门篇：苹果欺骗客户让客户换个姿势打电话

Q4: Flutter_图片分辨率适配及批量拓展使用

flutter开发中，图片的引用是必不可少的，所以为了提高效率和精准度，我们需要对不同分辨率的手机使用相对应的切图图片，本章介绍如何进行图片分辨率适配和图片批量拓展处理。

flutter中会首先根据系统的devicePixelRatio（每一个逻辑像素包含多少个原始像素，可以通过MediaQueryData.devicePixelRatio来得到）来找对应倍数的文件夹下的图片，如果没有对应倍数，找最接近的。

所以在flutter项目中，我们需要构建对应的倍数像素文件夹

之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，会自动适配该像素下最接近的jay图片）。

使用flutter-img-sync插件批量化处理，具体操作如下

目前还不能处理gif、webp等格式的图片，而且如果和上边介绍的不同像素比适配方案一起使用的话，由于进行了精准定位，所以指定图片后就不能进行像素适配，这是目前还存在的较大问题，所以目前两者方案只能暂时取一使用。

Q5: Flutter—手机消息推送（notification）

在flutter中使用notifacation,目前可以使用官方的插件 Flutter Local Notifications Plugin 来实现。

在pubspec.yaml中添加