| 上手难度 | 稍高 | 容易 |
| 核心理念 | React | Vue |
| 框架程度 | 较重 | 较轻 |
| 特点 | 适合开发整体App | 适合单页面 |
| 社区 | 丰富,Facebook维护 | 略残念,目前托管apache |
| 支持 | Android、IOS | Android、IOS、Web |
| 适应性 | 原生开学习成本低 | Web开发学习成本低 |
| JS引擎 | JSCore | V8 |
作为两个框架的深度体验者,个人总结出上面的对比,其中可以看出:
-
React Native更适合开发完整的App,因为它的性能较好,第三方插件丰富,社群活跃并且维护较好,文档完整等(本篇主角是Weex好吧魂淡(#゚Д゚))。
-
Weex更适合开发单页面集成,这也是阿里的业务特性。 当然Weex也可以开发完整的多页面App,同时我也是这么用过,不过效果对比React Native,显然强差人意。
-
Weex胜在容易上手,基于Vue的设计模式,类MVVM的实现,也让前端能更无缝的实现一些高性能的App业务。
-
Weex兼容Android、IOS、Web三端,在单页面的实现上,它有着React Native无法睥睨的先天优势。
-
Weex的社群,个人觉得还是弱,资料不足,文档简单,第三方支持太弱。和React Native一样支持带原生功能的插件开发,但是,支持太少了,这也提高了后期的开发门槛。同时,一个小问题很容易让入初学者,三过门而不入,作为一个发布了两年的框架,还是比较让人吐槽的。
二、原理
这里简要说明下Weex在android下的分层以及原理。
Weex主要包括三大部分:JS Bridge、Render、Dom,分别对应WXBridgeManager
、WXRenderManager
、WXDomManager
。通过WXSDKManager
统一管理。其中JS Bridge和Dom运行在独立的HandlerThread中,而Render运行在UI线程。JS Bridge主要用来和 JS 端实现进行双向通信,比如把js端的dom结构传递给Dom线程。Dom主要是用于负责dom的解析、映射、添加等等的操作,最后通知UI线程更新。而Render负责在UI线程中对dom实现渲染。
如下图,是生成dom,dom的解析,映射,添加,渲染的流程。
如上可知,因为JS端运行于独立的单线程中,所以为了保证运行的流畅性,一般需要避免在JS端执行耗时操作,比如:网络请求,图片加载等,其实都是在原生端完成,js端执行的是发起一个请求和响应一个结果。同时因为原生端与JS端是通过JS Bridge通讯,所以也需要尽量避免大数据和频繁的通讯,导致响应的延迟。
原生端的dom的加载解析映射,也是性能的一大瓶颈。一般而言,Weex在Web端生成的,是通过webpack的webConfig
打包成单页面的index.web.js
文件;而在原生端,一般会通过webpack的weexEntry
配置成多页面形式:即每一个需要独立的.vue的页面,最终会被打包成一个.js文件。所以打开每个页面时加载对应的js文件,这很好的减小了需要加载的文件大小,提高了dom的解析效率。最后,Weex默认打的js只包含业务js代码,基础js库已经被包含在weex sdk中,也使得体积会小很多。
三、入门
1、配置环境
程序员就要从配置环开始,Weex 环境搭建 ,点击链接,只要你要一个稳定的网络,参考官网搭建环境,也就一杯茶的功夫,take it easy。配置好之后,weex create testProject
创建一个项目High起来吧。
2、快速入门
weex的入门还是比较简单的,JavaScript、Vue了解下,即可预约的hello world。
原生开发也许对vue接触不多,跨界有时候很容易望而却步,其实Vue本身,就是容易上手的框架,类似MVVM的模式(类似Android的DataBinding),很容让人理解上手,简单的说,你只关心数据,然后绑定到显示的控件,就是这么简单。
一般通过 Vue官网 教程,30分快速撸一发,之后你就直接入门Weex了,对,Weex做的最彻底的就是,你直接使用 vue 写一个Web页面,之后再顺手编译成了 ios 和 android 的原生页面(尽管有些时候你需要在平台适配上花费心思)。
如上图(请忽略那个this( ̄. ̄)),这就是一个极度简化的,用Vue写的Weex页面。效果是从显示Hello World ,一秒变I’m CarGuo,就是这么自信。
在<template>
中排布需要渲染的控件,在<style>
中指定控件的样式(当然你也可以直接在<template>
中),在<script>
中写数据获取和处理逻辑等,是不是很简单, Don’t be shy,Let’s fuck it !
因为需要支持三端,Weex在Vue的基础上阉割了一些标签、css样式和事件,具体可见与 Web 平台的差异
其中,在Android和IOS上,<text> <image>
等标签,其实是被编译为原生控件,这就是上面所说的dom解析,同时你也可以在原生端,自定义控件或者功能模块,然后注册到weex中使用,实际上weex提供的基础控件和功能模块并不多,但却很容易拓展,具体可见 拓展原生端功能 。
(ps 也不知道阿里是怕做多错多,还是懒)
说到这里,就需要说一说Weex的原生插件开发支持,这也是官方文档比较没整理好的原因,其实文档是有的:Weex插件开发文档,如Android插件大致流程就是:
weex plugin create
命令创建插件。- 在android目录的library下通过
@WeexComponent
(控件)、@WeexModule
(非UI功能)、@WeexAdapter
(weex继承功能拓展)实现第三方支持。 - 将library发布到maven (当然你也可以直接源码发布到npm)
- 配置根目录的
package.json
然后发布到npm
由此可见,weex可以很方便的提供原生功能的拓展支持,但是由于社群较为薄弱,导致第三方插件缺失,有(hen)些(duo)时候你可能不得不自己着手,开发原生端的功能支持,这就对于跨平台开发而言,特别前端开发而言,就稍(te)显(bie)不友好了。
题外话 :说到跨平台开发,也许你听说过cordova
这位老大哥,它曾是早期的跨平台开发潮流,cordova
提供丰富的原生插件和打包功能:通过webview把前端页面打包成一个App,通过插件提供前端需要的原生接口,交互通过webview的js接口支持。为什么说起它呢,是因为Weex中,你可以看到很多cordova
的影子,类似weex platform add android
、weex plugin add xxx
都有些cordova
的味道。如下图,你如今依旧可以在Weex中找,寻找到cordova
的存在感。
3、其他推荐
Vuex 和 Vue-Router ,居家旅行必不可少。
-
Vuex类似Redux,如果你没听说Redux不要紧,也不要怂,简单了说,Vuex就是单页面下,帮你管理数据的框架。数据都存在Vuex的store中,你操作store更新数据,然后将store绑定到界面。它的用处在于可以在多个vue组件间,方便的同步数据,更新界面。
-
Vue-Router也是用于单页面下,指定跳到某个页面的管理工具,路由嘛,浅显易懂。
iconfont :矢量图标,少不了iconfont,通过字库生成图标,资源丰富,绝对值得推荐。
weex-ui: weex中难得的良心官方封装库。
eros :eros 不是框架,是基于 weex 封装、面向前端的 vue 写法的一整套 APP 开源解决方案,是由本木医疗大前端团队经过大量实践沉淀而出。。
四、深入填坑
1、ES6、ES7
说到 Javascript ,ES6、ES7必须了解下。Weex中默认就有对其支持,但是对于async、await等,还需要如下一些简单配置,然后 have fun 。
//命令行安装
npm install --save-dev babel-plugin-transform-runtime
//然后在.babelrc文件中加入
{
“presets”: [
“es2015”,
“stage-0”
],
“plugins”: [ [
“transform-runtime”,
{
“helpers”: false,
“polyfill”: false,
“regenerator”: true,
“moduleName”: “babel-runtime”
}
]]
}
2、多页面
Weex默认是单页面效果,也就是Android中一个Activity的概念,而单页面效果在原生上,跳转一多效果就会web了。既然叫native,怎么可能如此too young,所以这个时候,就需要修改默认的webpack,让其支持naive多页面了ı╮(╯▽╰)╭。
首先,要知道Weex真正运行的是,通过entry.js
作为入口文件文件,通过webpack,将.vue
文件打包成index.js
进行使用。Look,多页面的重点,就是将独立页面的.vue
文件,生成多个js文件。
如上图,参考entry.js
文件,创建一个SecondPageEntry.js,作为SecondPage.vue的入口,用于webpack生成SecondPage.js页面。
什么?webpack没听说过怎么办,No problem,你只需简单的修改,一知半解完全可以胜任。如下图,我们主要需要修改webpack.common.conf.js
文件,
可以看出,webpack.common.conf.js
中,其实是区分了webConfig和weexConfig的不同打包方式。如下图,其中weexEntry就是我们需要修改的地方,可以看到本来已经有index和entry.js存在了。
最后我们需要通过navigator来实现跳转,我们需要知道,要跳转的js文件在哪里,如下代码演示,如何实现navigotor的native跳转,完整兼容三端跳转请移步demo项目。
//获取当前js文件所在完整路径
let bundleUrl = this.$getConfig().bundleUrl;
bundleUrl = String(bundleUrl);
let nativeBase;
//android一般位于file://assets目录下
let isAndroidAssets = bundleUrl.indexOf(‘file://assets/’) >= 0;
//ios一般位于一般带有file开头,带有WeexDemo.app
let isiOSAssets = bundleUrl.indexOf(‘file:///’) >= 0 && bundleUrl.indexOf(‘WeexDemo.app’) > 0;
if (isAndroidAssets) {
nativeBase = ‘file://assets/dist/’;
} else if (isiOSAssets) {
nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf(‘/’) + 1);
} else {
let host = ‘localhost:8080’;
let matches = ///([^/]+?)//.exec(bundleUrl);
if (matches && matches.length >= 2) {
host = matches[1];
}
nativeBase = ‘http://’ + host + ‘/index.html?page=./dist/’;
}
return nativeBase;
3、样式sass\scss
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级安卓工程师,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注Android)
…(img-f3i9AB6c-1710929268276)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注Android)
[外链图片转存中…(img-w4HUycYt-1710929268277)]