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…附上一份完整功能列表