首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

Weex 中别具匠心的 JS Framework

手淘团队在对Weex进行性能优化时,遇到了很多问题和挑战: JS Bundle下载慢,压缩后60k左右大小的JS Bundle,在全网环境下,平均下载速度大于800ms(在2G/3G下甚至是2s以上)...客户端访问Weex页面时,首先会网络请求JS BundleJS Bundle被加载到客户端本地后,传入JSFramework中进行解析渲染。...基于该 JS Framework 撰写 JS bundle,并加入特定的前缀注释,以便 Weex JS runtime 能够正确识别。...如果在 JS Bundle 在文件开头带有如下格式的注释: // { "framework": "Vue" } ...复制代码 这样 Weex JS 引擎就会识别出这个 JS bundle 需要用 Vue...Weex 支持同时多种框架在一个移动应用中共存并各自解析基于不同框架的 JS bundle。 这一块笔者暂时还没有实践各自解析不同的 JS bundle,相信这部分未来也许可以干很多有趣的事情。

7K30

移动跨平台开发深度解析

开发者首先可在本地像编写 web 页面一样编写一个 app 的界面,然后通过命令行工具将之编译成一段 JavaScript 代码,生成一个 WeexJS bundle;同时,开发者可以将生成的 JS...web 页面,这个页面和移动应用使用相同的页面源代码,但被编译成适合Web展示的JS Bundle,通过浏览器里的 JavaScript 引擎及 Weex SDK 运行起来的。...其中, Native 加载bundle 文件大致经历了以下阶段: weex 接收到 js 文件以后,JS Framework 根据文件为 Vue 模式,会调用weex-vue-framework 中提供的...总的来说它主要负责是:管理Weex的生命周期,解析JS Bundle,转为Virtual DOM,再通过所在平台不同的API方法,构建页面;进行双向的数据交互和响应。...Weex 选择使用JS Framework 集成到 WeexSDK的方式,一定程度减少了JS Bundle的体积,使得 bundle 里面只保留业务代码。

3.3K20

移动端跨平台开发的深度解析

实际上,在 Native 中对 bundle 文件的加载大致经历以下阶段: weex 接收到 js 文件以后,JS Framework 根据文件为 Vue 模式,会调用weex-vue-framework...总的来说它主要负责是:管理Weex的生命周期;解析JS Bundle,转为Virtual DOM,再通过所在平台不同的API方法,构建页面;进行双向的数据交互和响应。 ?...Bundle文件的大小,很大程度上影响了框架的性能,而 weex 选择将 JS Framework 集成到 WeexSDK 中,一定程度减少了JS Bundle的体积,使得 bundle 里面只保留业务代码...打包时,weex 是通过 webpack 打包出 bundle 文件的。...bundle 文件的打包和 entry.js 文件的配置数量有关,默认情况下之后一个 entry 文件,自然也就只有一个bundle文件。

2.9K20

移动端跨平台开发的深度解析

w=800&h=406&f=png&s=22761]  实际上,在 Native 中对 bundle 文件的加载大致经历以下阶段: weex 接收到 js 文件以后,JS Framework 根据文件为...总的来说它主要负责是:管理Weex的生命周期;解析JS Bundle,转为Virtual DOM,再通过所在平台不同的API方法,构建页面;进行双向的数据交互和响应。...Bundle文件的大小,很大程度上影响了框架的性能,而 weex 选择将 JS Framework 集成到 WeexSDK 中,一定程度减少了JS Bundle的体积,使得 bundle 里面只保留业务代码...打包时,weex 是通过 webpack 打包出 bundle 文件的。...bundle 文件的打包和 entry.js 文件的配置数量有关,默认情况下之后一个 entry 文件,自然也就只有一个bundle文件。

3.1K41

​ 《企鹅电竞weex实践—— iOS SDK的小九九》

在服务端,开发者将写好的Weex文件转换成JS bundle并部署到服务器上供终端下载;终端会在合适的时机拉取JS Bundle,同时利用WeexSDK 中预先准备好的 JavaScript 引擎解析执行...JSJS端主要内容是Weex源码中的native-bundle-main.js文件,它提供了一系列Weex的基础JS方法,作用相当于一个库,因此我们又称之为JS Framework。...WeexJS Bundle拆分为基础JS库和业务JS代码, 并把JS库带到安装包中,这样一来,页面请求的JS Bundle就只需要包含业务代码,体积会变得很小,对于加载速度提升大有裨益。...但如果想要自已实现一个Weex Controller而不是继承它,这个时候就需要用到Model中的WXSDKInstance,Weex渲染过程的各个阶段都会在WXSDKInstance中有回调,JS Bundle...还记得最初的那张Weex框架图吗? WXSDKInstance(在Model模块里)是整个Weex页面加载的起点,它会去服务端请求JS Bundle,没有JS Bundle我们什么事都干不了!

1.4K50

移动跨平台Weex入门

下面是一张Weex的整体架构图。 从这张图我们可以发现,Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。...具体来说,开发者首先可以在本地像撰写web页面一样撰写一个 app 的页面(Weex File),然后编译成一段 JavaScript 代码(transformer),形成 Weex 的一个 JS bundle...;在云端,开发者可以把生成的 JS bundle 部署上去(deploy),然后通过网络请求或预下发的方式传递到用户的移动应用客户端(Serve->JS FrameWork);在移动应用客户端里,WeexSDK...会准备好一个 JavaScript 引擎(JSCore、V8),并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储...、网络通信、调用设备功能、用户交互响应等移动应用的场景实践(callJs、callNative); 说了这么多,其实Weex的运作流程可以使用下面的原理来描述: <

70620

最火移动端跨平台方案盘点

实际上,在 Native 中对 bundle 文件的加载大致经历以下阶段: 1)weex 接收到 js 文件以后,JS Framework 根据文件为 Vue 模式,会调用weex-vue-framework...总的来说JS Framework主要负责的是: 1)管理Weex的生命周期; 2)解析JS Bundle,转为Virtual DOM,再通过所在平台不同的API方法构建页面; 3)进行双向的数据交互和响应...Bundle文件的大小,很大程度上影响了框架的性能,而 weex 选择将 JS Framework 集成到 WeexSDK 中,一定程度减少了JS Bundle的体积,使得 bundle 里面只保留业务代码...打包时,weex 是通过 webpack 打包出 bundle 文件的。...bundle 文件的打包和 entry.js 文件的配置数量有关,默认情况下之后一个 entry 文件,自然也就只有一个bundle文件。

3.9K20

Weex系列(一)之Weex入门准备

开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面(Weex File),然后编译成一段 JavaScript 代码(transformer),形成 Weex 的一个 JS bundle...;在云端,开发者可以把生成的 JS bundle 部署上去(deploy),然后通过网络请求或预下发的方式传递到用户的移动应用客户端(Server————>JS FrameWork);在移动应用客户端里...,WeexSDK 会准备好一个 JavaScript 引擎(JSCore、V8),并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储...此处主要推荐下Weex的开发使用工具: Sublime 安装、破解可以参考《mac sublime3 破解版的安装、插件管理和配置》; 安装的一些插件:Emmet、HTML-CSS-JS Prettify...推荐看一些HTML+CSS的基础课程,比较推荐慕课网(真不是广告); Vue也是比较好入门的,只要理解了双向绑定,参考文章《Vue.js——60分钟快速入门》;

87440

最火移动端跨平台方案盘点:React Native、weex、Flutter

实际上,在 Native 中对 bundle 文件的加载大致经历以下阶段: 1)weex 接收到 js 文件以后,JS Framework 根据文件为 Vue 模式,会调用weex-vue-framework...总的来说JS Framework主要负责的是: 1)管理Weex的生命周期; 2)解析JS Bundle,转为Virtual DOM,再通过所在平台不同的API方法构建页面; 3)进行双向的数据交互和响应...Bundle文件的大小,很大程度上影响了框架的性能,而 weex 选择将 JS Framework 集成到 WeexSDK 中,一定程度减少了JS Bundle的体积,使得 bundle 里面只保留业务代码...打包时,weex 是通过 webpack 打包出 bundle 文件的。...bundle 文件的打包和 entry.js 文件的配置数量有关,默认情况下之后一个 entry 文件,自然也就只有一个bundle文件。

5.5K41

移动跨平台技术方案总结

最终,JS代码会被打包成一个bundle文件并自动添加到应用程序的资源目录下,而应用程序最终加载的也是打包后的bundle文件。...RN的打包脚本位于“/node_modules/react-native/local-cli”目录下,打包后通过metro模块压缩成bundle文件,而bundle文件只包含打包js的代码,并不包含图片...具体来说,在开发阶段编写一个.we文件,然后使用Weex提供的weex-toolkit转换工具将.we文件转换为JS bundle,并将生成的JS bundle上传部署到云端,最后通过网络请求或预下发的方式加载至用户的移动应用客户端...当集成了Weex SDK的客户端接收到JS bundle文件后,调用本地的JavaScript引擎执行环境执行相应的JS bundle,并将执行过程中产生的各种命令发送到native端进行界面渲染、数据存储...当JS bundle从服务器下载完成之后,Weex的Android、iOS和H5会运行一个JavaScript引擎来执行JS bundle,同时向各终端的渲染层发送渲染指令,并调度客户端的渲染引擎实现视图渲染

2.4K10

weex-06-程序的入口文件app.js

目前 Weex 与 Vue 正在展开官方合作,并将 Vue 2.x 作为内置的前端框架,Vue 也因此具备了开发原生应用的能力,也就是说我们上层是使用vue.js 语法进行代码编写,然后通过打包工具将这些代码打包成...app.weex.js文件,下发都手机端,由SDK进行解析,使用手机原生的组件进行渲染!...F3D0C72A-0354-4FF2-9302-935882CCEB0C.png 我把教程分为两部分内容 执行文件app.weex.js 开发阶段 app 开发阶段 app.js 这个是我们打包时的入口文件...友情提示 如果您打包的文件是用于iOS 和 安卓等客户端渲染的代码,这个el的值可以不用设置,weex客户端的SDK会默认将其挂在根节点上 接下来 我们应该学习的是weex中的组件,但是在这之前..., 先讲解一下weex中的布局和限制

2K20

Weex学习指南

而阿里巴巴在2016年6月开源的Weex移动跨平台框架,语法上使用Vue.js编写,更加贴近Web前端开发,在性能和快速迭代方面,相比其他框架也有一定的优势。...同时,Weex框架的结构是解耦的,渲染引擎与语法层是分开的,也不依赖任何特定的前端框架,目前主要支持Vue.js和Rax两个前端框架。...这样一来,甚至可以使用其他前端框架来驱动Weex,打造三端一致的native应用。 作为一套前端跨平台技术框架,Weex建立了一套源码转换以及Native与Js通信的机制。...具体来说,在开发阶段编写一个.we文件,然后使用Weex提供的weex-toolkit转换工具将.we文件转换为JS bundle,并将生成的JS bundle上传部署到云端,最后通过网络请求或预下发的方式加载至用户的移动应用客户端...当集成了Weex SDK的客户端接收到JS bun

55120
领券