【开源】合摩 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、es六、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: 确保电脑与手机处于同一网段.

一、调试打包在真机上的代码

npm run debug
复制代码

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

二、调试正在开发的页面

npm run debug [vue/weex页面的路径]

复制代码

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

更多详细的 debug 步骤请查看，WeexBox 开发指南中的 Debug 调试

WeexBox 也提供了不少常见的模块。

如何使用呢？

一、丰富的 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，详情请查看 传送门

二、 打开外部功能 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。

最后但愿咱们的方案能帮助开发中的你。

官网地址：aygtech.github.io/weexbox/

github： github.com/aygtech/ayg…

附上一份完整功能列表