Weex 学习与实践(一):Weex ,你需要知道的事

Weex学习与实践(一):Weex,你需要知道的事

Weex学习与实践(二):iOS集成的tips

Weex学习与实践(三):iOS原理篇

本文主要介绍包括Weex基本介绍、Weex源码结构、初始化工程、we代码结构、Weex的生命周期、Weex的工作原理、页面间通信、boxmodel & flexbox、weex的缺点

基本介绍

A framework for building Mobile cross-platform UI

怎么解释它呢?我的理解就是weex = react-native +vue ,使用vue的API风格,两端的实现方式则和react-native,weex 比rn的优点就是一次编写三端运行。

IDE: Sublime Text + vue-syntax-highlight

命令行工具:weex-toolkit

调试工具: weex-devtool

weex分为组件component和模块(module)以及事件

weex-components : weex-components

组件 就是各种标记组件,比如div 、slider、indicator等 通过下面这种方式使用

js模块

其他的还有stream,dom,animation之类的

事件

Weex源码结构

package.json

node_modules依赖,更重要的是里面包含了npm run xxx 等快捷命令。比如之前我们运行node.js程序是这样的:$ node xx.js。这里我们可以把它配置化,例如package.json文件中scripts的 “build:config”: “node build/config.frameworks.js”,其实就是npm run build:config 相当于执行了node build/config.frameworks.js

start文件: 启动程序文件,里面包换编译和启动脚本:

examples: 示例Demo

android/ios/html: 各平台代码

build:打包各平台的脚本,配置在package.json中。

参考链接:第2篇 了解Weex源码结构,修改example

初始化工程

初始化工程前需要先安装 homebrew,然后按照下面步骤创建一个工程。

这时有可能提示

你需要再

这时,打开浏览器,输入http://127.0.0.1:8080, 就会看到这个项目的效果:

参考链接:第3篇 初始化工程

npm run dev 干了什么呢?

先看 package.json 文件

npm run dev实际上相当于 webpack –watch

webpack实际上是执行了默认的webpack.config.js配置文件

webpack.config.js 引入webpack和weex-loader,entry属性是表示入口文件,output表示输出文件,默认输出到dist文件夹。

不过这个自动产生的webpack.config.js的文件有个坑就是,你添加一个新的we文件,他不会自动build为js文件 可以手动添加 entry: { main: path.join(__dirname, 'src', 'main.we?entry=true'), translate: path.join(__dirname, 'src', 'translate.we?entry=true') }

不过推荐的是自己遍历所有的we文件

hugojing – webpack.config.js

duqian291902259 – webpack.config.js 第3篇 初始化工程

入口文件index.html

这里可以参考 Integrate Weex HTML5 to your project

weex_extend_demo

we代码结构

template内必须包含唯一的根节点作为父容器, div就是一个很好的选择,里面则是一些Native Components

style 支持盒子模型和Flexbox

weex内置了响应式的支持,页面的宽度是以750来做为标准,自动适配所有手机;

script里面包含很多ViewModel Options,

data methods computed init, created, ready events

如果需要在模板里实现更多的逻辑判断,你可以使用’computed property’.

created是生命周期函数,这个时候模板还没有被渲染,常用来在这里定义数据的更新和获取;

ready是生命周期函数,这个时候模板被渲染,常用来做一些自己上报等;

weex- references – Weex Cheat Sheet

显然we文件的这些代码是不会被 native app 识别的,我们要想办法让这些代码可运行。所以我们同时做了三件事:

1.在本地用一个叫做 transformer 的工具把这套代码转成纯 JavaScript 代码

2.在客户端运行一个 JavaScript 引擎,随时接收 JavaScript 代码

3.在客户端设计一套 JS Bridge,让 native 代码可以和 JavaScript 引擎相互通信

所以紧接着第二步,就是用 transformer 对代码进行转换,变成客户端可运行的 JavaScript 代码

11f7854634-8e24-11e5-8173-3417c63043a4

原图:本地开发时的 Weex Transformer 工作原理

在 transformer 中,我们主要的工作就是对 HTML、CSS、JavaScript 代码进行解析和重组。这里我们用到了三个非常重要的库:

HTML 解析工具:htmlparser

CSS 解析工具:cssom

JavaScript 解析工具:uglify-js

对无线电商动态化方案的思考(二)

对无线电商动态化方案的思考(三)

Weex的生命周期

init内一般用于初始化一些内部变量,绑定一些自定义事件,这时还没有数据绑定,没有创建vdom,所以不能通过this获取到data和methods,也不能获取vdom的节点

created 完成了数据绑定 ,但还未开始编译模板,可以通过this获取data和methods,但不能获取vdom的节点

ready表示渲染完成 ,从子组件往上触发

destroyed 组件销毁,比如页面跳转,从子组件开始往上触发

Weex的工作原理

12qq20160428162545

13qq20160428162748

140b0bd8e4-8e25-11e5-86e1-704adcfc6141

Weex详解:灵活的移动端高性能动态化方案 – 勾股&鬼道

对无线电商动态化方案的思考(二)

页面间通信

页面跳转是通过指定下一个页面的url,然后通过openurl或者push的方式来跳转

获取url的方式可以通过下面这段JS代码

第六篇 导航、页面跳转、stream、webview

页面通信有两种方式

1.通过 url 参数传递。

2.通过 localStorage 数据存储。

如果是组件间通信不是页面通信,则参考:组件之间通信 – (Communicate Between Components)

boxmodel & flexbox

weex支持boxmodel 和flexbox

下面这个是boxmodel

15ct_boxmodel

关于flexbox,可以看我的这篇文章react-native的第一课 – flexbox布局

weex的缺点

1.Weex将整个app的宽度定死在750px,然后其他都是根据scale进行计算的,会导致适配不方便。

2.目前不支持iOS的presentViewController方法

3.很多组件和模块需要自己扩展(比如datepicker,iconfont,摄像头,二维码等)

几个小问题

1.之前weex是只支持es5,现在可以支持es6了。精华 新版weex-loader@0.3.0-alpha,欢迎试用

2.怎么断点调试?

目前是可以断点调试的,可以参考下面文章

Weex调试神器——Weex Devtools使用手册

线上调试

3.weex支持本地图片吗?

根据官方答疑是可以的,但是我目前还没有尝试成功。

faq:use-local-image

4.weex-x的使用?

5.promise怎么使用?

issues – 1269

6.热更新方案是什么?

最后,希望有越来越多的人把weex用起来。

2 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部