圈子金融是中国首家竞标式社交金融,以福建民间标会为原型。在各大应用市场均可下载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文件。