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等 通过下面这种方式使用

<div>
  <image src="..."></image>
  <text>...</text>
</div>

js模块


let modal = require('@weex-module/modal');
modal.toast({
  "message":"我是提示框",
  "duration":2
});  

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

事件

  <div onviewappear="viewappear" onviewdisappear="viewdisappear">
          ......
  </div>

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,然后按照下面步骤创建一个工程。


$ brew install node             //通过brew安装node
$ npm install -g weex-toolkit   //通过node安装 weex-toolkit  
$ sudo gem install cocoapods    //安装iOS包管理工具 cocoapods
$ weex init                     //创建项目的文件
$ npm install                   //依赖安装 package.json文件
$ npm run dev                   //项目编译
$ npm run serve                 //启动轻量服务器  

这时有可能提示

npm WARN babel-loader@6.2.5 requires a peer of babel-core@^6.0.0 but none was installed.

你需要再

npm install babel-core

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

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

npm run dev 干了什么呢?

先看 package.json 文件

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "serve": "serve -p 8080",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "serve": "^1.4.0",
    "webpack": "^1.13.1",
    "weex-html5": "0.2.18",
    "weex-loader": "^0.1.5"
  }
}

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

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

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

require('webpack')
require('weex-loader')

var path = require('path')

module.exports = {
  entry: {
    main: path.join(__dirname, 'src', 'main.we?entry=true')
  },
  output: {
    path: 'dist',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.we(\?[^?]+)?$/,
        loaders: ['weex-loader']
      }
    ]
  }
}

不过这个自动产生的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文件

require('webpack')
require('weex-loader')

var path = require('path')
var fs = require('fs');

var entry = {};

function walk(dir, root) {
  var directory = path.join(__dirname, root, dir);
  fs.readdirSync(directory)
    .forEach(function(file) {
      var fullpath = path.join(directory, file);
      var stat = fs.statSync(fullpath);
      var extname = path.extname(fullpath);
      if (stat.isFile() &&
             (extname === '.we')) {
        var name = path.join(root, 'build', dir, path.basename(file, extname));
        entry[name] = fullpath + '?entry=true';
      } else if (stat.isDirectory() &&
                  file !== 'build') {
        var subdir = path.join(dir, file);
        walk(subdir, root);
      }
    });
}
walk('./', 'src');
module.exports = {
  entry: entry,
  output: {
    path: '.',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.we(\?[^?]+)?$/,
        loaders: ['weex-loader']
      }
    ]
  }
}

hugojing - webpack.config.js

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

入口文件index.html

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

weex_extend_demo

weex代码结构

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

style 支持盒子模型和Flexbox

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


<template>
  <div>
    <div>子组件</div>
    <div>子组件</div>
  </div>
</template>

<style>
</style>
<script>
module.exports = {

  data: function () {
    return {
      x: 1,
      y: 2
    }
  }

  methods: {
    foo: function () {
      console.log('foo')
    }
  },

  computed: {
    z: function () {
      return this.x + this.y
    }
  },

  events: {
    custom: function (e) {
      console.log(e)
    }
  },

  init: function () {},
  created: function () {},
  ready: function () {}
}

</script>

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

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

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

HTML 解析工具:htmlparser

CSS 解析工具:cssom

JavaScript 解析工具:uglify-js

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

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

Weex 的生命周期

<script>
  module.exports = {
    data: {},
    methods: {},

    init: function () {
      console.log('在初始化内部变量,并且添加了事件功能后被触发');
    },
    created: function () {
      console.log('完成数据绑定之后,模板编译之前被触发');
    },
    ready: function () {
      console.log('模板已经编译并且生成了 Virtual DOM 之后被触发');
    },
    destroyed: function () {
      console.log('在页面被销毁时调用');
    }
  }
</script>

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

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

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

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

Weex的工作原理

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

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

页面间通信

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

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

function getAppBaseUrl(self) {
    var dir ='examples'
    var url = self.$getConfig().bundleUrl;
    var bundleUrl = url;
    bundleUrl = new String(bundleUrl);

    var nativeBase;
    var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

    var isiOSAssets = bundleUrl.indexOf('file:///') >= 0;
    if (isAndroidAssets) {
      nativeBase = 'file://assets/';
    }
    else if (isiOSAssets) {
      nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
    }
    else {
      var host = 'localhost:12580';
      var matches = /\/\/([^\/]+?)\//.exec(self.$getConfig().bundleUrl);
      if (matches && matches.length >= 2) {
        host = matches[1];
      }
      nativeBase = 'http://' + host + '/' + dir + '/build/';
    }
    var h5Base = './index.html?page=./' + dir + '/build/';
    //Native端
    var base = nativeBase;
    //H5端
    if (typeof window === 'object') {
      base = h5Base;
    }
    return base
}

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

页面通信有两种方式

1.通过 url 参数传递。

/**
 * 获取URL参数
 */
getUrlParam: function (key) {
    var t = this.$getConfig().bundleUrl;
    var reg = new RegExp('[?|&]' + key + '=([^&]+)');
    var match = t.match(reg);
    return match && match[1];
}

2.通过 localStorage 数据存储。

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

boxmodel & flexbox

weex支持boxmodel 和flexbox

下面这个是boxmodel

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

  • flexbox布局](http://coderyi.com/posts/react-native_first_lesson/#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用起来。