乐趣区

【开源】合摩 WeexBox 正式发布

WeexBox
一套简洁高效的 APP 混合开发解决方案
写在开头
一提到 Weex,相信下面已经有一群小伙伴在哀嚎了,是的,大多数开发者对 Weex 的感情是既爱又恨的。Weex 是优秀的跨平台框架,「Write Once, Run Everywhere」,但坑也多的不要不要的,特别对于刚开始尝试 Weex 开发的团队来说,各种坑和不友好把许多人劝退了。
首先聊聊我们为什么选择 weex,在我们做技术选型时,综合考虑了目前市面上比较流行的 RN、Weex,最终我们选择了 Weex。在决定使用哪种技术前,我们也在不断的问自己,为什么,为什么,为什么?在综合考虑各种因素后,我们技术团队决定使用 weex。
决定使用哪种技术,主要看其优缺点:其优点来验证,是否符合我们的业务场景;其缺点来判断,是否限制我们的业务场景,是否有方案避开这种限制。
使用 weex 的优点:

Weex 使用同一套代码来构建 Android、iOS 和 Web 应用。
Weex 能用 Vue 的前端框架,贴近我们的技术栈
Weex 比 RN 更轻量,体积小巧,可以分包,每个页面一个实例,性能更好
学习成本低,上手快
有良好的扩展性,比较好扩展新的 Component 和 Module

同时,它也因资料少,社区活跃度不够,相对的坑较多,被大家一直诟病。我们收集了大家在开发中遇见的问题,针对这些问题,我们开发了 WeexBox 框架,并致力于:

扩展 weex 的能力
把最佳实践带入进来,提供大前端正确拥抱的姿势
开发一些实用工具,带来更棒的开发体验
填掉 weex 的坑

最终,开发者能够专注写 bug 了~~~
WeexBox 的特色

零配置,开箱即用的项目,自带最佳实践
无需安装 weex-toolkit(有多少汪在这一步安装不上、运行报错的。来,举个爪)
比 weex-debugger、weex-builder 更快的构建速度
支持 sass、es6、file-loader、uglify、eslint 等
可通过审核的热更新,静默模式和强制模式随意切换
N 多实用的 Module 扩展

合摩大前端团队实现了 app 开发从 0 到 1,9 天上线的壮举!可见 WeexBox 能够带来开发效率的巨大提升。
快速上手
@weexbox/cli 帮助你快速初始化工程项目。
# 安装
cnpm i -g @weexbox/cli

# 新建一个 weex 工程
weexbox create projectName

# 进入工程
cd projectName

# 安装依赖
cnpm i

# 随后,可以愉快的写 bug 了 …

项目结构
.
├── config // 配置文件夹
│ ├── update-config.json // 热更新的配置文件
│ └── weexbox-config.js // 图片资源的配置文件
├── deploy // 输出文件夹
├── platforms // 原生文件夹
│ ├── android // Android 工程
│ └── ios // iOS 工程
├── src // vue 源码文件夹
│ └── module // 模块文件夹
│ ── page // 页面文件夹
│ ├── App.vue // vue 源码
│ └── index.js // 入口文件
├── static // 图片资源文件夹
└── package.json // 配置文件

安装依赖后,项目的结构如上,同时也搭建了 app 的基础架构;在工程 platforms 文件夹中,会看到两个文件夹 android、ios,Android 端使用 Android Studio 开发工具,导入 platforms/android 文件夹,构建打包生成项目的 apk;iOS 端使用 Xcode 开发工具,导入 platforms/ios 文件夹,构建打包生成项目的 ipa;随后,在 src 下建立业务模块,就可以愉快的开发了~
这时你可能又有疑问了?本地书写的代码,如何能及时的展示在 app 界面上呢,不可能要每次打包吧,这样的话,也太 LOW 了!对的,不需要,这时你需要进入 Debug 调试 中了。
Debug 调试
Tips: 确保电脑与手机处于同一网段.
1、调试打包在真机上的代码
npm run debug

打开 app 的调试扫码工具, 扫二维码使 pc 与移动终端建立连接

2、调试正在开发的页面
npm run debug [vue/weex 页面的路径]

打开 app 的调试扫码工具, 扫二维码使 pc 与移动终端建立连接
更多详细的 debug 步骤请查看,WeexBox 开发指南中的 Debug 调试
WeexBox 也提供了很多常见的模块。
如何使用呢?
1、丰富的 modal 模块
modal 模块,除了常见的:alert、confirm 外,还延伸了一些更频繁使用的 api,eg:actionSheet(操作表弹框)、showLoading(显示菊花)等,更加常态化、大众化以及多元化。
# 引用
const modal = weex.requireModule(‘wb-modal’)

# 警告弹框
modal.alert({
title: ‘ 标题 ’,
message: ‘ 弹窗内容 ’,
okTitle: ‘ 确定 ’
}, (result) => {

})
// callback 参数
result: {
status: 0
}
效果图:

# 引用
const modal = weex.requireModule(‘wb-modal’)

# 操作表弹窗,配合 wb-external 可调取摄像头及相册
modal.actionSheet({
title: ‘ 标题 ’,
message: ‘ 弹窗内容 ’,
actions: [{
// 按钮类型 ’danger’, ‘cancel’, ‘normal’。默认 normal
type: ‘danger’,
// 按钮的标题
title: ‘ 删除 ’
}]
}, (result) => {

})

// callback 参数
result: {
// 取消按钮 -1,其他 0
status: 0,
data: {
// 按钮的索引
index: 0
}
}

效果图:

等等功能,更多常见的 modal api,详情请查看 传送门
2、打开外部功能 Module
# 引用
const external = weex.requireModule(‘wb-external’)

# 调用摄像头拍照,实现图片裁剪上传
external.openCamera({
// 能否剪裁
enableCrop: true,
// 是否矩形剪裁,true 为圆形剪裁
isCircle: true,
// 宽度
width: 100,
// 高度
height:100
}, (result) => {

})

// callback 参数
result: {
status: 0,
error: ”,
data: {
// 图片的存储路径
url: ‘/docment/123.png’
}
}
等等功能,更多常见的 external api,详情请查看 传送门
写在最后
目前 weex 官方也在不断的更新,虽然有各种 bug 被人诟病,但是,哪个优秀的技术发展没有经历这样的过程呢,“不经一番寒彻骨,怎得梅花扑鼻香”,技术本身就没有对错,只有我们调整好自己的心态,挖掘底层事物,垫好自己的基石,让技术更好的为业务服务。
项目团队通过大量的业务实践和积累以后,总结归纳出这套基于 weex 的技术方案 WeexBox 并开源,解决大家在使用 weex 所遇见的各种坑,同时对官方的 Module 进行拓展、延伸,提供了更加丰富的模块,解决实际业务场景中的问题。目前团队使用 WeexBox 已研发了好几款 APP,它能满足及支撑我们上百个页面的业务场景,让我们的开发效率大大提升,使我们的技术栈更加完善。
在使用中有任何问题,欢迎给我们 issue,有任何想法也欢迎 PR。
最后希望我们的方案能帮助开发中的你。
官网地址:https://aygtech.github.io/wee…
github:https://github.com/aygtech/ay…
附上一份完整功能列表

退出移动版