Weex 快速了解和入门 构建高性能的Native APP

分类:Javascript| 发布:raodaor| 查看: | 发表时间:2017/12/6

 

2c450000d310db0456a5

求关注​

Weex这个名字,已经响亮好久了。如果你是新来的,那么也不算太迟,毕竟它的坑填了不少了。直接用 Weex v2就好。

那么什么是Weex呢?

官方的解释可以到 https://weex.apache.org/cn/guide/ 来细看。

我的理解是:它是一个技术,通过js代码,结合客户端集成的SDK(Weex)、JS引擎来解析你的js文件,渲染出页面。如果你要和客户端的原生交互,只要让Android和IOS开发的人,继承Weex SDK 来写一个module,然后JS前端通过,weex这个变量,来调用写的module,就打通了JS前端和客户端直接的交互。

其实,Weex就是一个中间桥梁,连接前端和客户端。

纯H5的应用,不管是效果还是性能,和原生的APP还是差别很大的。 原来,Facebook异想天开的,让H5一统天下(三端通吃:PC、Android、IOS),结结实实的失败告终。

Hbuilder这种的,比Weex早,不知道现在怎么样了。

不知道,上边说的,够不够明白。

4aeb00010577dffa1bf8

Weex​

​那我们来看一下原生弹窗的大致代码实现吧。(脚手架的项目框架,后边会说)

第一:在Vue页面中,Script标签里

// 调用Android自定义的模块

const myModule = weex.requireModual("myModule");

// 调用Weex内置的模块

// https://weex.apache.org/cn/references/modules/modal.html

const modal = weex.requireModual("modal");  

modal.toast({message: '头条号:那些曾经放任的时光'); // 原生的小浮层提示

第二:执行打包(webpack)命令

项目目录下cmd>npm run build

打包后在dist目录下生成了2个文件,如图:

4ae80000fd12325043b4

weex打包js bundle

如图所示,同一个vue页面,会打包出一个JS Bundle(原生调用的)和一个Web调用的。

第三步:把js文件拷贝到android/ios项目里。

项目目录里有一个platforms文件夹,一开始是空的。

你只需要,cmd>weex paltform add android 即可在目录中生成android项目。

然后,你可以通过 Android Studio 3.0 来打开刚生产的项目。

把上一步打包的js文件,拷贝到这里,如图所示:

4ae90000fcd7198caf9f

打开Android Studio项目

如上图所示,就完成,JS前端 到 客户端的拷贝流程 (如果客户端是集成环境,只需要把 Weex SDK引入就可以,详情就查阅官方文档)

第四步:发布APK来预览

在Android Studio里,打开菜单栏的:Build>Build APK(s) 来生产apk安装文件。

然后,拷贝到手机里,点击安装即可。

apk是一个Weex playground,即可预览。

关于,如何通过脚手架构建项目,这里就不细说了。概况如下:

安装 weex-toolkit,使用weex命令 weex create projectName

至此,就简单介绍完了Weex的一些心得体会,如有不对的,还请告知。

如果能够帮忙到你,还请,关注我,点赞,分享,收藏。

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/2289.html