圈子金融的weex领悟 - weex-start

圈子金融是中国首家竞标式社交金融，以福建民间标会为原型。在各大应用市场均可下载app。
刚开始我们只是3个人的小团队，在当时的情况下，综合分析了几种app方案，采用了dcloud的混合h5方案，用hbuilder开发，mui框架，虽说三端可以一致，但过程也是十分苦逼，被各种兼容问题搞的心力憔悴，特别是在iphone上。

说说weex吧，是个好东西，但上手难，如此没有原生基础，建议还是别玩，因为很它只提供了页面渲染和扩展的能力，大部分模块还是要用原生扩展来实现，比如硬件交互。

好，开始吧！

首先是node.js，我也是初次使用，以前前端还是jquery为王，一直不明白要node.js干嘛，现在终于有领悟。没基础的自己去补充。

node.js装完后自带有管理包npm，我们装其它组件就通过npm install命令，无奈这些软件仓库是在国外，安装起来非常慢，这里建议使用淘宝镜像，完后使用cnpm来替代npm。

接下来就是安装webpack和weex-loader，webpack是比较出名的打包工具了，能装依赖的东西打包在一个文件，weex-loader是weex用webpack的打包插件（可以这么理解）

cnpm install -g webpack weex-loader 安装到全局

接然后再安装个weex的工具箱weex-toolkit，这里面包括运行环境，调试等命令，最好装全局。

cnpm install -g weex-toolkit

完成上面，整个weex环境算是搭建起来了，接下来我们需要创建个工程，执行

cnpm init -y
按提示，一路确定下去，好了之后会生成package.json

创建打包配置文件：webpack.config.js，复制如下内容

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

var entry = {};

function walk(dir) {
  dir = dir || '.'
  var directory = path.join(__dirname, 'weex_qqzi_src', 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( dir, path.basename(file, extname));
        entry[name] = fullpath + '?entry=true';
      } else if (stat.isDirectory() && file !== 'dist' && file !== 'include') {
        var subdir = path.join(dir, file);
        walk(subdir);
      }
    });
}

walk();


module.exports={
    entry:entry,
    output:{
        path:'./weex_dist',
        filename:'[name].js'
    },
    module: {
    loaders: [{
      // 匹配包含了 entry 参数的 .vue 文件路径
      test: /\.we(\?[^?]+)?$/,
      loaders: ['weex-loader']
    }]
  }
}

以上的意思就是将weex_qqzi_src下面的we文件，生成到weex_dist，当然也可以修改为其它名字，比如src目录生成到dist

创建个we文件测试一下，比如hello.we

<Template>
    <div>
        <Text>hello</Text>
    </div>
</Template>

运行npm run dev，如果有错误看下是哪个组件没装，安装一下就好，比如weex-components。运行后在weex_dist目录下面会生成hello.js，如果还是有一堆红的，比如babel-XXX的，试试再装weex-toolkit装本地（这里我也没弄明白，为什么全局的会不行）
cnpm install weex-toolkit weex-loader

用浏览器看下效果
npm run serve
如果报错，需要安装一下serve和weex-html5
cnpm install -g serve

copy node_modules/weex-html5/index.html到工作目录下，修改里面的weex.js引用路径和page的值（入口文件，默认是’demo/build/index.js’，修改为weex_dist/hello.js）

这时候会在8080端口监听，需要手动打开浏览器查看

也可以直接修改地址栏的xx.js为其它we生成的js文件。