weex实践初探

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 --