圈子金融的weex领悟 - weex-start
来源:互联网 发布:进销存数据库设计 编辑:程序博客网 时间:2024/05/01 08:25
圈子金融是中国首家竞标式社交金融,以福建民间标会为原型。在各大应用市场均可下载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文件。
- 圈子金融的weex领悟 - weex-start
- 圈子金融的weex领悟 -自定义button组件
- Weex
- weex
- WEEX
- weex
- weex的环境搭建
- Android weex的使用
- RN & Weex 的比较
- Weex的坑点
- Weex工具链的奥秘
- weex和Android的交互
- weex的使用初体验
- weex(1):weexpack 的使用
- Weex 的 iPhone X 适配
- Weex的JS缓存实现
- 阿里巴巴开源框架Weex学习之 weex pack与weex toolkit的区别
- Weex尝鲜
- test_1059_投篮比赛
- NDK Java 调用 C代码
- 【HDFS】hadoop2.x HDFS javaAPI
- Android 自定义加载框
- OC当中的深拷贝和浅拷贝
- 圈子金融的weex领悟 - weex-start
- Analysis of 【Dropout】
- java虚拟机
- 【mapreduce】hadoop2.x—mapreduce实战和总结
- Java高并发,如何解决,什么方式解决
- 使用swoole实现生产者消费者模型(2)
- poj1751
- Android ADB命令的使用
- HDU1010 Tempter of the Bone (DFS & 奇偶剪枝)