weex是阿里2016年开源的项目，号称通过撰写HTML/CSS/JavaScript来开发原生android/ios的UI界面，并且接近原生的性能体验。“写一次，多端编译”一直是无线移动追求的目标，既然阿里牛皮吹得这么大，本人也非常迫切体验一下。下面整理了一下学习weex的步骤和知识点，仅作入门参考。
一、Weex环境搭建
•1.安装node.js
•2.安装 Weex 命令行程序WeexToolkit
•
npm
install -g
weex
-toolkit
•3.上面安装好后 开始建立项目在dos中运行weexinit 提示输入项目名，默认位置在当前dos目录下
•4.项目文件夹中package.json 可查看所有依赖库
•5.项目文件夹中webpack.config.js 可配置输出编译后的js路径
•6.启动监听和服务npm run dev npm run serve
•7.运行npm run dev 命令后提示缺少依赖包错误如’ webpack’
• 可使用npminstall – webpack进行安装
二、WEEXSDK集成到工程
•Android集成有两种方式
•1. 源码依赖：能够快速使用 WEEX 最新功能，可以根据自己项目的特性进行相关改进。
•
•2.SDK 依赖：WEEX会在 jcenter 定期发布稳定版本。Jcenter注:国内可能需要翻墙
三、Weex原理概述
•Weex 是跨平台，可扩展的动态化技术. 你能通过在Weex源码中写 <template>, <style> 和 <script> 标签，然后把这些标签转换为 JS Bundle 用于
•部署,在服务端以这些 JSBundle 响应请求.当客户端接收到 JSBundle 时，它能用被客户端中的 JS 引擎用于管理Native 渲染;API 调用和用户交互.
![]()
![]()
•JSFramework
![]()
![]()
•虚拟 DOM.
![]()
![]()
四、编写.we文件
•WEEX代码由三部分构成：
template (模板)，
style(样式)和
script (脚本)
•<template> :
必须的, 使用类HTML 的语法描述页面结构，内容由多个标签组成，不同的标签代表不同的组件。
•<style> :
可选的, 使用类CSS 的语法描述页面的具体展现形式。
•<script> :
可选的, 使用JavaScript 描述页面中的数据和页面的行为，Weex中的数据定义也在 <script>中进行。
![]()
1，找节点
•weex 中，可以通过在特定的节点上
设置
id
属性，以此来唯一标识该节点。然后可以用
this.
$
el
(id)来找到该节点
![]()
2.we文件中数据绑定
•Weex 使用_mustache_的语法(
{{key}} )来对<template> 中的模板和 <script>里的数据进行绑定.一旦数据额模板绑定了,数据上的修改会实时的在
•模板内容中生效.
![]()
3，.we文件中嵌套.we文件
•经常我们会发现很多可复用的 weex文件，这时候可以封装成 weex组件。我们可以直接创建一个名为
foo.we 的文件
，
<
foo
>就是组件名
![]()
4，.we文件中逻辑控制
•Weex 前端语义支持通过两种特殊属性（
if
和
repeat）的设置来确定组件的显示状态，这会使得整个页面布局显得更加灵活
•if可以控制当前组件节点的
显示状态。如果设为 true，则会将当前节点置于 DOM中渲染，反之则会从 DOM中移除
•
•repeat属性用于控制具有相同样式或属性的组件节点做
重复渲染。它绑定的数据类型必须为数组，其中每个数组项的属性会分别绑定到需要重复渲染的各子组件上
![]()
5.we文件和嵌套we文件交互
•weex 遵循HTML attribute 命名规范，所以
不要在属性中使用驼峰风格（CamelCase ），使用 -连接符的 羊肉串风格（kebab-case）才是正确的打开方式
•子组件能通过 this.$dispatch([String type], [Object detail]) 方法向父组件传送数据。第一个参数代表
事件名，第二个参数则是
数据对象。
•如果子组件的某个父组件通过 $on(
事件名
, [Function callback]) 方法注册了一个相同名字的属性监听，那么callback 函数将得到一个参数对象，并且参数对象的detail 属性值为子组件传递出来的数据对象。
![]()
6，.we文件组件中的事件-(Events)
•weex 允许对<template> 中的元素绑定事件处理器。属性名称是以 on... 为前缀加事件类型和处理函数名。例如onclick="handler“
![]()
7，.we基本样式
•所有 weex 标签都有以下基本样式规则
![]()
8,组件定义
•定义组件是通过一组选项来描述一个组件。这组选项总是被赋值给 <script>标签中的 module.exports 。
•module.exports = {
–
methods: {
•doThis: function () {...},
•doThat: function () {...}
–}
•}
•methods是一个映射，其中包含所有视图模型的方法。
•每个 data 或 method属性将被代理到视图模型实例中。所以，你能
通过
this.doThis
() 调用方法。
•一个完整的例子：
9，.we生命周期
•Weex 视图模型现在支持生命周期内的钩子函数，这些钩子函数能被写为组件选项：
•
init : 在视图模型的构造函数开始调用时激活；
•
created : 当视图模型监听默认数据，但还未编译模板时激活；
•
ready : 当视图模型监听默认数据并且编译模板生成虚拟DOM 后被激活。
10，.we文件中调用已封装本地方法
•
<
dom
>
模块
•1.让页面滚动到那个对应的节点
•var dom = require
('@
weex-module/dom');
•dom.scrollToElement(this.$el('someId'), {offset: 10});
•
<stream >
模块
•stream.sendHttp(options, callback )
•stream.fetch(options,callback,progressCallback)
11,.we中调用原生方法
•Weex 提供了扩展机制，可以根据自己的业务进行定制自己的功能。
•主要分为两类扩展：
•
Module 扩展非 UI 的特定功能。例如sendHttp、openURL等。
•
Component 扩展实现特别功能的 Native 控件。例如：RichTextview，RefreshListview 等。
•
Adapter 扩展Weex对一些基础功能实现了统一的接口，可实现这些接口来定制自己的业务。例如：图片下载等。
Module扩展
•1.Module扩展必须继承 WXModule 类。
•2.扩展方法必须加上@WXModuleAnno 注解。Weex会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。
•3. Weex是根据反射来进行调用 Module扩展方法，所以 Module中的扩展方法必须是 public类型
•4.Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
•5. 完成 Module后一定要在初始化时注册 WXSDKEngine.registerModule("myModule", MyModule.class);
![]()
Component扩展
•1. Component 扩展类必须集成 WXComponent.
•2. Component 对应的设置属性的方法必须添加注解@WXComponentProp(name=value(value is attror style of dsl))
•3. Weex sdk 通过反射调用对应的方法，所以Component 对应的属性方法必须是public，并且不能被混淆。请在混淆文件中添加代码 -
•keep public class * extends com.taobao.weex.ui.component.WXComponent{*;}
•4. Component 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数
•5. 完成Component 后一定要在初始化时注册WXSDKEngine.registerComponent("richtext",RichText.class);
![]()
Adapt扩展
•图片下载：
•需要时集成接口 IWXImgLoaderAdapter，实现 setImage 方法。
![]()
---- end --
