开发环境搭建
快速入门
下载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'
})
- appId是weex的实例id，可以为任何唯一的字符串或者是数字，用来表明weex实例；
- loader模块加载方式，默认为xhr，即异步的加载方式，也可以为jsonp,或者是sorce也就是直接将jsBuddle的编译码放在surce里面
- sorce：指定jsBuddle的位置
- rootId:weex的根目录id，默认为weex,即<div id="weex"></div>,也就会将生成的dom节点放在这个div里面
我们想要达到的效果是，可以输出一个页面的地址目录，然后点击每个目录可以有相应的weex页面可以显示出来，同时可以通过gulp进行批量出来，而不是需要使用weex codePath才能看到效果，而是可以通过我们自己起的服务来实现这个效果，这样就可以在我们的node项目里面一起启动了
我们使用3步来实现这个效果
- 使用gulp-weex对相应的weex文件编译成可以直接使用的jsbuddle这样在我们开发环境和生产环境就能保证文件的一致性
- 使用through2对生成的文件进行处理，取出路径和文件名，这个路径就是我们进入当前业务的加载模块的路径
- 按照上面得到的文件列表组装成相应的文件目录，得出我们最终要显示的文件列表页面
首先，我们会将我们的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' ]);
});
