weex+express+gulp开发文件搭建

开发环境搭建

快速入门

下载weex-toolkit

npm install -g weex-toolkit

编写一个简单的we文件如：

<template>
  <container>
    <text style="font-size: {{size}}">{{title}}</text>
  </container>
</template>

<script>
  module.exports = {
    data: {
      size: 48,
      title: 'Alibaba Weex Team'
    }
  }
</script>

在浏览器中调试查看使用命令

weex codePath

• 在手机中查看，需要下载weex playground这个程序，因为weex需要有一个能够解析其UI布局的容器，所以需要在安装有改解析容器的sdk，可以去weex的官网下载该playground,地址为：
  https://alibaba.github.io/weex/download.html
• 然后运行命令

weex codePath --qr

• 在playground里面扫描改二维码就可以看到效果了

在gulp中集成weex开发和部署工程

• 使用gulp-weex模块

const gulp = require('gulp');
const weex = require('gulp-weex');

gulp.task('weex', ()=>{
    return gulp.src(codePath)
        .pipe(weex({}))
        .pipe(gulp.dest(outputPath));
});

gulp-weex编译生成的jsbuddle可以在web，android和ios上直接使用，但是需要使用一些手段来进行加载该jsbuddle

• 在web上使用gulp-weex生成的jsbuddle,我们需要使用异步的方式来加载模块，一般我们直接使用weex codePath命令在浏览器上面预览的页面也是通过这种方式来进行预览的，所以我们可以借用里面的代码来直接预览我们使用gulp-weex生成的jsBuddle，首先我们直接将weex codePath生成的一些必要文件保存起来,如dist目录下的

  
  image
• 在index.html中我们需要引入dist/weex.js或者dist/weex.min.js
  ==同时我们需要对flexible进行js的处理，以免在web上面和在安卓或者ios上面出现不一致的地方==
• 最主要的是调用window.weex.init()方法，将我们的weex编译的jsbuddle进行调用

window.weex.init({
    appId: location.href,
    loader: loader,
    source: page,
    rootId: 'weex'
})

1. appId是weex的实例id，可以为任何唯一的字符串或者是数字，用来表明weex实例；
2. loader模块加载方式，默认为xhr，即异步的加载方式，也可以为jsonp,或者是sorce也就是直接将jsBuddle的编译码放在surce里面
3. sorce：指定jsBuddle的位置
4. rootId:weex的根目录id，默认为weex,即<div id="weex"></div>,也就会将生成的dom节点放在这个div里面

我们想要达到的效果是，可以输出一个页面的地址目录，然后点击每个目录可以有相应的weex页面可以显示出来，同时可以通过gulp进行批量出来，而不是需要使用weex codePath才能看到效果，而是可以通过我们自己起的服务来实现这个效果，这样就可以在我们的node项目里面一起启动了

我们使用3步来实现这个效果

1. 使用gulp-weex对相应的weex文件编译成可以直接使用的jsbuddle这样在我们开发环境和生产环境就能保证文件的一致性
2. 使用through2对生成的文件进行处理，取出路径和文件名，这个路径就是我们进入当前业务的加载模块的路径
3. 按照上面得到的文件列表组装成相应的文件目录，得出我们最终要显示的文件列表页面

首先，我们会将我们的weex文件放在一个项目目录里面，然后使用gulp对这些文件进行处理，同时取出

• 一般情况下我们会把一些打包参数的配置，放在一个json文件里面，现在创建一个配置的文件config.json

{
    "weex": {
        "views": "app/views/weex/",
        "mainHtml": "task/weexTemplate/",
        "transportJs": "app/public/weex/",
        "previewPath": "app/public/weexPreview/"
    }
}

• 编写我们的打包脚本,先将我们的.we文件编译一下

const gulp = require('gulp');
const weex = require('gulp-weex');

/**
 * 只对每个业务的入口文件进行weex的编译
 */
gulp.task('weex', function () {
    return gulp.src(config.weex.views + '**/*.we')
        .pipe(weex({}))
        .pipe(gulp.dest(config.weex.transportJs));
});

• 使用through2将we文件的标题和文件路径读取出来

const titleRegExp    = /<!--title: (.*)-->/;
const pathNameRegExp = /(.*)\.we/;
/**
 * 在浏览器上预览weex页面
 */
gulp.task('weex:ToJson', function () {
    return gulp.src(config.weex.views + '**/*.we')
        .pipe(through2.obj(function (file, encoding, callback) {
            if ( file.isNull() ) {
                return callback(null, file);
            }

            var html = file.contents.toString();

            if ( !html ) {
                return callback(null, file);
            }
            
            //取出页面标题
            var title = html.match(titleRegExp)[1];
            //取出页面地址
            var path  = file.relative;
            path      = path.match(pathNameRegExp)[1] + '.js';
            
            //页面地址放到内存数组中
            sourcemap.push({
                title: title,
                path: path
            });

            callback();
        }));
});

• 然后按照上面的数组渲染出一个首页出来，这里使用nunjucks来对模板进行编译

html:
    <h2>Weex 页面</h2>
    <!--遍历输出页面路近-->
    <ul>
        {% for item in data %}
        <li><a href="/public/weexPreview/index.html?hot-reload_controller&page={{item.path}}&loader=xhr">{{item.title}}</a></li>
        {% endfor %}
    </ul>
    
gulpJS:
gulp.task('weex:dev', ['weex', 'weex:ToJson'], function () {
    return gulp.src(config.weex.mainHtml + 'main.html')
        .pipe(nunjucks.compile({ data: sourcemap }))
        .pipe(gulp.dest(config.weex.previewPath));
});

• 可以发现我们的每一个weex页面其实都是同一个页面，只是请求的参数不一样，因为我们在这个页面上使用了异步的方式来加载所需要的weex模块代码

<div id="weex"></div>
<script src="/public/weexPreview/lib/weex.js"></script>
<script>
    (function () {
        function getUrlParam(key) {
            var reg   = new RegExp('[?|&]' + key + '=([^&]+)')
            var match = location.search.match(reg)
            return match && match[1]
        }

        var loader = 'xhr';
        var page   = '/public/weex/' + getUrlParam('page');

        window.weex.init({
            appId: location.href,
            loader: loader,
            source: page,
            rootId: 'weex'
        })
    })();
</script>

• 最后我们使用nodemon来启动一个服务同时监听weex文件的变化，当发生变化时可以及时的更新文件，同时用gulp-open来打开页面

const nodemon = require('gulp-nodemon');
const open = require('gulp-open');

gulp.task('open:weex', function () {
    return gulp.src('')
        .pipe(open({ uri: 'http://localhost:9080/public/weexPreview/main.html' }));
});

/**
 * 本地开发weex页面
 */
gulp.task('dev:weex', [ 'weex:dev', 'copy:weex' ], function () {
    nodemon({
        script: 'index.js',
        ext: 'js html',
        ignore: [
            '../'
        ],
        env: { NODE_ENV: 'development', PORT: 9080 }
    }).on('start', [ 'open:weex', 'watch:weex' ]);
});