正文 

当前位置： 首页 > java > java教程

跨平台开发之阿里weex框架环境搭建

fozero fozero     2022-08-09     363

关键词：

 

爱编程爱分享，原创文章，转载请注明出处，谢谢！https://i.cnblogs.com/EditPosts.aspx?postid=5995122

 

一、介绍

Weex是阿里今年6月份推出的跨平台解决方案，6月底正式开源。官网 https://alibaba.github.io/weex/

1、官方支持iOS、Android、HTML5.

2、Write Once, Run Everywhere。一次编写可生成三平台代码。

3、DSL模板学习超简单，直接写HTML、CSS、JS。这意味着可以直接用现有编辑器和IDE的代码补全、提示、检查等功能。

4、轻量级、可扩展、高性能。

5、集成花样多，可在HTML5页面嵌入，也可嵌在原生UI中。

 

二、环境搭建

1、安装node.js环境

下载https://nodejs.org/en/download/

安装完成后，打开cmd  输入node --version命令查看node版本

 

2、安装命令行工具weex-toolkit

输入命令 npm install -g weex-toolkit

npm是nodejs一个非常流行的管理工具，可以安装基于nodejs开发的任何模块包，-g表示把weex-toolkit安装到全局模块中，成功后我们可以在

　　nodejs\node_modules下面找到weex-toolkit这个包；

　　注意：node_modules这个针对nodejs本身和基于nodejs开发项目都会存在，所以存在全局局部之分，不带-g参数则表示在当前项目的node_modules目录中添加模块包


查看是否安装成功，输入命令weex，出现如下图表示安装成功

查看weex版本  ，输入weex -version

3、编译测试

将下面代码拷贝到新建文件中，并以test_list.we文件命令

<template>
<div class="container">
<div class="cell">
<image class="thumb"src="http://t.cn/RGE3AJt"></image>
<text class="title">JavaScript</text></div></div>
</template>
<style>
.cell { margin-top: 10; margin-left: 10; flex-direction: row; }
  .thumb { width: 200; height: 200; }
  .title { text-align: center; flex: 1; color: grey; font-size: 50; }
</style>

然后运行终端，进入test_list.we文件所在目录，输入weex tech_list.we
如果成功，会在浏览器中打开一个新的页面如下，表示运行成功

 

我们试着修改代码，保存会发现我们页面内容同时也更新了，这就是hot reloaded  
终端也能看到

 

4、手机运行APP

终端输入以下命令会生成一个二维码 weex tech_list.we --qr -h {ip or hostname}   这里-h指定本地ip地址或者主机名 ，我这里填写我本地的ip如下：

weex tech_list.we --qr -h 192.168.0.102

 

最后我们手机安装playground.apk（下载地址：https://alibaba.github.io/weex/download.html），打开二维码扫一扫运行即可

 

 

 

 

 
 

 

学习vue.js之vue移动端框架到底哪家强

...ps://cn.vuejs.org/Weex2016年4月21日，阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。Weex是一套简单易用的跨平台开发方案，能以web的开发体验构建高性能、可扩展的native应用，为了做到这些，Weex与Vue合作，使用Vue作... 查看详情

视频干货教程高性能跨平台移动开发框架weex最佳实践

Weex作为阿里开源的高性能跨平台移动开发框架，开源至今倍受关注。这次WeexConf将是Weex团队首次全明星阵容集体亮相，大会上半场是一个关于Weex你不能错过的Keynote，下半场包含技术实践和最佳实践两个分论坛，让快速大家玩转... 查看详情

qtquick系列教程之开发环境的搭建

简介Qt与QtCreator简介Qt是一个跨平台应用程序和UI开发框架。使用Qt您只需一次性开发应用程序，无须重新编写源代码，便可跨不同桌面和嵌入式操作系统部署这些应用程序。QtCreator是全新的跨平台QtIDE，可单独使用，也可与Qt库和... 查看详情

weex环境配置快速上手

一、前言    4月21日，阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。    Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web... 查看详情

android自动化测试之环境搭建

...试之环境搭建一、Android-sdk介绍?SDK(Softwaredevelopmentkit)软件开发工具包。被软件开发工程师用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。Android是google公司推出的手机开发平台。Android-sdk... 查看详情

基于weex的flutter项目框架

...适配。如今火热的Flutter相比Weex和Rn来说，给出了更好的跨平台解决方案。所以我们设计了一套基于Weex实现，底层跑在FlutterEngine上的框架。 底层的Runtime采用isolateengine,框架业务逻辑，Dom的解析逻辑和Render逻辑都跑在这里。... 查看详情

weex快速创建工程helloworld

开发环境根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发iOS和Android也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。开发IOS应用需要MacOS系统开发Android应用，Ma... 查看详情

python自动化自动化测试平台开发：8.前端开发实战上之环境搭建(代码片段)

...套vue的环境。我们只需要在它的框架下，完成我们的开发内容即可。第一步：安装node：https://nodejs.org/z 查看详情

阿里云开发零基础免费搭建个人hexo博客

云开发零基础搭建个人Hexo博客摘要云开发平台搭建个人Hexo博客的优势环境准备操作步骤写在最后摘要Hexo是一款基于Node.js的博客框架，可以将Markdown格式的文本渲染为HTML代码。所以，博客基本就是纯静态，维护相对方便。但是... 查看详情

weex环境配置快速上手

一、前言    4月21日，阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请。    Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web... 查看详情

weex与weexpack环境搭建

weex与weexpackweexinit会生成一个weex项目，里面有weex,vue模板。如果要开发Android，需要建一个Android项目。weexpack,可以帮助搭建Android和iOS项目 ----------------------weex------------------------------------------------------------一、安装依 查看详情

weex技术剖析

...Weex简介2016年4月21日，阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex，Weex能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。... 查看详情

weex基于vue2.0开发框架模板搭建

...侧面反映的weex的发展还是很可观的，可是目前weex的开发者大多数是中小型公司或者个人，大公司屈指可数，揪其原因可能是基于weex的开发正确的姿势大家并没有找到，而且市面上的好多轮子还是.we后缀的，... 查看详情

java入门教程：开发环境之jdk搭建windows10_环境变量配置

...ava是由Sun公司于1995年5月推出的高级程序设计语言。Java是跨平台语言，可运行于Windows、Linux、MacOS等多个平台，以及其他多种UNIX版本的系统。本文将给大家讲解Java开发环境JDK的搭建，更多精彩内容敬请期待！ 第一步：下载JD... 查看详情

混合开发之uni-app

...是它只是一个高性能的渲染器，没有足够的API能力，使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android3拨人开发，适得其反。而nvue解决了这个大问题，让前端工程师可以直接开发完整App，... 查看详情

项目开端之环境搭建原则

一、统一的平台开发环境 例如:J2EE开发平台（详细的版本号控制） JDK、Tomcat、MySQL、Spring、MyBatis、Jackson、Junit、Redis Eclipse及安装插件的版本、其他等等好处：在以后解决问题的过程中，就可以排除平台不一致所带来的未知的问... 查看详情

esp8266开发之arduino环境搭建

ESP8266开发之arduino环境搭建1.Arduino简介    Arduino是一款便捷灵活、方便上手的开源电子原型平台。包含硬件（各种型号的Arduino板）和软件（ArduinoIDE)。由一个欧洲开发团队于2005年冬季开发。其成员包括MassimoBanzi、Da... 查看详情

jsp之开发环境搭建

1、下载JDK1.8（或JDK1.7），并进行安装和配置，主要是配置环境变量JAVA_HOME及Path。 2、下载并配置Tomcat8.0（或Tomcat7.0）。Windows平台请下载TomcatZip包，直接解压缩即可。运行Tomcat需要环境变量：JAVA_HOME以及CATALINA_HOMECATALINA_HOME对... 查看详情