• 关于

    android 动画 不同

    的搜索结果

问题

求解,关于安卓屏幕监听的问题 !

爵霸 2019-12-01 20:05:11 876 浏览量 回答数 1

问题

【Android学习全家桶】155道Android热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:24 2181 浏览量 回答数 2

问题

请问Android中ViewFlipper图片切换动画怎么写?

爵霸 2019-12-01 19:25:54 934 浏览量 回答数 1

阿里云高校特惠,助力学生创业梦!0元体验,快速入门云计算!

学生动手场景应用,快速了解并掌握云服务器的各种新奇玩法!

问题

移植到 Direct3D 11:报错 

kun坤 2020-06-04 21:07:16 6 浏览量 回答数 1

回答

一、 Afinal官方介绍:Afinal是一个Android的ioc,orm框架,内置了四大模块功能:FinalAcitivity,FinalBitmap,FinalDb,FinalHttp。通过finalActivity,我们可以通过注解的方式进行绑定ui和事件。通过finalBitmap,我们可以方便的加载bitmap图片,而无需考虑oom等问题。通过finalDB模块,我们一行代码就可以对android的sqlite数据库进行增删改查。通过FinalHttp模块,我们可以以ajax形式请求http数据。详情请通过以下网址查看。Afinal 是一个android的sqlite orm 和 ioc 框架。同时封装了android中的http框架,使其更加简单易用;使用finalBitmap,无需考虑bitmap在android中加载的时候oom的问题和快速滑动的时候图片加载位置错位等问题。Afinal的宗旨是简洁,快速。约定大于配置的方式。尽量一行代码完成所有事情。项目地址:https://github.com/yangfuhai/afinal功能:一个android的ioc,orm框架,内置了四大模块功能:FinalAcitivity,FinalBitmap,FinalDb,FinalHttp。通过finalActivity,我们可以通过注解的方式进行绑定ui和事件。通过finalBitmap,我们可以方便的加载bitmap图片,而无需考虑oom等问题。通过finalDB模块,我们一行代码就可以对android的sqlite数据库进行增删改查。通过FinalHttp模块,我们可以以ajax形式请求http数据。优点:功能比较全面,文档完善,代码效率比较高。缺点:没有项目demo,框架的时间比较久,代码冗余比较多(这也是无可避免的),文档比较老跟不上代码更新进度。(这个评价是其他高人评的,他自己也有写了框架。我个人觉得以前Afinal算是经典了 用的人多)。二、 xUtilsGit地址:https://github.com/wyouflf/xUtilsxUtils:可以说是Afinal的升级版。xUtils 包含了很多实用的android工具。xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更加灵活的ORM,更多的事件注解支持且不受混淆影响...xUitls 最低兼容android 2.2 (api level 8)三、 ThinkAndroid项目地址:https://github.com/white-cat/ThinkAndroid官方介绍:ThinkAndroid是一个免费的开源的、简易的、遵循Apache2开源协议发布的Android开发框架,其开发宗旨是简单、快速的进行Android应用程序的开发,包含Android mvc、简易sqlite orm、ioc模块、封装Android httpclitent的http模块,具有快速构建文件缓存功能,无需考虑缓存文件的格式,都可以非常轻松的实现缓存,它还基于文件缓存模块实现了图片缓存功能,在android中加载的图片的时候,对oom的问题,和对加载图片错位的问题都轻易解决。他还包括了一个手机开发中经常应用的实用工具类,如日志管理,配置文件管理,android下载器模块,网络切换检测等等工具优点:功能看起来比较完善。个人觉得名字起的好。缺点:从2013年就停止维护了,没有项目文档。四、 LoonAndroid官方介绍:如果你想看ui方面的东西,这里没有,想要看牛逼的效果这里也没有。这只是纯实现功能的框架,它的目标是节省代码量,降低耦合,让代码层次看起来更清晰。整个框架一部分是网上的,一部分是我改的,为了适应我的编码习惯,还有一部分像orm完全是网上的组件。在此感谢那些朋友们。 整个框架式的初衷是为了偷懒,之前都是一个功能一个jar,做项目的时候拉进去,这样对于我来说依然还是比较麻烦。最后就导致我把所有的jar做成了一个工具集合包。 有很多框架都含有这个工具集合里的功能,这些不一定都好用,因为这是根据我个人使用喜欢来实现的,如果你们有自己的想法,可以自己把架包解压了以后,源码拉出来改动下。 目前很多框架都用到了注解,除了androidannotations没有入侵我们应用的代码以外,其他的基本上都有,要么是必须继承框架里面的activity,要么是必须在activity的oncreat里面调用某个方法。 整个框架式不同于androidannotations,Roboguice等ioc框架,这是一个类似spring的实现方式。在整应用的生命周期中找到切入点,然后对activity的生命周期进行拦截,然后插入自己的功能。开源地址:https://github.com/gdpancheng/LoonAndroid功能:1自动注入框架(只需要继承框架内的application既可)2图片加载框架(多重缓存,自动回收,最大限度保证内存的安全性)3网络请求模块(继承了基本上现在所有的http请求)4 eventbus(集成一个开源的框架)5验证框架(集成开源框架)6 json解析(支持解析成集合或者对象)7 数据库(不知道是哪位写的 忘记了)8 多线程断点下载(自动判断是否支持多线程,判断是否是重定向)9 自动更新模块10 一系列工具类有点:功能多缺点:文档方面五、 KJFrameForAndroid项目地址:https://github.com/kymjs/KJFrameForAndroid官方介绍:KJFrameForAndroid 又叫KJLibrary,是一个android的orm 和 ioc 框架。同时封装了android中的Bitmap与Http操作的框架,使其更加简单易用;KJFrameForAndroid的设计思想是通过封装Android原生SDK中复杂的复杂操作而达到简化Android应用级开发,最终实现快速而又安全的开发APP。我们提倡用最少的代码,完成最多的操作,用最高的效率,完成最复杂的功能。功能:一个android的orm 和 ioc 框架。同时封装了android中的Bitmap与Http操作的框架,使其更加简单易用; KJFrameForAndroid开发框架的设计思想是通过封装Android原生SDK中复杂的复杂操作而达到简化Android应用级开发,最终实现快速而又安全的开发APP。总共分为五大模块:UILibrary,UtilsLibrary,HttpLibrary,BitmapLibrary,DBLibrary。优点:功能比较全面,代码效率很高,文档完善,有项目demo,出来的比较晚借鉴了很多大型框架经验。缺点:项目文档是html页面,查看起来很不方便,项目交流平台没多少人说话(难道大神都是不说话的?)(这两个评价是KJFrameForAndroid的作者对自己的评价,个人觉得作者是个天才。他的评价可能刚写完网上发布后写的。我在给他更新评价。因为现在已经过去了几个月一直在时不时更新。功能很全,项目文档也很全面,而且代码里注释最多 这方面这个很难得。交流平台人很多挺热闹,作者希望更热闹这样框架越来越完善。对于初学者希望看到Demo更完善)六、 dhroid官方介绍:dhroid 是基于android 平台, 极速开发框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展.使你更快,更好的开发商业级别应用开源地址: http://git.oschina.net/tengzhinei/dhroid功能:1.Ioc容器: (用过spring的都知道)视图注入,对象注入,接口注入,解决类依赖关系2.Eventbus: android平台事件总线框架,独创延时事件,事件管理轻松3.Dhnet: 网络http请求的解决方案,使用简单,减少代码,自带多种网络访问缓存策略4.adapter模块: 数据绑定轻松,不用写多余的adapter,天生网络支持(一行代码搞定加载,刷新问题)5.DhDb: android中sqlite的最轻量orm框架(增删改查轻松搞定)6.Perference: android自带Perference 升级版,让你的Perference更强大,更方便工具集合 JSONUtil(安全处理json),ViewUtil(数据绑定更快) ThreadWorker(异步任务工具)...优点:功能全面,有demo,作者也是为公司开发的框架。缺点:文档方面现在不是很好,就eoe上的那些。七、 SmartAndroid项目地址:http://www.aplesson.com/smartAndroid/demos官方介绍:SmartAndroid是一套给 Android开发者使用的应用程序开发框架和工具包。它提供一套丰富的标准库以及简单的接口和逻辑结构,其目的是使开发人员更快速地进行项目开发。使用 SmartAndroid可以减少代码的编写量,并将你的精力投入到项目的创造性开发上。功能:SmartAndroid 拥有全范围的类库,可以完成大多数通常需要的APP开发任务,包括: 异步网络操作相关所有功能、强大的图片处理操作、轻量级ORM数据库Sqlite库、zip操作 、动画特效、Html等解析采集、事件总线EventBus/Otto、Gson(Json)、AQuery、主流所有UI控件(例如:ActionbarSherlock,SlidingMenu,BottomView,Actionbar,DragListView等10多种UI库)等。优点:功能非常全,超出你索要、文档完善(作者很全面,官方网站是web响应式网站,框架里功能有UI各种特效应该最全了,一直更新中)缺点:jar包大点?(功能多不可避免,不是问题),在线文档(随响应式的手机访问也方便,但是网速慢就不好了,页面打开不是很流畅)八、 andBase官方介绍:andbase是为Android开发者量身打造的一款开源类库产品开源地址:https://code.jd.com/zhaoqp2010_m/andbase功能:1.andbase中包含了大量的开发常用手段。如网络下载,多线程与线程池的管理,数据库ORM,图片缓存管理,图片文件下载上传,Http请求工具,常用工具类(字符串,日期,文件处理,图片处理工具类等),能够使您的应用在团队开发中减少冗余代码,很大的提高了代码的维护性与开发高效性,能很好的规避由于开发疏忽而导致常犯的错误。2.andbase封装了大量的常用控件。如list分页,下拉刷新,图片轮播,表格,多线程下载器,侧边栏,图片上传,轮子选择,图表,Tab滑动,日历选择器等。3.强大的AbActivity,您没有理由不继承它。继承它你能够获得一个简单强大可设置的操作栏,以及一系列的简单调用,如弹出框,提示框,进度框,副操作栏等。4.提供效率较高图片缓存管理策略,使内存大幅度节省,利用率提高,效率提高。程序中要管理大量的图片资源,andbase提供简单的方法,几步完成下载与显示,并支持缩放,裁剪,缓存功能。5.封装了大量常见工具类。包括日期,字符,文件,图片等各种处理函数,多而全。6.用andbase大量减少handler的使用,而采用回调函数,代码更整洁。handler会产生大量代码,并且不好维护,andbase对handler进行了封装。7.简单轻量支持注解自动建表的ORM框架(支持一/多对多的关联操作)。写sql,建表,工作量大,andbase提供更傻瓜异步增删改查工具类。8.异步请求http框架,网络请求标准化,支持文件上传下载,get,post,进度显示。包含了异步与http请求的工具类,实用。9.热情的支持群体。优点:功能很全,demo做的好 、API文档完善、接近完美缺点:希望文档更详细些。九、 AndroidAnnotations项目地址:https://github.com/excilys/androidannotations功能:完全注解框架,一切皆为注解:声明控件,绑定控件,设置监听,setcontentview,长按事件,异步线程,全部通过注解实现。优点:完全的注解,使开发起来更加便利,程序员写的代码也更少。缺点:文档是全英文的加上功能比较少没有具体研究,由于一切都是注解,感觉效率不高,不过根据官方介绍说并不是使用的反射加载,所以效率比一般注解高很多。十、 volley项目地址: https://github.com/smanikandan14/Volley-demo功能:Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健壮异步加载网络图片、网络数据优点:Google官方推荐,请看去年的开发者大会介绍。缺点:功能比较少,只有网络数据加载和网络图片加载十一、 android-async-http项目地址:https://github.com/loopj/android-async-http文档介绍:http://loopj.com/android-async-http/ (1) 在匿名回调中处理请求结果 (2) 在UI线程外进行http请求 (3) 文件断点上传 (4) 智能重试 (5) 默认gzip压缩 (6) 支持解析成Json格式 (7) 可将Cookies持久化到SharedPreferences 有点:很简单很实用缺点:功能比较少, (只是针对的功能不是什么缺点)最后来个总结吧: 以上的开发框架网上都可以下载源码,也有demo实例的。当然我没分析和对比框架的效率性能,但是都非常实用,其作者大部分是个人,都是些牛人或天才。你可以直接使用,也可以把有用跳出来用,至少有很多使用工具。如果有发现Bug,作者希望把bug交给他。 Afinal 和 xUtils简单实用但是demo和更新的问题。 KJFrameForAndroid 算是新出的,功能也多,效率也应该好,代码也注释多 用起来也很方便。Dhroid 作者自己公司的框架,也可以直接请教。SmartAndroid 强劲的框架功能俱全。andBase 出来早各个方面算是完整的吧。转自:http://blog.csdn.net/buddyuu/article/details/40503471

元芳啊 2019-12-02 00:55:54 0 浏览量 回答数 0

回答

浅谈Flutter框架原理及其生态圈 Flutter的锋芒 跨平台高性能的渲染引擎逐渐成为移动端、大前端领域的一个热点,作为其中的明星框架Flutter,经过近几年来的迅速发展,由极大的可能成为下一代跨端终端解决方案。自从2017 年 5 月,谷歌公司发布的了 Alpha 版本的 Flutter; 2018 年底 Flutter Live 发布的 1.0 版本;2019年7月发布1.5版本,截止今日(2020年2月)已经发布了v1.14.6 Beta版本。 在Flutter诞生之前,已经有许多跨平台UI框架的方案如Cordova、ReactNative、weex、uni-app、Hippy等,常见的需要处理兼容的终端平台也包括android、ios、web、Iot等,但是在大前端的浪潮下,对于企业和开发者来说开发效率和使用体验都十分重要,传统的做法莫过于分不同的团队开发不同的终端项目,如果还要继续向其他平台,拓展的话,我们需要付出的成本和时间将成倍增长。正因为如此,在这样的背景下,Flutter等跨端框架的兴起,从本质上讲,帮助开发者增加业务代码的复用率,减少因为要适配多个平台带来的工作量,从而降低开发成本、提高开发效率。 纵观已有的跨端方案,可以分为三类:Web 容器、泛 Web 容器、自绘引擎框架。 基于web容器即基于浏览器的跨平台也做得越来越好,自然管线也越来越短,与native的一些技术手段来实现性能上的相互补充。比如Egret、Cocos、Laya这些游戏引擎,它们在跨平台方面的做法多以Typescript编写,在iOS和安卓平台的各种浏览器中轻松的运行HTML5游戏,并在不同平台浏览器里提供近乎一致的用户体验,比如Egret还会提供高效的 JS-C Binding 编译机制,以满足游戏编译为原生格式的需求,不过大多数HTML游戏引擎也属于web容器这个范畴内。web容器框架也有一个明显的致命(在对体验&性能有较高要求的情况下)的缺点,那就是WebView的渲染效率和JavaScript执行性能太差。再加上Android各个系统版本和设备厂商的定制,很难保证所在所有设备上都能提供一致的体验。 泛 Web 容器框架比如ReactNative和Weex,即上层通过面向前端友好的UI,下层通过native的渲染形式,虽然同样使用类HTML+JS的UI构建逻辑,但是最终会生成对应的自定义原生控件,以充分利用原生控件相对于WebView的较高的绘制效率,同时H5与native相互补充来达到更好的用户体验,这也是一种很好的解决方案。缺陷也很明显,随着系统版本变化和API的变化,开发者可能也需要处理不同平台的差异,甚至有些特性只能在部分平台上实现,这样框架的跨平台特性就会大打折扣。 自绘引擎框架这里专指Flutter框架,从底层就承担跨端的任务和渲染方式,从目前来看,从技术的实现和方案的成熟度、产品的性能方面比较,Flutter有很大可能成为下一代主流跨平台框架。 Flutter与其他跨端框架的不同点之一就是自带渲染引擎,Flutter渲染引擎依靠跨平台的Skia图形库来实现,Skia引擎会将使用Dart语言构建的抽象的视图结构数据加工成GPU数据,交由 OpenGL 最终提供给 GPU 渲染,至此完成渲染闭环,因此可以在最大程度上保证一款应用在不同平台、不同设备上的体验一致性。 而开发语言选用的是同时支持 JIT和 AOT的 Dart语言,Dart本身提供了三种运行方式,应对web环境,用Dart2js编译成JavaScript代码,运行在常规浏览器中;使用DartVM直接在命令行中运行Dart代码;AOT方式编译成机器码,例如Flutter App框架。而且Dart 避免了抢占式调度和共享内存,可以在没有锁的情况下进行对象分配和垃圾回收,在性能方面表现相当不错,不仅保证了开发效率,代码性能和用户体验也更卓越。因此,Flutter在各类跨平台移动开发方案中脱颖而出。同时在去年2019的Google IO大会上,备受关注的Fuchsia系统虽然并没有发布,但是宣布了 Flutter除了支持开发 Android 和 iOS 程序之外,现在还支持开发Web程序了,在 I/O 大会上,谷歌发布了 Web 版 Flutter 的首个技术预览版,宣布 Flutter 将为包括 Google Home Hub 在内的 Google Smart Display 平台提供技术支持,并迈出利用 Chrome 操作系统支持桌面级应用的第一步。 很多JS开发者会思考Google Flutter团队至于为啥选择Dart而不是JS,其实Google 公司给出的原因很简单也很直接:Dart 语言开发组就在隔壁,对于 Flutter 需要的一些语言新特性,能够快速在语法层面落地实现;而如果选择了 JavaScript,就必须经过各种委员会(TC39等)和浏览器提供商漫长的决议。 Flutter绘制原理 在计算机系统中,图像的显示需要 CPU、GPU 和显示器一起配合完成:CPU 负责图像数据计算,GPU 负责图像数据渲染,而显示器则负责最终图像显示。 CPU 把计算好的、需要显示的内容交给 GPU,由 GPU 完成渲染后放入帧缓冲区,随后视频控制器根据垂直同步信号(VSync)以每秒 60 次的速度,从帧缓冲区读取帧数据交由显示器完成图像显示。 操作系统在呈现图像时遵循了这种机制,而 Flutter 作为跨平台开发框架也采用了这种底层方案。下面有一张更为详尽的示意图来解释 Flutter 的绘制原理。可以看到,Flutter 关注如何尽可能快地在两个硬件时钟的 VSync 信号之间计算并合成视图数据,然后通过 Skia 交给 GPU 渲染:UI 线程使用 Dart 来构建视图结构数据,这些数据会在 GPU 线程进行图层合成,随后交给 Skia 引擎加工成 GPU 数据,而这些数据会通过 OpenGL 最终提供给 GPU 渲染。 Skia原理 Skia 是一款用由C++ 开发的2D 图像绘制引擎。在2005 年被 Google 公司收购后被广泛应用在 Android和其他等核心产品上,Skia 目前是Android 官方的图像渲染引擎,因此 Flutter Android SDK 无需内嵌 Skia 引擎就可以获得天然的 Skia 支持;而对于 iOS 平台来说,由于 Skia 是跨平台的,因此它作为 Flutter iOS 渲染引擎被嵌入到 Flutter 的 iOS SDK 中,替代了 iOS 闭源的 Core Graphics/Core Animation/Core Text,这也正是 Flutter iOS SDK 打包的 App 包体积比 Android 要大一些的原因。 底层渲染能力统一了,上层开发接口和功能体验也就随即统一了,开发者再也不用操心平台相关的渲染特性了。也就是说,Skia 保证了同一套代码调用在 Android 和 iOS 平台上的渲染效果是完全一致的。 Flutter架构 Framework底层是Flutter引擎,引擎主要负责图形绘制(Skia)、文字排版(libtxt)和提供Dart运行时,引擎全部使用C++实现,Framework层使我们可以用Dart语言调用引擎的强大能力。Flutter 架构采用分层设计,从下到上分为三层,依次为:Embedder、Engine、Framework。 Embedder 是操作系统适配层,实现了渲染 Surface 设置,线程设置,以及平台插件等平台相关特性的适配。从这里我们可以看到,Flutter 平台相关特性并不多,这就使得从框架层面保持跨端一致性的成本相对较低。 Engine 层主要包含 Skia、Dart 和 Text,实现了 Flutter 的渲染引擎、文字排版、事件处理和 Dart 运行时等功能。Skia 和 Text 为上层接口提供了调用底层渲染和排版的能力,Dart 则为 Flutter 提供了运行时调用 Dart 和渲染引擎的能力。而 Engine 层的作用,则是将它们组合起来,从它们生成的数据中实现视图渲染。 Framework 层则是一个用 Dart 实现的 UI SDK,包含了动画、图形绘制和手势识别等功能。为了在绘制控件等固定样式的图形时提供更直观、更方便的接口,Flutter 还基于这些基础能力,根据 Material 和 Cupertino 两种视觉设计风格封装了一套 UI 组件库,开发者可以直接使用这些组件库。 Flutter运行流程 页面中的各界面元素(Widget)以树的形式组织,即控件树。Flutter 通过控件树中的每个控件创建不同类型的渲染对象,组成渲染对象树。在Flutter界面渲染过程分为三个阶段:布局、绘制、合成,布局和绘制在Flutter框架中完成,合成则交由引擎负责。 Flutter 采用深度优先机制遍历渲染对象树,决定渲染对象树中各渲染对象在屏幕上的位置和尺寸。在布局过程中,渲染对象树中的每个渲染对象都会接收父对象的布局约束参数,决定自己的大小,然后父对象按照控件逻辑决定各个子对象的位置,最终完成布局过程。这里只需要注意一点,无论布局还是绘制,都是父子间的遍历关系:父Widget的布局需要依赖子Widget的布局结果;而绘制则反过来(子Widget需要盖在父Widget上),布局是后续遍历,绘制是前序遍历,他们都是深度优先遍历。 Flutter生命周期 可以看到,Flutter中State 的生命周期可以分为 3 个阶段:创建(插入视图树)、更新(在视图树中存在)、销毁(从视图树中移除)。接下来,我们一起看看每一个阶段的具体流程。 第一步创建 State 初始化时会依次执行 :构造方法 -> initState -> didChangeDependencies -> build,随后完成页面渲染。构造方法是 State 生命周期的起点,Flutter 会通过调用StatefulWidget.createState() 来创建一个 State。我们可以通过构造方法,来接收父 Widget 传递的初始化 UI 配置数据。这些配置数据,决定了 Widget 最初的呈现效果。 initState,会在 State 对象被插入视图树的时候调用。这个函数在 State 的生命周期中只会被调用一次,所以我们可以在这里做一些初始化工作,比如为状态变量设定默认值。 didChangeDependencies 则用来专门处理 State 对象依赖关系变化,会在 initState() 调用结束后,被 Flutter 调用。 build,作用是构建视图。经过以上步骤,Framework 认为 State 已经准备好了,于是调用 build。我们需要在这个函数中,根据父 Widget 传递过来的初始化配置数据,以及 State 的当前状态,创建一个 Widget 然后返回。 第二步更新 Widget 的状态更新,主要由个方法触发:setState、didchangeDependencies、didUpdateWidget。 setState:我们最熟悉的方法之一。当状态数据发生变化时,我们总是通过调用这个方法告诉 Flutter:“我这儿的数据变啦,请使用更新后的数据重建 UI!” didChangeDependencies:State 对象的依赖关系发生变化后,Flutter 会回调这个方法,随后触发组件构建。哪些情况下 State 对象的依赖关系会发生变化呢?典型的场景是,系统语言 Locale 或应用主题改变时,系统会通知 State 执行 didChangeDependencies 回调方法。 didUpdateWidget:当 Widget 的配置发生变化时,比如,父 Widget 触发重建(即父 Widget 的状态发生变化时),热重载时,系统会调用这个函数。一旦这三个方法被调用,Flutter 随后就会销毁老 Widget,并调用 build 方法重建 Widget。 第三步销毁 比如组件被移除,或是页面销毁的时候,系统会调用 deactivate 和 dispose 这两个方法,来移除或销毁组件。 Flutter生态圈及其常用框架 一项技术一个框架是否流行,最直观的体现就是它的生态圈是否活跃,下面列举了一些Flutter开发中常用的库工具。 参考文献 1、[Flutter原理与实践](https://tech.meituan.com/2018/08/09/waimai-flutter-practice.html) 少杰 2、[Flutter框架技术概览](https://flutter.dev/docs/resources/technical-overview) 3、[Flutter中文官网](https://pub.dartlang.org/flutter/) 4、[Flutter插件仓库](https://pub.dev/flutter/packages)

罗思雨 2020-02-27 11:47:50 0 浏览量 回答数 0

回答

XML 配置首先,先写一套UI界面出来,上方左边是两个 TextView,右边是两个 CheckBox,下方是一个 RecyclerView ,实现很简单,这里我不贴代码了。 接着,在 styles 文件中添加两个 Theme,一个是日间主题,一个是夜间主题。它们的属性都是一样的,唯一区别在于颜色效果不同。 <!--白天主题--> <style name="DayTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="clockBackground">@android:color/white</item> <item name="clockTextColor">@android:color/black</item> </style> <!--夜间主题--> <style name="NightTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/color3F3F3F</item> <item name="colorPrimaryDark">@color/color3A3A3A</item> <item name="colorAccent">@color/color868686</item> <item name="clockBackground">@color/color3F3F3F</item> <item name="clockTextColor">@color/color8A9599</item> </style> 需要注意的是,上面的 clockTextColor 和 clockBackground 是我自定义的 color 类型属性<?xml version="1.0" encoding="utf-8"?> <attr name="clockBackground" format="color" /> <attr name="clockTextColor" format="color" /> 然后再到所有需要实现夜间模式功能的 xml 布局文件中,加入类似下面设置,比如我在 RecyclerView 的 Item 布局文件中做了如下设置 稍稍解释下其作用,如 TextView 里的 android:textColor="?attr/clockTextColor" 是让其字体颜色跟随所设置的 Theme。到这里,xml 需要做的配置全部完成,接下来是 Java 代码实现了。Java 代码实现大家可以先看下面的实现代码,看不懂的童鞋可以边结合我代码下方实现思路解说。 package com.clock.study.activity; import ... /** 夜间模式实现方案* @author Clock @since 2016-08-11*/ public class DayNightActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener { private final static String TAG = DayNightActivity.class.getSimpleName(); /**用于将主题设置保存到SharePreferences的工具类**/ private DayNightHelper mDayNightHelper; private RecyclerView mRecyclerView; private LinearLayout mHeaderLayout; private List<RelativeLayout> mLayoutList; private List<TextView> mTextViewList; private List<CheckBox> mCheckBoxList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); initData(); initTheme(); setContentView(R.layout.activity_day_night); initView(); } private void initView() { mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view); RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false); mRecyclerView.setLayoutManager(layoutManager); mRecyclerView.setAdapter(new SimpleAuthorAdapter()); mHeaderLayout = (LinearLayout) findViewById(R.id.header_layout); mLayoutList = new ArrayList<>(); mLayoutList.add((RelativeLayout) findViewById(R.id.jianshu_layout)); mLayoutList.add((RelativeLayout) findViewById(R.id.zhihu_layout)); mTextViewList = new ArrayList<>(); mTextViewList.add((TextView) findViewById(R.id.tv_jianshu)); mTextViewList.add((TextView) findViewById(R.id.tv_zhihu)); mCheckBoxList = new ArrayList<>(); CheckBox ckbJianshu = (CheckBox) findViewById(R.id.ckb_jianshu); ckbJianshu.setOnCheckedChangeListener(this); mCheckBoxList.add(ckbJianshu); CheckBox ckbZhihu = (CheckBox) findViewById(R.id.ckb_zhihu); ckbZhihu.setOnCheckedChangeListener(this); mCheckBoxList.add(ckbZhihu); } @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { int viewId = buttonView.getId(); if (viewId == R.id.ckb_jianshu) { changeThemeByJianShu(); } else if (viewId == R.id.ckb_zhihu) { changeThemeByZhiHu(); } } private void initData() { mDayNightHelper = new DayNightHelper(this); } private void initTheme() { if (mDayNightHelper.isDay()) { setTheme(R.style.DayTheme); } else { setTheme(R.style.NightTheme); } } /** * 切换主题设置 */ private void toggleThemeSetting() { if (mDayNightHelper.isDay()) { mDayNightHelper.setMode(DayNight.NIGHT); setTheme(R.style.NightTheme); } else { mDayNightHelper.setMode(DayNight.DAY); setTheme(R.style.DayTheme); } } /** * 使用简书的实现套路来切换夜间主题 */ private void changeThemeByJianShu() { toggleThemeSetting(); refreshUI(); } /** * 使用知乎的实现套路来切换夜间主题 */ private void changeThemeByZhiHu() { showAnimation(); toggleThemeSetting(); refreshUI(); } /** * 刷新UI界面 */ private void refreshUI() { TypedValue background = new TypedValue();//背景色 TypedValue textColor = new TypedValue();//字体颜色 Resources.Theme theme = getTheme(); theme.resolveAttribute(R.attr.clockBackground, background, true); theme.resolveAttribute(R.attr.clockTextColor, textColor, true); mHeaderLayout.setBackgroundResource(background.resourceId); for (RelativeLayout layout : mLayoutList) { layout.setBackgroundResource(background.resourceId); } for (CheckBox checkBox : mCheckBoxList) { checkBox.setBackgroundResource(background.resourceId); } for (TextView textView : mTextViewList) { textView.setBackgroundResource(background.resourceId); } Resources resources = getResources(); for (TextView textView : mTextViewList) { textView.setTextColor(resources.getColor(textColor.resourceId)); } int childCount = mRecyclerView.getChildCount(); for (int childIndex = 0; childIndex < childCount; childIndex++) { ViewGroup childView = (ViewGroup) mRecyclerView.getChildAt(childIndex); childView.setBackgroundResource(background.resourceId); View infoLayout = childView.findViewById(R.id.info_layout); infoLayout.setBackgroundResource(background.resourceId); TextView nickName = (TextView) childView.findViewById(R.id.tv_nickname); nickName.setBackgroundResource(background.resourceId); nickName.setTextColor(resources.getColor(textColor.resourceId)); TextView motto = (TextView) childView.findViewById(R.id.tv_motto); motto.setBackgroundResource(background.resourceId); motto.setTextColor(resources.getColor(textColor.resourceId)); } //让 RecyclerView 缓存在 Pool 中的 Item 失效 //那么,如果是ListView,要怎么做呢?这里的思路是通过反射拿到 AbsListView 类中的 RecycleBin 对象,然后同样再用反射去调用 clear 方法 Class<RecyclerView> recyclerViewClass = RecyclerView.class; try { Field declaredField = recyclerViewClass.getDeclaredField("mRecycler"); declaredField.setAccessible(true); Method declaredMethod = Class.forName(RecyclerView.Recycler.class.getName()).getDeclaredMethod("clear", (Class<?>[]) new Class[0]); declaredMethod.setAccessible(true); declaredMethod.invoke(declaredField.get(mRecyclerView), new Object[0]); RecyclerView.RecycledViewPool recycledViewPool = mRecyclerView.getRecycledViewPool(); recycledViewPool.clear(); } catch (NoSuchFieldException e) { e.printStackTrace(); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } refreshStatusBar(); } /** * 刷新 StatusBar */ private void refreshStatusBar() { if (Build.VERSION.SDK_INT >= 21) { TypedValue typedValue = new TypedValue(); Resources.Theme theme = getTheme(); theme.resolveAttribute(R.attr.colorPrimary, typedValue, true); getWindow().setStatusBarColor(getResources().getColor(typedValue.resourceId)); } } /** * 展示一个切换动画 */ private void showAnimation() { final View decorView = getWindow().getDecorView(); Bitmap cacheBitmap = getCacheBitmapFromView(decorView); if (decorView instanceof ViewGroup && cacheBitmap != null) { final View view = new View(this); view.setBackgroundDrawable(new BitmapDrawable(getResources(), cacheBitmap)); ViewGroup.LayoutParams layoutParam = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); ((ViewGroup) decorView).addView(view, layoutParam); ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f); objectAnimator.setDuration(300); objectAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); ((ViewGroup) decorView).removeView(view); } }); objectAnimator.start(); } } /** * 获取一个 View 的缓存视图 * * @param view * @return */ private Bitmap getCacheBitmapFromView(View view) { final boolean drawingCacheEnabled = true; view.setDrawingCacheEnabled(drawingCacheEnabled); view.buildDrawingCache(drawingCacheEnabled); final Bitmap drawingCache = view.getDrawingCache(); Bitmap bitmap; if (drawingCache != null) { bitmap = Bitmap.createBitmap(drawingCache); view.setDrawingCacheEnabled(false); } else { bitmap = null; } return bitmap; } } 实现思路和代码解说: DayNightHelper 类是用于保存夜间模式设置到 SharePreferences 的工具类,在 initData 函数中被初始化,其他的 View 和 Layout 都是界面布局,在 initView 函数中被初始化;在 Activity 的 onCreate 函数调用 setContentView 之前,需要先去 setTheme,因为当 View 创建成功后 ,再去 setTheme 是无法对 View 的 UI 效果产生影响的;onCheckedChanged 用于监听日间模式和夜间模式的切换操作; refreshUI 是本实现的关键函数,起着切换效果的作用,通过 TypedValue 和 Theme.resolveAttribute 在代码中获取 Theme 中设置的颜色,来重新设置控件的背景色或者字体颜色等等。需要特别注意的是 RecyclerView 和 ListView 这种比较特殊的控件处理方式,代码注释中已经说明,大家可以看代码中注释;refreshStatusBar 用于刷新顶部通知栏位置的颜色; showAnimation 和 getCacheBitmapFromView 同样是本实现的关键函数,getCacheBitmapFromView 用于将 View 中的内容转换成 Bitmap(类似于截屏操作那样),showAnimation 是用于展示一个渐隐效果的属性动画,这个属性作用在哪个对象上呢?是一个 View ,一个在代码中动态填充到 DecorView 中的 View(不知道 DecorView 的童鞋得回去看看 Android Window 相关的知识)。知乎之所以在夜间模式切换过程中会有渐隐效果,是因为在切换前进行了截屏,同时将截屏拿到的 Bitmap 设置到动态填充到 DecorView 中的 View 上,并对这个 View 执行一个渐隐的属性动画,所以使得我们能够看到一个漂亮的渐隐过渡的动画效果。而且在动画结束的时候再把这个动态添加的 View 给 remove 了,避免了 Bitmap 造成内存飙升问题。 作者:D_clock爱吃葱花链接:https://www.jianshu.com/p/3b55e84742e5

auto_answer 2019-12-02 01:49:54 0 浏览量 回答数 0

问题

Android 的Paint(画笔)及Canvas(画布)? 400 报错

优选2 2020-06-05 16:56:03 0 浏览量 回答数 1

问题

Android 的Paint(画笔)及Canvas(画布)? 400 报错

爱吃鱼的程序员 2020-05-29 20:04:37 0 浏览量 回答数 1

回答

Flutter开发框架总结 跨平台高性能的渲染引擎逐渐成为移动端、大前端领域的一个热点,作为其中的明星框架Flutter,经过近几年来的迅速发展,由极大的可能成为下一代跨终端解决方案。自从2017年5月,谷歌公司发布了alpha版本的Flutter;2018年底Flutter Live发布的1.0版本;2019年7月发布1.5版本,截至今日(2020年2月)已经发布了v1.14.6Beta版本。 Flutter背景 + 发展历程 首先在写Flutter之前我们要了解什么是原生开发什么是跨平台技术: 原生开发     是指在某一个平台所特有的应用,使用该平台所支持的开发工具和语言,并直接调用系统SDK,比如android上使用java 和ios上使用OC来开发, 这样做的好处 是可以使用平台上全部功能、速度快 性能好,用户体验好。 但是 缺点也很明显,开发不同平台需要维护的成本增加,动态化弱,更新时需要发布版本。 跨平台技术     针对原生开发所遇到的问题,人们已经研究出现有的跨平台技术方案:H5+原生、Js开发加原生渲染(例如React Native、weex等)、自绘UI加原生(QT fro mobile,Flutter) 发展历程     2011年谷歌推出一款可以在移动端,web,服务器等领域的语言—dart,其本质目的是为了取代现在的js的web。 1. 2014年谷歌在github开源了Sky 这便是Flutter的前身 2. 2015-10 Sky改名为Flutter 3. 2017-5 谷歌正式向外界公布Flutter 4. 2018-12 谷歌发布Flutter Live的1.0版本 5. 2019-2 Flutter1.2发布主要是增加对web的支持     Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图,这无疑能为用户提供良好的体验 Flutter架构     Flutter既没有采用Webview也没有采用操作系统的原生控件,相反Flutter使用自己的高性能渲染引擎来绘制widget,这样不仅可以保证UI和原生的一致性,也可以降低维护成本。     Flutter使用Skia作为其2D渲染引擎,Skia是谷歌的一个2D图形处理函数库。     Flutter 采用Dart语言进性开发。Dart在即时编译模式下速度与JavaScript基本持平,但是Dart支持AOT(Ahead-Of-Time - 预先编译),如果以AOT模式运行时js便远追不上了。 为什么Flutter语言采用Dart而不是JavaScript,我们需要做一个对比 1. 开发效率 Dart运行时和编译器支持Flutter的两个关键特性的组合—“基于JIT的快速开发周期”、“基于AOT的发布包” 2. 高性能 Flutter为了实现流畅高保真的UI体验,需要能够在每个动画帧中运行大量的代码,这就需要一种既能提供高性能的语言,又不会出现丢帧,在这一点上Dart更好 3. 快速分配内存 Flutter框架使用函数式流,这使得它很依赖于底层的内存分配器。事实上Dart开发团队许多来自chrome,chrome V8的js引擎在内存分配上也做得非常好,而Dart也正好满足 4. 类型安全 Dart是类型安全语言,支持静态类型检测,js是弱类型语言,这是Dart的一个重要优势 言归正传,下图是Flutter官方提供的一个架构图 引擎刚刚已经介绍过了,我们现在来看看Flutter框架的结构:     由下到上     Foundation、Animation、Painting、Gestutes 这些在Google的一些视频中合称为Dart ui层,对应的是Flutter中的dart:ui包,他是底层ui库,提供动画、手势以及绘制能力。     Rendering层为一个抽象的布局层,它依赖于ui层,这类似于react中的虚拟dom树,该层可以说是Flutter框架最核心的部分,它除了确定每个元素的位置、大小还要进性坐标变换、绘制。     Widgets层是一套基础组件库,在基础组件之上还提供了Material和Cupertino两种视觉风格组件库,大多数我们只是使用这两层。 Flutter运行流程 渲染流程     当需要更新UI的时候,Framework通知Engine,Engine会等到下个Vsync信号到达的时候,会通知Framework,然后Framework会进行animations, build,layout,compositing,paint,最后生成layer提交给Engine。Engine会把layer进行组合,生成纹理,最后通过Open Gl接口提交数据给GPU, GPU经过处理后在显示器上面显示。 启动流程     此图为flutter在安卓下启动的流程,在安卓中默认启动的Activity是MainActivity,而MainActivity继承的是Flutter Activity。     FlutterActivity是继承Activity和实现了PluginRegistry。分析一下onCreate,onStop,onDestroy这些生命周期方法被FlutterActivity.eventDelegate代理了,这个时候我们明白了,FlutterActivity就是一个空壳,真正实现是代理类FlutterActivityDelegate。说白了就是创建一个FlutterView,并且把view显示到屏幕上。 Flutter生命周期     Flutter和安卓、ios应用一样拥有自己的生命周期,对比来看,安卓中是Activity,ios中是ViewController。Flutter中为Widget createState(): 当框架构建StatefulWidget时,会立即调用createState();initState(): 创建窗口小部件时,调用的第一个方法,子类化State可以重写initState,用来完成仅需要执行一次的工作。didChangeDependencies(): 在执行完initState之后调用此方法。build(): 在执行完didChangeDependencies() 之后立即调用,所有的GUI都会在这里渲染,并且每次渲染UI时都会调用它。didUpdateWidget(): 父级窗口小部件进行更改并需要重新绘制UI时,会调用此方法setState(): 此方法用于通知框架数据已更改。dispose(): 销毁方法,移除State对象时调用,应该在此方法中取消一些订阅、动画、流等。 Flutter生态圈及其常用框架 DIO Dio是flutter中文网开源的一个强大的Dart Http请求库,支持Restful Api、FormData、拦截器、请求取消、Cookie、文件上传下载、超时等。 Flukit flukit即Flutter UI Kit,一个常用的Widget库,包括下拉刷新、轮播图、快速滚动条、渐变进度条、城市选择器等. CookieJar 一个实现HTTP协议标准Cookie管理策略的Cookie管理器,他可以自动帮您自动管理http请求cookie,并支持本地持久化。 flutter-go 阿里巴巴开源的flutter 开发者帮助 APP,包含 flutter 常用 140+ 组件的demo 演示与中文文档 https://flutter-go.pub/website/ Best-Flutter-UI-Templates Github地址:https://github.com/mitesh77/Best-Flutter-UI-Templates ,有许多内置ui模板。 欢迎大家有问题随时和我分享哦~初次在开发者社区码字,若有不足之处,请指教,您的每一次留言都是我前进的动力。愿大家在疫情期间共同进步,共创美好的开发者社区。

kun坤 2020-03-02 17:00:55 0 浏览量 回答数 0

回答

教程资源类 freeCodeCamp/freeCodeCamp 免费代码训练营 EbookFoundation/free-programming-book 免费编程图书 sindresorhus/awesome awesome 列表的列表。这个项目起源于某个人做了一个 awesome-php 的 php 优质资源 列表,然后大家就做了 awesome-python,awesome-vue 等各种列表,这个项目又把 各种 awesome 列表收集了起来。 CyC2018/CS-Notes 国人编写的计算机基础教程,中文 jwasham/coding-interview-university 面试考点总结 h5bp/Front-end-Developer-Interview-Questions 前端工程师面试问题 vinta/awesome-python Python 的一些优质资源. 前面提到的 awesome 系列列表,不再赘述 airbnb/javascript Airbnb 的 js 编码规范,值得参考。 github/gitignore GitHub 提供的各种项目的 gitignore 文件模板,省了自己写了 getify/You-Dont-Know-JS 前端(JS)的一些坑的总结 vuejs/awesome-vue Vue 的一些优质资源. awesome 系列,不再赘述 前端 UI 框架/库 twbs/bootstrap Twitter 推出的前端 UI 框架,有网格系统和各种组件,曾经常年在 GitHub 上排名第一,可以说是后端工程师画界面的利器。 竞品:Semantic UI, pure-css FontAwesome/Font-Awesome 字体和图标库,可以使用 SVG 和字体等等多种格式。 ant-design/ant-design 蚂蚁金服出的 react/vue 组件库,前一阵大名鼎鼎的“圣诞彩蛋”就是这个库搞得。主要 提供 React 的组件库,用于企业中后端的后台的建设。关于 React/Vue 和前端的组 件化是一个很有意思的话题,可以查阅相关资料。 和 Bootstrap 等的区别在于,Bootstrap 更偏向于 UI 方面,是 CSS 框架,而 antd 则是完整的包括 UI 和功能在内的 React 组件。可以理解为 Bootstrap 只做了“皮”, 而 antd 是 “皮” + “骨”。 Semantic-Org/Sematic-UI 和 Bootstrap 类似的一个组件库。Semantic UI 更强调使用语义化的 class 来定义样式 google / material-design-icons Google 推出的 Material 风格图标库。 daneden/animate.css CSS 动画效果库 大前端框架和库 vuejs/vue Vue 是国人推出的一个前端框架,可以通过写不同的 Vue 组件来组成一个完整的应用, 支持服务端渲染(SSR)。和 React 一样,Vue 也使用了 Virtual-DOM 技术来提高性能。 facebook/react facebook 推出的一个前端框架,特点是每个组件的 HTML/JS/CSS 组合在一起,使用 Virtual-DOM 渲染。在 React 出现之前,前端框架普遍采用了后端广泛使用的 MVC 模式,强调 HTML/JS/CSS 三者要分离,而 React 则反其道而行之,强调从组件构建, 可以说 React 的出现是前端界的一场革命。 facebook/react-native 使用 React 的语法来构建 native app,注意这里并不是使用一个 iOS 或者 Android 的 WebView 中嵌套了一个 webapp,而是直接使用 JS 来操作原生组件。 angular/angular.js Google 推出的前端框架,没用过 reactjs/redux react.js 的一个组件,用来管理数据。 meteor/meteor 前几年火过一阵,号称要统一前后端,然而我从来没搞明白到底是干啥的,如今热度已经 大减了。HN 上甚至直接有人问 Is meteor.js dead? webpack/webpack 用于打包前端资源 chartjs/Chart.js 前端数据可视化组件 electron 可以使用前端的工具链来编写桌面应用,同时能够跨平台。 jQuery 老牌的跨浏览器兼容库。随着浏览器的发展,现在使用 jQuery 的越来越少了。 create-react-app 用来构造 react app 的辅助工具。 d3.js 前端数据可视化组件 后端工具 elasticsearch 使用 Java 编写的一个搜索工具,要实现全文搜索的话,选择 ES 就对了。 moby Docker 的内核. Docker 可以让你打包应用的所有环境, 像虚拟机一样隔离, 但是又不像虚拟机 一样过多消耗资源. 库 ReactiveX/RxJava TODO 一种编程模式,现在还不是很了解。 机器学习 TensorFlow Google 推出的深度学习库, 目前占主流地位. 语言 Microsoft/TypeScript 微软推出的一个 JavaScript 的超集。我们知道 JavaScript 是一个动态弱类型的语言, 这种特性在小项目上很方便,然而随着前端项目越来越大,强类型对于程序正确性的保证 就显得越来越重要了。TypeScript 重点就在于增强了类型,甚至名字都叫 TypeScript。 强类型的语言是近年来语言的发展趋势,新语言诸如 Rust、Go、Swift 都是强类型的 语言。而一些老语言,比如 Python 也加入了 Type Hint 的功能来增强类型支持。 Apple/swift Apple 推出的新语言,用来代替 Obj-C。 golang Google 推出的编程语言。特点是通过 Goroutine 支持高并发。 nodejs 可以在服务器上运行的 js。 通用工具类 hakimel / reveal.js 使用 js 来做 PPT 的一个框架或者说工具 GoogleChrome/puppeteer Google 推出的操作 Chrome 浏览器的 node.js API。可以用在自动化测试和爬虫等领域。 官方 API 的推出基本上意味着第三方工具已经失去意义了。比如说 Phantom.js 直接宣 布停止维护了。 atom GitHub 推出的一个代码编辑器。 oh-my-zsh zsh 的增强组件集,可以让你的 shell 异常强大, 建议刚学命令行的可以体验一下. vscode 微软推出的代码编辑工具,目前占据了市场优势地位。 Web 框架 rails Ruby 的一个 MVC 模式的 web 框架,当年可谓大红大紫,现在似乎热度有所衰减了, 可能是因为大家都不写 Web 应用了。 expressjs Node.js 的一个 Web 框架。 http://socket.io 实现 WebSocket 的一个库,使用 node.js 编写。WebSocket 是在浏览器和服务器之间 实现全双工通信的一个协议。 laravel 一个比较现代的 PHP MVC web 框架,不过 PHP 这几年的热度衰减也很厉害,好多搞 PHP 的都直接转 Go 了。 内核 torvalds/linux 这个不用说了吧。评论里提到 Linux 的贡献者在 GitHub 上显示为正无穷, 厉害了.

有只黑白猫 2020-01-15 16:53:45 0 浏览量 回答数 0

回答

先说结论: 不要对接!不要对接!不要对接! 开个玩笑,以上仅代表个人观点,大家也知道这种“三体式警告”根本没有用的,我自己也研究如何对接,说不定做完后就觉得“真香”了。 为什么要对接? 首先讨论一下为什么要把 Flutter 对接到 Web 生态。 Flutter 现在是一个炙手可热的跨平台技术,能够一套代码运行在 Android、iOS、PC、IoT 以及浏览器上,被认为是下一代跨平台技术。相比于 Weex 和 React Native 可以很好地解决多平台一致性问题,原生渲染性能相近,上层没有 JS 那么厚的封装层次,整体性能会略好一些。 但是大部分兴冲冲去学 Flutter 的人疑惑的第一个问题就是:为什么 Flutter 要用 Dart?一个全新的语言意味着新的学习成本,难道 JS 不香吗?JS 不香不是还有 TypeScript 吗!事实上 Flutter 抛弃的岂止是 JS 这门语言,也抛弃了 HTML 和 CSS,设计了一套解耦得更好的 Widget 体系,Flutter 抛弃的是整个 Web,致力于打造一个新的生态,但是这个生态无法复用 Web 生态的代码和解决方案。尤其是之前所有跨平台方案 Hybrid、React Native、Weex 都是对接 Web 生态的,这让 Flutter 显得有些格格不入,也让大部分前端开发者望而却步。 下面是我整理出来的,前端开发者使用 Flutter 的各方面成本: 因为 Flutter 的开发模式和前端框架比较像(可以说就是抄的 React),所以框架的学习成本并不高,稍微高一些的是 Dart 语言的学习成本,另外还要学习如何用 Widget 组装 UI,虽然很多布局 Widget 设计得和 CSS 很像,灵活度还是差了很多。要想在真实项目中用起来,还要改造整个工具链,以“Native First”的视角做开发,开发 Flutter 和开发原生应用的链路是比较像的,和开发前端页面有较大差异。最高的还是生态成本,前端生态的积累无论是代码还是技术方案都很难复用,这是最痛的一点,生态也是 Flutter 最弱的一环。 无论是为了先进的技术理念还是出于商业私心,先不管 Flutter 为什么抛弃 Web 生态,现实问题是最大的 UI 开发者群体是前端,最丰富的生态是 Web 生态,我觉得 Web 技术也是开发 UI 最高效的方式。如果能在上层使用 Web 技术栈开发,在底层使用 Flutter 实现跨平台渲染,不是可以很好的兼顾开发效率、性能和跨平台一致性吗?还能复用 Web 技术栈大量的技术积累。 可能这些理由也不够充分,暂且先照着这个假设继续分析,最后再重新讨论到底该不该对接。 关于 Flutter 和 Web 生态的对接涉及两个方面: 从 Web 到 Flutter。就是使用 Web 技术栈来开发,然后对接到 Flutter 上实现跨平台渲染。对 Web 来说是解决性能和跨平台一致性问题,对 Flutter 来说是解决生态复用问题。从 Flutter 到 Web。就是官方已经实现的 Web support for Flutter,把已经用 Dart 开发好的 App 编译成 HTML/JS/CSS 然后运行在浏览器上,可以用于降级和外投场景。 如何实现“从 Web 到 Flutter”? 首先分析一下 Flutter 的架构图,看看可以从哪里下手。 Flutter 可以分为 Framework 和 Engine 两部分,Engine 部分比较底层也比较稳定了,最好不要动,需要改的是用 Dart 实现的 Framework。要想对接 Web 生态的话,JS 引擎肯定是要引入的,至于是否保留 Dart VM 有待讨论。图中最上面 Material 和 Cupertino 两个 UI 库前端是不需要的,前端有自己的。关键是 Widget 这部分,是替换成 HTML/CSS 的方式写 UI,还是继续保留 Widget 但是把语言换成 JS,不同方案给出的解法也不一样。 有不少方案可以实现对接,业界有挺多尝试的,我总结了下面三种方式: - TS 魔改:用 JS 引擎替换掉 Dart VM,用 JS/TS 重新实现 Flutter Framework(或者直接 dart2js 编译过来)。 - JS 对接:引入 JS 引擎同时保留 Dart VM,用前端框架对接 Flutter Framework。 - C++ 魔改:用 JS 引擎替换掉 Dart VM,用 C++ 重新实现 Flutter Framework。 TS 魔改 TS 魔改就是完全抛弃掉 Dart VM,用 TypeScript 重新实现一遍用 Dart 写的 Flutter Framework。 为啥是 TS 而不是 JS?这不是因为 TS 是个大热门嘛,而且向下兼容 JS,现在几乎所有时髦的框架都要用 TS 重写了。 这种方案的出发点是“如果能把 Flutter 的 Dart 换成 JS 就好了”,最容易想到的路就是把 Dart 翻译成 TS,或者直接用 dart2js 把代码编译成 js,但是编译出来的代码包含很多 dart:ui 之类的库的封装,生成的包也挺大的,也比较难定制需要导出的接口,不如干脆用 TS 重写一遍,工具链更熟悉一些,还可以加一些定制。 理论上讲翻译之后 Flutter 绝大部分功能都依然支持,可以复用各种 npm 包,还可以动态化,但是丧失了 AOT 能力,JS 语言的执行性能应该是不如 Dart 的。而且所有节点的布局运算都发生在 JS,底层只需要提供基础的图形能力就好了,就好像是基于 Canvas API 写了一套 UI 框架,性能未必有现存前端框架的性能高。 此外最大的问题是如何与官方 Flutter 保持一致,假如现在是从 v1.13 版本翻译过来的,以后官方升级到了 v1.15 要不要同步更新?这个过程没啥技术含量,而且需要持续投入,做起来比较恶心。 另外还需要考虑上层是用 Widget 的方式写 UI,还是用前端熟悉的 HTML+CSS。如果依然用 Widget 的话,那大部分前端组件还是用不了的,UI 还是得重写一遍。反正要重写的话,成本也没降下来,那就用 Dart 重写呗…… 直接用官方原版 Flutter 也避免每次更新都要翻译一遍 Dart 代码。所以既然选择了对接前端生态,那就要对接 CSS,不然就没有足够的价值。然而 CSS 和 Widget 的对接也是很繁琐的过程,而且存在完备性问题。 JS 对接 翻译代码的方式不够优雅,那就保留 Dart,把 JS/CSS 对接到 Widget 上面不就好了? 当然可以,这种方式是仅把 Flutter 当做了底层的渲染引擎,上层保持前端框架的写法,仅把渲染部分对接到 Flutter。现存的很多前端框架都把底层渲染能力做了抽象,可以对接到不同渲染引擎上,如 Vue/Rax 同时支持浏览器和 Weex,用同样的方式,可以再支持一个 Flutter。 这种方式对前端框架的兼容性比较好,但是链路太长了,业务代码调用前端框架接口做渲染,一顿操作之后发出了渲染指令,这个渲染指令要基于通信的方式传给 Flutter Framework,这中间涉及一次 JS 到 C++ 再到 Dart 的跨语言转换,然后再接收到渲染指令之后还要转成相应的 Widget 树,从 CSS 到 Widget 的转换依然很繁琐。而且 Widget 本身是可以带有状态的,本身就是响应式更新的,在更新时会重新生成 widget 并 diff,如果在前端更新 UI 的话,前端框架在 js 里 diff 一次 vdom,传到 Flutter 之后又 diff 一次 widget。 如果要绕过 Widget 直接对接图中的 Rendering 这一层,可以绕过 widget diff 但是得改 Flutter Framework 的渲染链路,既然要改 Flutter Framework 那为什么不直接用 TS 魔改呢,还绕过了 JS 到 Dart 的通信,又回到了第一种方案。 总结来说,这个方案的优点是:实现简单、能最大化保留前端开发体验,缺点是:渲染链路长、通信成本高、响应式逻辑冲突、CSS 转 Widget 不完备等。 C++ 魔改 想要干掉 Dart VM,就需要用其他语言重新实现用 Dart 开发的 Framework,用 JS/TS 可以,用 C++ 当然可以,最硬核的方式就是用 C++ 重新实现 Flutter 的 Framework,然后接入 JS 引擎,通过 binding 把 C++ 接口透出到 JS 环境,上层应用还是用 JS 做开发。 把 Framework 层下沉到 C++ 之后,不仅会有更好的性能,也能支持更多语言。原本 Flutter Framework 是在 Dart VM 之上的,必须依赖 Dart VM 才能运行,所以对 Dart 有强依赖;用 C++ 重新实现之后,JS 引擎是在 C++ 版 Framework 之上的,框架本身并不依赖 JS 引擎,还可以对接其他各种语言,如对接了 JVM 之后可以支持 Java 和 Kotlin,对接回 Dart VM 可以继续支持 Dart。 这个方案可以增强性能,也能保持和 Flutter 的一致性,但是改造成本和维护成本都相当高。C++ 的开发效率肯定不如 Dart,当 Flutter 快速迭代之后如何跟进是很大的问题,如果跟进不及时或者实现不一致那很可能就分化了。从 CSS 到 Widget 的转换也是不得不面对的问题。 几种方案对比 把上面几种方案画在同一张图里是这个样子的: 图中实线部分表示了跨语言的通信,太过频繁会影响性能,虚线部分表示了其他对接可能性。 从下到上,Flutter Engine 是不需要动的,这一层是跨平台的关键。Framework 则有三种语言版本,JS/TS、Dart、C++,性能是 C++ 版本最好,成本是 Dart 版本最低。然后还需要向上处理 HTML/CSS 和 Widget 的问题,可以直接对接一个前端框架,也可以直接在 C++ 层实现(不然需要透出的 binding 接口就太多了,用通信的方式也太过频繁了)。 如何实现“从 Flutter 到 Web”? 这个功能官方已经实现了,可以把使用 Dart 开发的 App 编译成 Web App 运行在浏览器上,官方文档以介绍用法和 API 为主,我这里简单分析一下内部具体的实现方案。 实现原理 结合 Flutter 的架构图来看,要实现 Web 到 Flutter 需要改造的是上层 Framework,要实现 Flutter 到 Web 需要改造的则是底层 Engine。 Framework 对 Engine 的核心依赖是 dart:ui,这是库是在 Engine 里实现的,抽象出了绘制 UI 图层的接口,底层对接 skia 的实现,向上透出 Dart 语言的接口。这样来看,对接方式就比较简单了: 使用 dart2js 把 Framework 编译成 JS 代码。基于浏览器的 API 重新实现 dart:ui,即 dart:web_ui。 把 Dart 编译成 JS 没什么问题,性能可能会有一点影响,功能都是可以完全保留的,关键是 dart:web_ui 的实现。在原生 Engine 中,dart:ui 依赖 skia 透出的 SkCanvas 实现绘制,这是一套很底层的图形接口,只定义了画线、画多边形、贴图之类的底层能力,用浏览器接口实现这一套接口还是很有挑战的。上图可以看到 Web 版 Engine 是基于 DOM 和 Canvas 实现的,底层定义了 DomCanvas 和 BitmapCanvas 两种图形接口,会把传来的 layer tree 渲染成浏览器的 Element tree,但是节点上仅包含了 position, transform, opacity 之类的样式,只用到 CSS 很小的一个子集,一些更复杂的绘制直接用 2D canvas 实现。 存在的问题 我编译了一个还算复杂的 demo 试了一下,性能很不理想,滑动不流畅,有时候图片还会闪动。生成出来的 js 代码有 1.1MB (minify 之后,未 gzip),节点层次也比较深,我评估这个页面用前端写不会超过 300KB,节点数可以少一半以上。 另外再看一下 Flutter 仓库的 issue,过滤出 platfrom-web 相关的,可以看到大量:文字编辑失效、找不到光标、ListView 在 ios 上不可滚动、checkbox/button 行为不正常、安卓滚动卡顿图片闪烁、字体失效、某些机型视频无法播放、文字选中后无法复制、无法调试…… 感觉 flutter for web 已经陷入泥潭,让人回想起前端当年处理各种浏览器兼容性的噩梦。 这些性能和兼容性问题,核心原因是浏览器未暴露足够的底层能力,以及浏览器处理手势、用户输入和方式和 Flutter 差异巨大。 实现 Flutter Engine 需要的是底层的图形接口和系统能力,虽然canvas 提供了相似的图形接口,如果全部用 canvas 实现的话很难处理可访问性、文本选择、手势、表单等问题,也会存在很多兼容性问题。所以真实方案里用的是 Canvas + DOM 混合的方式,封装层次太高了,渲染链路太长。就好像 Flutter Framework 里进行了一顿猛如虎的操作之后,节点生成好了、布局算好了、绘制属性也处理好了,就差一个画布画出来了,然后交到浏览器手里,又生成一遍 Element,再算一遍布局,在处理一遍绘制,最终才交给了底层的图形库画出来。 再比如长页面的滚动,浏览器里只要一条 CSS (overflow:scroll) 就可以让元素可滚动,手势的监听以及页面的滚动以及滚动动画都是浏览器原生实现的,不需要与 JS 交互,甚至不需要重新 layout 和 paint,只需要 compositing。如上图所示,在 Flutter 中 Animation 和 Gesture 是用 Dart 实现的,编译过来就是 JS 实现的,浏览器本身并不知道这个元素是否可滚,只是不断派发 touchmove 事件,JS 根据事件属性计算节点偏移,然后运算动画,然后把 transform 或者新的 position 作用到节点上,然后浏览器再来一遍完整的渲染流程…… 优化方案 性能和兼容性的问题还是要解决的,短期内先把 issue 解掉,长线的优化方案,官方有两种尝试: 使用 CSS Painting API 做绘制。 a, 这是还处于提案状态的新标准,可以用 JS 实现一些绘制功能,自定义 CSS 属性。 b. 目前还未实现,需要等浏览器先把 CSS Houdini 支持好。 使用 WebAssembly 版本的 Skia 做绘制 https://skia.org/user/modules/canvaskit a, 这样可以发挥 wasm 的性能优势,并且保持 skia 功能的一致。但是目前 wasm 在浏览器环境里未必有性能优势,这里不展开讨论了。 b. 已经部分实现,参考这里的配置启用功能: https://github.com/flutter/flutter/issues/41062#issuecomment-533952994 这两个方案都是想更多的利用到浏览器的底层能力,只有浏览器暴露了更多底层能力,才能更好的实现 Flutter 的 Web Engine。不过这个要等挺久的时间,我们也参与不了,现阶段想要使用 flutter for web,还是得保持现有架构,一起参与进去把 issue 解决掉,优先保障功能,其次优化性能。 一种适应性更好的架构 如果理想化一点,能不能从架构角度让 Flutter 和 Web 生态融合的更好一些呢? 回顾文章最开始的官方架构图,上面是 Framework(Dart),下面是 Engine(C++),切分在 Foundation 这一层,双方之间的交互是几何图形信息。如果还保持这个架构,把切分层次划分的更靠上一些,如下图所示,划分在 Widgets 和 Rendering 这一层,理论上讲对 Flutter 的开发者来说是无感知的,因为上层的开发语言和 Widget 接口都是不变的。 切分在这一层,Framework 和 Engine 之间的交互就不再是几何图形而是节点信息,Widget 的组合、setState 响应式更新、Widget diff 都还在 Dart 中,展开后的 RenderObject 的布局、绘制、裁剪、动画全都在 C++ 中,不仅有更好的性能,还可以与 Engine 有更好的结合。 或者说,还原本保留 Engine 的设计,把下沉的这部分逻辑上划分成 Renderer,就有了如下三层的结构: 这样划分出来的每一层都有明确的定位: Framework: 开发框架。为开发者提供可编程 API,实现响应式的开发模式,提供细粒度 Widget 供开发者自由封装和组合。Renderer: 渲染引擎。专门实现布局、绘制、动画、手势的的处理,这部分功能相对独立,是可以与开发框架解耦的,也不必与特定语言绑定。Engine: 图形引擎。实现跨平台一致的图形接口,合成输入的层并绘制到屏幕上,处理好平台力的接入和适配。 这样切分除了有性能优势以外,也使得渲染引擎摆脱了对 Dart 的依赖,能够支持多种语言,也能支持多种开发模式。对接到 Dart VM 就可以用 Dart 写代码,对接到 JS 引擎就可以用 JS 写代码,对接到 JVM 还可以写 Java,但是无论怎么写,底层的渲染能力是一样的,一套统一的布局算法,动画和手势的处理行为也是一致的。 在这样的架构下,对接 Web 生态就更容易了。Dart 和 Widget 是前端不想要的,希望能换成 JS 和 CSS,但是又想要底层的跨平台一致渲染引擎,那从 Renderer 层开始对接就好了,绕过了所有不想要的,也保留了所有想要的。 要实现 Flutter for Web 也更简单了一些。在 Engine 层做对接,一直苦于浏览器透出的底层能力不够,如果是在 Renderer 之上做对接就更容易一些,基于 JS/CSS/DOM/Canvas 的能力封装出一套 Rendering 接口,供 Widget 调用就好了,这样可以使渲染链路更短一些,但是依然要处理 Widget 和 DOM/CSS 之间的兼容性问题。 再讨论一遍:为什么要对接? 技术上已经分析完了,要想搞定 Flutter 生态和 Web 生态的对接,需要投入很大的成本,所以真正决定做之前,要先讨论清楚为什么要做对接?到底要不要做对接? 首先 Google 官方对 Flutter 的定位就是个问题。Flutter 设计之初就是不考虑 Web 生态的,甚至在刻意回避,倡导的是更贴近原生的开发方式。我之所以在开头说不要对接,原因也很简单:两种技术设计理念不同,不是朝着一个方向发展的,生态不通,技术方案不通,强行融合很可能让彼此都丧失了优势。但是业界又有很多团队在做这种尝试,说明需求是存在的,如果 Google 抵制这个方向,那就不好做了。不过现在官方已经支持了 Flutter for Web,已经向 Web 生态迈了一步,未来是否进一步与 Web 融合,也是有可能的。 另外就是跨平台技术本身的问题,浏览器发展了二三十年,已经是个很强大的跨平台产品了,几乎是 Web 的代名词了,这一点无人能敌。但是也臃肿不堪,有大量历史包袱,性能和体验不够好,和 Native 的结合度差,尤其在移动和 IoT 平台。虽然硬件性能在不断提升,但这是所有软件共享的,浏览器的性能和体验总会比 Native 差一些,差的这一些很可能就是新业务和新场景的发挥空间。观察一下近几年新诞生的业务场景,很多都是利用到了 Native 新提供的能力才火爆起来的,如 AI/AR/ 视频 / 直播 等,有因为新的 Web API 而孵化生出来的商业模式吗? 原文链接: https://mp.weixin.qq.com/s?__biz=MzAxNDEwNjk5OQ==&mid=2650405725&idx=1&sn=0b7476f7c7c01df7fdafda578f9ceb98&chksm=83953345b4e2ba53917ac30b709c07be15bd1c2fd5ae2a8ecfbb129b3813f771621b8fac95ca&scene=27#wechat_redirect

剑曼红尘 2020-03-10 09:54:40 0 浏览量 回答数 0

问题

史上有哪些程序员实用工具网站?

问问小秘 2020-03-14 23:11:50 4148 浏览量 回答数 2

问题

【精品问答】Java技术1000问(1)

问问小秘 2019-12-01 21:57:43 39155 浏览量 回答数 15

回答

转自:思否 本文作者:Michael van der Gulik 原文链接:《Why WebAssembly is a big deal》 译者:敖小剑 WebAssembly 是每个程序员都应该关注的技术。WebAssembly 会变得更流行。 WebAssembly 将取代 JavaScript。WebAssembly 将取代 HTML 和 CSS。 WebAssembly 将取代手机应用。WebAssembly 将取代桌面应用。在 10 年内,我保证每个程序员至少需要知道如何使用工具来操作 WebAssembly 并理解它是如何工作的。 你可能会说,“太离谱了!” 好吧,请继续阅读。 什么是 WebAssembly 当前形式的 WebAssembly 是 Web 浏览器的新扩展,可以运行预编译代码…快速地。在 C ++ 中编写了一些小代码,然后使用 Emscripten 编译器将该代码编译为 WebAssembly。通过一些 Javascript 粘合,就可以在 Web 浏览器中调用这一小段代码,例如,运行粒子模拟。 WebAssembly 文件,扩展名为.wasm,本身是包含可执行指令的二进制格式。要使用该文件,必须编写一个运行某些 Javascript 的 HTML 文件来获取、编译和执行 WebAssembly 文件。WebAssembly 文件在基于堆栈的虚拟机上执行,并使用共享内存与其 JavaScript 包装器进行通信。 到目前为止,这似乎并不有趣。它看起来只不过是 JavaScript 的加速器。但是,聪明的读者会对 WebAssembly 可能成为什么有所了解。 WebAssembly 将成为什么? 第一个重要发现是 WebAssembly 是一个安全的沙盒虚拟机。可以从 Internet 运行喜欢的 WebAssembly 代码,而确保它不会接管 PC 或服务器。四个主流 Web 浏览器对它的安全性非常有信心,它已经默认实现并启用了。它的真正安全性还有待观察,但安全性是 WebAssembly 的核心设计目标。 第二个重要发现是 WebAssembly 是一个通用的编译目标。它的原始编译器是一个 C 编译器,这个编译器很好地指示了 WebAssembly 虚拟机的低级和可重定向性。许多编程语言都使用 C 语言编写虚拟机,其他一些语言甚至使用 C 本身作为编译目标。 此时,有人整理了一个可以编译为 WebAssembly 的编程语言列表。这份名单将在未来很多年中继续增长。 WebAssembly 允许使用任何编程语言编写代码,然后让其他人在任何平台上安全地运行该代码,无需安装任何内容。朋友们,这是美好梦想的开始。 部署问题 我们来谈谈如何将软件提供给用户。 为新项目选择编程语言的一个重要因素是如何将项目部署到客户。您的程序员喜欢用 Haskell,Python,Visual Basic 或其他语言编写应用程序,具体取决于他们的喜好。要使用喜欢的语言,他们需要编译应用,制作一些可安装的软件包,并以某种方式将其安装在客户端的计算机上。有许多方法可以提供软件 - 包管理器,可执行安装程序或安装服务,如 Steam,Apple App Store,Google Play 或 Microsoft store。 每一个安装机制都意味着痛苦,从应用商店安装时的轻微疼痛,到管理员要求在他的 PC 上运行一些旧的 COBOL 代码时的集群头痛。 部署是一个问题。对于开发人员和系统管理员来说,部署一直是一个痛点。我们使用的编程语言与我们所针对的平台密切相关。如果大量用户在 PC 或移动设备上,我们使用 HTML 和 Javascript。如果用户是 Apple 移动设备用户,我们使用……呃…… Swift?(我实际上不知道)。如果用户在 Android 设备上,我们使用 Java 或 Kotlin。如果用户在真实计算机上并且愿意处理掉他们的部署问题,那么我们开发人员才能在我们使用的编程语言中有更多选择。 WebAssembly 有可能解决部署问题。 有了 WebAssembly,您可以使用任何编程语言编写应用,只要这些编程语言可以支持 WebAssembly,而应用可以在任何设备和任何具有现代 Web 浏览器的操作系统上运行。 硬件垄断 想购买台式机或笔记本电脑。有什么选择?好吧,有英特尔,有 AMD。多年来一直是双寡头垄断。保持这种双寡头垄断的一个原因是 x86 架构只在这两家公司之间交叉许可,而且通常预编译的代码需要 x86 或 x86-64(也就是 AMD-64)架构。还有其他因素,例如设计世界上最快的 CPU 是一件很艰难但也很昂贵的事情。 WebAssembly 是一种可让您在任何平台上运行代码的技术(之一)。如果它成为下一个风口,硬件市场将变得商品化。应用编译为 WebAssembly,就可以在任何东西上运行 - x86,ARM,RISC-V,SPARC。即便是操作系统市场也会商品化;您所需要的只是一个支持 WebAssembly 的浏览器,以便在硬件可以运行时运行最苛刻的应用程序。 编者注:Second State 研发的专为服务端优化的 WebAssembly 引擎 SSVM 已经可以运行在高通骁龙芯片上。Github 链接:https://github.com/second-sta... 云计算 但等等,还有更多。云计算成为IT经理办公室的流行词已有一段时间,WebAssembly 可以直接迎合它。 WebAssembly 在安全沙箱中执行。可以制作一个容器,它可以在服务器上接受和执行 WebAssembly 模块,而资源开销很小。对于提供的每个服务,无需在虚拟机上运行完整的操作系统。托管提供商只提供对可以上传代码的WebAssembly 容器的访问权限。它可以是一个原始容器,接收 socket 并解析自己的 HTTP 连接,也可以是一个完整的 Web 服务容器,其中 WebAssembly 模块只需要处理预解析的HTTP请求。 这还不存在。如果有人想变得富有,那么可以考虑这个想法。 编者注:目前已经有人正在实现这个想法,Byte Alliance 计划将WebAssembly 带到浏览器之外,Second State 已经发布了为服务端设计的WebAssembly 引擎开发者预览版。 不是云计算 WebAssembly 足以取代 PC 上本地安装的大多数应用程序。我们已经使用 WebGL(又名OpenGL ES 2.0)移植了游戏。我预测不久之后,受益于WebAssembly,像 LibreOffice 这样的大型应用可以直接从网站上获得,而无需安装。 在这种情况下,在本地安装应用没什么意义。本地安装的应用和 WebAssembly 应用之间几乎没有区别。WebAssembly 应用已经可以使用屏幕,键盘和鼠标进行交互。它可以在 2D 或 OpenGL 中进行图形处理,并使用硬件对视频流进行解码。可以播放和录制声音。可以访问网络摄像头。可以使用 WebSockets。可以使用 IndexedDB 存储大量数据在本地磁盘上。这些已经是 Web 浏览器中的标准功能,并且都可以使用 JavaScript 向 WebAssembly 暴露。 目前唯一困难的地方是 WebAssembly 无法访问本地文件系统。好吧,可以通过 HTML 使用文件上传对话,但这不算。最终,总会有人为此创建 API,并可能称之为 “WASI”。 “从互联网上运行应用程序!?胡说八道!“,你说。好吧,这是使用 Qt 和 WebAssembly 实现的文本编辑器 (以及更多)。 这是一个简单的例子。复杂的例子是在 WebBrowser 中运行的 Adobe Premier Pro 或 Blender。或者考虑像 Steam 游戏一样可以直接从网络上运行。这听起来像小说,但从技术上说这并非不能发生。 它会来的。 让我们裸奔! 目前,WebAssembly 在包含 HTML 和 Javascript 包装器的环境中执行。为什么不脱掉这些?有了 WebAssembly,为什么还要在浏览器中包含 HTML 渲染器和 JavaScript 引擎? 通过为所有服务提供标准化 API,这些服务通常是 Web 浏览器提供的,可以创建裸 WebAssembly。就是没有 HTML和 Javascript 包装来管理的 WebAssembly。访问的网页是 .wasm 文件,浏览器会抓取并运行该文件。浏览器为WebAssembly 模块提供画布,事件处理程序以及对浏览器提供的所有服务的访问。 这目前还不存在。如果现在使用 Web 浏览器直接访问 .wasm 文件,它会询问是否要下载它。我假设将设计所需的 API 并使其工作。 结果是 Web 可以发展。网站不再局限于 HTML,CSS 和 Javascript。可以创建全新的文档描述语言。可以发明全新的布局引擎。而且,对于像我这样的 polyglots 最相关,我们可以选择任何编程语言来实现在线服务。 可访问性 但我听到了强烈抗议!可访问性怎么样??搜索引擎怎么办? 好吧,我还没有一个好的答案。但我可以想象几种技术解决方案。 一个解决方案是我们保留内容和表现的分离。内容以标准化格式编写,例如 HTML。演示文稿由 WebAssembly 应用管理,该应用可以获取并显示内容。这允许网页设计师使用想要的任何技术进行任意演示 - 不需要 CSS,而搜索引擎和需要不同类型的可访问性的用户仍然可以访问内容。 请记住,许多 WebAssembly 应用并不是可以通过文本访问的,例如游戏和许多应用。盲人不会从图像编辑器中获得太多好处。 另一个解决方案是发明一个 API,它可以作为 WebAssembly 模块,来提供想在屏幕上呈现的 DOM,供屏幕阅读器或搜索引擎使用。基本上会有两种表示形式:一种是在图形画布上,另一种是产生结构化文本输出。 第三种解决方案是使用屏幕阅读器或搜索引擎可以使用的元数据来增强画布。执行 WebAssembly 并在画布上呈现内容,其中包含描述渲染内容的额外元数据。例如,该元数据将包括屏幕上的区域是否是菜单以及存在哪些选项,或者区域是否想要文本输入,以及屏幕上的区域的自然排序(也称为标签顺序)是什么。基本上,曾经在 HTML 中描述的内容现在被描述为具有元数据的画布区域。同样,这只是一个想法,它可能在实践中很糟糕。 可能是什么 1995年,Sun Microsystems 发布了 Java,带有 Java applets 和大量的宣传。有史以来第一次,网页可以做一些比 和 GIF 动画更有趣的事情。开发人员可以使应用完全在用户的 Web 浏览器中运行。它们没有集成到浏览器中,而是实现为繁重的插件,需要安装整个 JVM。1995年,这不是一个小的安装。applets 也需要一段时间来加载并使用大量内存。我们现在凭借大量内存,这不再是一个问题,但在 Java 生命的第一个十年里,它让体验变得令人厌烦。 applets 也不可靠。无法保证它们会运行,尤其是在用户使用 Microsoft 的实现时。他们也不安全,这是棺材里的最后一颗钉子。 以 JVM 为荣,其他语言最终演变为在 JVM 上运行。但现在,那艘船航行了。 FutureSplash / Macromedia / Adobe Flash 也是一个竞争者,但是是专有的,具有专有工具集和专有语言的专有格式。我读到他们确实在2009年开启了文件格式。最终从浏览器中删除了支持,因为它存在安全风险。 这里的结论是,如果希望您的技术存在于每个人的机器上,那么安全性就需要正视。我真诚地希望 WebAssembly 作为标准对安全问题做出很好的反应。 需要什么? WebAssembly 仍处于初期阶段。它目前能很好的运行代码,而规范版本是 1.0,二进制格式定型。目前正在开展SIMD 指令支持。通过 Web Workers 进行多线程处理也正在进行中。 工具可用,并将在未来几年不断改进。浏览器已经让你窥视 WebAssembly 文件。至少 Firefox 允许查看WebAssembly 字节码,设置断点并查看调用堆栈。我听说浏览器也有 profiling 支持。 语言支持包括一套不错的语言集合–C,C++和Rust是一流的公民。C#,Go和Lua显然有稳定的支持。Python,Scala,Ruby,Java和Typescript都有实验性支持。这可能是一个傲慢的陈述,但我真的相信任何想要在21世纪存在的语言都需要能够在 WebAssembly 上编译或运行。 在访问外部设备的 API 支持方面,我所知道的唯一可用于裸 WebAssembly 的 API 是 WASI,它允许文件和流访问等核心功能,允许 WebAssembly 在浏览器外运行。否则,任何访问外部世界的 API 都需要在浏览器中的 Javascript 中实现。除了本地机器上的文件访问,打印机访问和其他新颖的硬件访问(例如非标准蓝牙或USB设备)之外,应用所需的一切几乎都可以满足。“裸WebAssembly”并不是它成功的必要条件; 它只是一个小的优化,不需要浏览器包含对 HTML,CSS 或 Javascript 的支持。 我不确定在桌面环境中让 WebAssembly 成为一等公民需要什么。需要良好的复制和粘贴支持,拖放支持,本地化和国际化,窗口管理事件以及创建通知的功能。也许这些已经可以从网络浏览器中获得; 我经常惊讶与已经可能的事情。 引发爆炸的火花是创建允许现有应用移植的环境。如果创造了“用于 WebAssembly 的 Linux 子系统”,那么可以将大量现有的开源软件移植到 WebAssembly 上。它需要模拟一个文件系统 - 可以通过将文件系统的所有只读部分都缓存为 HTTP 请求来完成,并且所有可写部分都可以在内存中,远程存储或使用浏览器可以提供的任何文件访问。图形支持可以通过移植 X11 或 Wayland 的实现来使用 WebGL(我理解已经作为 AIGLX 存在?)。 一些 SDL 游戏已经被移植到 WebAssembly - 最着名的是官方演示。 一旦 JVM 在 WebAssembly 中运行,就可以在浏览器中运行大量的 Java 软件。同样适用于其他虚拟机和使用它们的语言。 与 Windows 软件的巨大世界一样,我没有答案。WINE 和 ReactOS 都需要底层的 x86 或 x86-64 机器,所以唯一的选择是获取源代码并移植它,或者使用 x86 模拟器。 尾声 WebAssembly 即将到来。 它来得很慢,但现在所有的部分都可以在你正在使用的浏览器上使用。现在我们等待构建用于从各种编程语言中定位 WebAssembly 的基础设施。一旦构建完成,我们将摆脱 HTML,CSS 和 Javascript 的束缚。 加入阿里云钉钉群享福利:每周技术直播,定期群内有奖活动、大咖问答 阿里云开发者社区

茶什i 2020-01-07 10:32:35 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 阿里云双十一主会场 阿里云双十一新人会场 1024程序员加油包 阿里云双十一拼团会场 场景化解决方案 阿里云双十一直播大厅