weex简介
通过 Html 搭建组件结构,flexbox 负责界面布局, Js 控制数据和逻辑
相比 RN,Weex 真正做到了 write once run anywhere
RN 可以认为是一个全新的跨平台移动开发框架,比较重,适合一个完整应用的开发;而 Weex 是为了增强移动端动态性而生的轻量级框架,具有极强的可扩展性,能够比较容易的融入成熟的Native项目中。
1.node.js下载和环境变量配置
网站:https://nodejs.org/en/download/,然后安装。
配置环境参数:NODE_HOME:%toolkit_home%\nodejs
NODE_PATH:%node_home%\node_modules
2.安装 Weex Toolkit
安装命令:
npm install -g weex-toolkit
看到这个界面了表示安装成功(我第一次安装报错了,重试后安装成功)
输入:weex来进行验证,看到如下界面说明确实安装成功了,否则显示weex不是内部命令!
3.运行demo
3.1新建文件夹及文件
新建文件夹tech1及文件tech_list.we,注意.we是weex开发的文件后缀。
然后复制内容到tech_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>
3.2初始化
cd到刚刚新建的文件夹下面,然后执行:
weex tech_list.we
看到下面这个界面,表示demo已经运行起来了!然后会打开浏览器,看到demo界面。
4.weex源文件说明
weex源文件由三部分组成:template, style, andscript, 就像Web由html,css, javascript构成一样。
Template 就像weex的骨架一样,由标签包裹内容,包括两类标签:开放性标签和关闭式标签。
5.手机端运行
5.1下载weex自带的playground app http://alibaba.github.io/weex/download.html
5.2 运行npm run dev这个命令
成功后发现dist目录和main.js文件生成然后我们可以根据readme提示开一个http服务来支持js bundle文件
5.3运行npm run serve命令,获取网络信息
假设你的电脑的ip是192.168.1.100;我们改一下地址 http://192.168.1.100:8080/dist/main.js,然后用二维码生成工具生成二维码,
再用playground app右上的扫一扫便能访问到该页面的内容了。
有问题请访问官网:http://alibaba.github.io/weex/doc/tutorial.html
和中文网https://github.com/weexteam/article/wiki/Weex%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3