Weex系列(1) ——Hello World项目

目录

• Weex系列(序) —— 总要知道原生的一点东东(iOS)
• Weex系列(序) —— 总要知道原生的一点东东(Android)
• Weex系列(1) —— Hello World项目
• Weex系列(2) —— 页面跳转和通信
• Weex系列(3) —— 单页面还是多页面
• [Weex系列(4) —— 老生常谈的三端统一]
• [Weex系列(5) —— 封装原生组件和模块]
• [Weex系列(6) —— css相关小结]
• [Weex系列(7) —— web组件和webview]
• [Weex系列(8) —— 是时候简析一下流程原理了]
• [Weex系列(9) —— 踩坑填坑的集锦]
• [Weex系列(10) —— 先这么多吧想到再写。。。]

由于最开始没有一点点原生开发的经验，所以我就直接用的脚手架初始化项目。那下面我们就从最最原始的Hello World项目开始吧，序篇太枯燥，自由发挥时间开始啦。

weex-toolkit

1. 执行如下代码，最后会得到如图的项目结构。
2. 有的同学会继续用官网的weex run ios或者android开始运行项目，大多数人应该都运行不起来，我就是这大多数人，我是直接用原生工具运行对应App的，如iOS，直接用xcode打开WeexDemo.xcworkspace这个文件。(这里还有一个点，如下代码最后需要pod install下，安装weex sdk等包)
3. 接下来就可以愉快的开发代码了，调试就该登场了，那就下一个点吧。

npm install -g weex-toolkit
weex create helloworld
cd helloworld
weex platform add ios
weex platform add android

cd platforms/ios
pod install

Weex Playground

接上面最后一个点，输入如下代码，就会看到浏览器自动打开一个网址，然后下载标题上的这个App扫描二维码就可以进行调试了

weex debug src/index.vue

bundlejs

1. 第一个命令就是把src目录下我们写的代码打包到dist目录下，会对应生成xxx.js和xxx.web.js，xxx.js是原生所要用到的js，xxx.web.js是给web端用的，这就是三端统一的第一步。
2. 后面两个命令其实就是打包同时把打包后的代码放到截图对应的原生目录下，这两个命令比较慢，我通常都是用终端的复制文件夹的功能直接复制代码到对应目录下。

weex build web
weex build ios
weex build android

bundlejs的路径问题

还是把这个单独拿出来讲一下吧，网上有好多版本的一统三端的js路径等，其实总结起来就是：
iOS：能拿到weex.config.bundleUrl(我这边是file:///var/containers/Bundle/Application/4D5A8D6F-2824-4603-936B-B77418600858/WeexDemo.app/bundlejs/index.js)能取到上面截图bundlejs目录地址，再做相对处理即可。
Android：weex.config.bundleUrl拿到的地址形式不统一，最后就是写死的file://assets/dist
web：weex run web的时候浏览器会自动打开一个地址，可以研究这个地址再做一下调整。
后续章节可以把这个方法提供给大家参考。

iOS入口文件等简析

1. AppDelegate.m执行了初始化weex环境的方法，这个方法里面还可以注册我们封装的模块和组件，weex脚手架初始化的项目还提供了启动页的方法，我们可以稍作修改换成我们自己的动画。
2. WeexSDKManager就是官网上的初始化weex环境的步骤。
3. WXDemoViewController加载了我们上面提到的打包后的js。

[WXSDKEngine registerModule:@"xxx" withClass:[xxx class]];
[WXSDKEngine registerComponent:@"xxx" withClass:[xxx class]];

Android入口文件等简析

1. WXApplication进行了初始化。
2. AbsWeexActivity封装了渲染加载js的方法，在WXPageActivity可以看到有调用createWeexInstance和renderPageByURL得方法。

Hello World就先讲这么多吧，第一次写系列文章，终于把开头三章搞定了，如果大家对我的专栏有一点点兴趣，就请点个赞哦，欢迎收藏继续关注，谢谢。