WeexBox
一套简约高效的APP夹杂开辟处理计划
写在开首
WeexBox官方QQ群号:943913583
一提到 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…
附上一份完全功用列表
