Weex简介

Weex是阿里前端技术团队的开源跨平台开发方案，可以构建具有web开发经验的高性能、可扩展的原生应用。Weex的页面表示层采用Weex，按照W3C标准实现统一的JSEngine和DOM API。Weex是像React Native一样流行的跨平台开发框架。Weex的官方地址是：https://weex.apache.org/. Weex最简单的方法就是使用游乐场App，在dotWe中写一个Hello World的例子。您甚至不需要安装任何开发环境或编写本机代码来启动Weex程序。

环境建设

在开发Weex程序之前，您需要设置相关的开发环境。为了同时开发安卓和iOS跨平台应用，你需要一台Mac电脑，然后安装一些必要的软件。

公司自产自用

自制程序是Mac系统的包管理器，用于安装NodeJS和其他一些必要的工具和软件。安装命令如下：

/usr/bin/ruby-e ' $(curl-fssl https://raw . githubuser content.com/homebrew/install/master/install)'需要注意的是，在Max OS X 10.11以上的版本中，home brew在安装软件时可能会遇到/usr/loca目录的未写权限问题，因此需要以管理员权限运行。

结节

Weex目前需要NodeJS 6.0或更高版本，而Homebrew默认安装最新版本，一般符合要求。

brew install节点安装完节点后，建议设置npm镜像，加快后期项目建设进程。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，打包员无法正常识别！相关命令如下：

npm配置集注册表https://registry.npm.taobao.org-全球npm配置集dist URL https://npm.taobao.org/dist-全球Xcode

要支持iOS平台，需要配置iOS开发环境，iOS开发工具使用Xcode。此外，您需要安装cocoaPods工具。

安卓开发环境

安卓工作室是安卓应用的开发工具。需要注意的是，运行Weex的安卓构建工具版本需要高于23.0.2。

weex-工具包

Weex-toolkit是一个官方的脚手架命令行工具，可以用来创建、调试和打包Weex项目。安装weex-toolkit的命令如下：

npm安装-g weex-toolkitweexpack

Weexpack是新一代weex应用工程和插件工程开发工具包，是基于weex快速构建应用原型的利器。可以创建Weex应用工程和插件工程，可以快速打包weex应用并安装在手机上运行，可以创建weex插件模板并将插件发布到weex应用市场，可以方便地使用weexpack在weex工程和原生工程中安装插件。安装weexpack的命令如下：

npm install -g weexpack项目的建立

使用以下命令创建项目：

创建weexpack create appName后，Weex项目的目录结构如下：MDAndroid . config . JSONconfig . XMLhooksreadme . MDIOs . config . JSONpackage . JSON平台插件下载目录readme . MDsrc//服务代码(we文件) 目录index . westart . battoolsweb pack . config . plugin . jswebit . jsweb pack . config . js需要注意的是，用上述命令创建的项目不包含ios和android工程模板，因此需要使用以下命令创建安装依赖项，然后安装Android和iOS工程模板。

Npm安装安装weex应用程序模板

安装weex应用程序模板的模板命令如下，模板将安装在platforms目录中。iOS平台的设置命令如下：

weexpack平台添加iosAndroid平台的安装命令如下：

weexpack platform add android安装完成后，您将在platforms目录中看到以下目录结构：

平台 ios 安卓写Hello Word程序

打开/src/index.vue文件，用以下代码替换默认内容：

template div class=' wrapper ' @ click=' update ' image : src=' http : log URL ' class=' logo '/image text class=' title ' hello { { target } }/text text class=' desc '现在，让我们使用vue来构建您的weex应用程序。/text /div/templatestyle。包装器{ align-items : center；边距-top : 120 px；} .title { padding-top :40 px；填充-bottom : 40px；font-size : 48px；} .徽标{ width: 360px高度： 156像素；} .desc { padding-top : 20px；color: # 888font-size : 24px；}/stylescript导出默认值{ data : { logourl : ' http://img 1 . vued . vant hink.cn/vued 08 aa 73 a9 ab 65 dcbd 360 EC 54659 ada 97c . png '，target: 'World' }，Methods : { update : function(e){ this。target=' Weex ' console . log(' target : '，这。target)}}/script有关weex的更多语法规则，请参考开发手册。

奔跑

对于网络平台，执行以下命令：

npm运行构建npm运行开发npm运行服务

或者使用以下命令执行单页调试：

Weex src/index.vue真实机器和虚拟机正在运行

使用Xcode打开WEEX项目的ios目录，如下图所示：

打开后，只需配置基本配置，如项目名称、标识符、版本、开发者等信息。

可以选择虚拟机或者真机来执行iOS项目，但是在执行之前，要确保代码是新打包的。打包的命令如下：

Weex构建ios，然后选择真实的机器或模拟器运行。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。