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

求关注​

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早，不知道现在怎么样了。

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

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个文件，如图：

weex打包js bundle

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

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

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

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

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

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

打开Android Studio项目

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

第四步：发布APK来预览

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

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

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

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

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

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

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