最近工作一直在搭建weex的项目架构,对于Weex开发需要理解很多概念并且需要强大的内心,因为还没有比较成熟,所以坑比较多。但是公司团队需要开发,所以在此记录一些东西。
首先,我们得理解四种环境:
- iOS 环境
- Android 环境
- Web 环境
- WebView 环境
这几种环境当然可以根据字面意思来理解,所以,我们在搭建所谓三端一致的环境的时候,我们需要区分这四种环境。
然后,利用Weex中搭建的脚手架框架weexpack构建的项目,大致的架构如下:
WeexProject
├── README.md
├── android.config.json
├── config.xml
├── hooks
│ └── README.md
├── ios.config.json
├── package.json
├── platforms // 平台模版目录
├── plugins // 插件下载目录
│ └── README.md
├── src // 业务代码(we文件)目录
│ └── index.we
├── start
├── start.bat
├── tools
│ └── webpack.config.plugin.js
├── web
│ ├── index.html
│ ├── index.js
│ └── js
│ └── init.js
└── webpack.config.js
此架子大概帮我们已经搭建好了一个基本的开发思路,但是,我们可以看出webpack的架子并没有搭建比较完全,weexpack只是帮我们简单的实现了打包与web端渲染。所以,我们需要自己根据的需求,让其变得更加饱满一点。
另外,关于weexpack 的调试问题困惑了作者很久,经查询记录于此:
1.在浏览器地址栏输入:chrome://inspect/#devices
2.点击如下:
3.在webpack的配置文件中加一个debugger
4.在你的package.json中添加一个新的script, run 即可。比如:
"debug": "node --inspect --debug-brk node_modules/.bin/webpack --config webpack/webpack.config.js"
另外,weex 写UI是不兼容Web大多数标签,需要使用它自己封装的标签,而且与vue不同的是,他打包的文件是通过每个页面动态的打包,所以跳转不是vue-router简单的跳转,而是通过其封装的navigator进行页面之间的跳转的。