weex开发app全记录：搭建开发环境（一）

前段时间使用weex开发了一款app。这里记录了开发的过程，重点是遇到的坑。首先声明，笔者是前端，对android和ios一无所知，也没有参与过app相关的开发，在app开发方面纯属小白，所以开发时对app操作中一些基础问题也没有考虑到，走了很多弯路。这里还是建议如果想要开发app，最好还是先了解一些app的基础规则，比如Android的物理返回键，页面跳转规则，常规的手势操作等。如果在文中哪些地方有错漏，也希望大家指出来，谢谢！

笔者之所以选择用weex，一是因为对vue更熟，二是在同一套系统中，其他端的开发，也是使用的vue，所以决定用vue方向的框架。如果有精通react的前端，也可以考虑用React Native，毕竟React的生态更好。

首先，搭建开发环境。

node，npm这些基本上是现在前端开发的必备神器了，不需要多说。直接说关于weex的吧。

我用的是weexpack，当然官方提到的是weex-toolkit。后边会说这两个的区别。

1､全局安装weexpack

npm install -g weexpack

2､生成weex项目

weexpack create project-name

3､进入项目，安装依赖

cd project-name
npm install

4､安装android和ios应用模板，如果只在html5平台上运行，可以不安装

weexpack platform add android
weexpack platform add ios

执行后会在platforms文件夹下生成android和ios的文件目录。

5､开发时，在模拟器运行项目

weexpack run android
weexpack run ios

6､打包生成.apk文件

weexpack build android
weexpack build ios

7､web开发及打包

weexpack run web
weexpack build web

 

备注：weex-toolkit和weexpack的区别

weex-toolkit 是针对开发单个weex页面设计的。项目build打包生成的是JS Bundle文件，可以自由部署。主要目的是开发部分页面集成到已有的原生应用中。

weexpack 是初始化一个完整的App工程。最终产出的是一个Android App 或者 iOS App，是.apk文件，经过签名后，可以直接发布的。