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就先讲这么多吧，第一次写系列文章，终于把开头三章搞定了，若是你们对个人专栏有一点点兴趣，就请点个赞哦，欢迎收藏继续关注，谢谢。