前言
上一篇文章是根据Weex官方的介绍，启动了Weex的Hello World的介绍以及一些插件的安装
之前花了2周时间看了下Vue的语法和用法以及一些实战介绍，毕竟是iOS开发，还是有必要把新学的东西写下来，而且会写的非常详细，能保证从我git仓库弄下来的基础结构能跑起来并且能热更新调试
OK下面就开始介绍如何来配置启动
步骤一（Git clone或者Download到本地）
这里会涉及到一些Weex安装的插件和一些简单的webpack知识，也就是看得懂就好了，不明白的可以看顶部第一个文章里面去安装创建一个Hello world结构就基本明白了
随你放到哪里，然后打开终端，cd到文件根目录，我这里是在桌面建了个文件夹解压放进去
mintoudeMacBook-Pro:~ mintou$ cd /Users/mintou/Desktop/测试Git部署 mintoudeMacBook-Pro:测试Git部署 mintou$ ls -a . .DS_Store .. WeexRouterDemo-master mintoudeMacBook-Pro:测试Git部署 mintou$ pwd /Users/mintou/Desktop/测试Git部署 mintoudeMacBook-Pro:测试Git部署 mintou$ cd WeexRouterDemo-master/ mintoudeMacBook-Pro:WeexRouterDemo-master mintou$ ls -a . .gitignore newDemo .. README.md .DS_Store animation终极.gif mintoudeMacBook-Pro:WeexRouterDemo-master mintou$ cd newDemo/
然后直接 npm install 把包里面的依赖安装好，目录里面会多一个node_modules，安装的依赖来自于package.json里面的依赖，依赖很多，等几分钟安装好即可
这个时候 执行 npm start 会启动一个本地服务，你就能看到Web上展示出来的东西了，但是这个不是我们想要的，我不喜欢这种调试模式，而且很多连官方的Demo都会报错，所以我还是倾向于App来调试，Web只是辅助的，看看就好了，继续下一步
步骤二（打包成iOS）
weex platform add ios执行这个，安装iOS平台，但是有时候会出现
10:27:07 : Current working directory is not a weex project.
如果出现这个，直接执行
weex run ios目录下面会出现打包好的jsbundle文件，然后你在执行weex platform add iosweex run ios如果一切正常，就会让你选择模拟器，选择下iPhoneX运行
这个Xcode目录结构是weex帮我们创建的，因此，静态资源文件和调试窗口都还没有配置，你看到的首页没有启动图片，只是白白的一个，但是基本结构还是有了。
步骤三（配置本地资源文件和WxDevTool调试工具）
放在上面那个resource目录下面
const webIconFontPath = 'static/font/iconfont.ttf'; const androidIconFontPath = 'local:///font/iconfont.ttf'; const iosIconFontPath = 'local:///font/iconfont.ttf'; export function getIonFontPath(abs) { if (WXEnvironment.platform === 'Web') { return abs + webIconFontPath } else if (WXEnvironment.platform.toLowerCase() === 'android') { return androidIconFontPath } else { return iosIconFontPath } } export function addIconFontSupport(dom, abs) { if(dom) { dom.addRule('fontFace', { 'fontFamily': "wxcIconFont", 'src': `url('${getIonFontPath(abs)}')` }); } } export function getImagePath(name, type = '', abs = '../../') { if (WXEnvironment.platform === 'Web') { return `${abs}static/img/${name}${type}` } else if (WXEnvironment.platform === 'android') { return `local:///${name}`; } else { return `local:///${name}${type}`; } }
js直接用下面的路径操作就可以读取到本地的文件
上面其实已经启动App服务了，只是App的调试如何在Web上面如何进行，这里就需要用到weex-toolkit了
这里没有像Weex二维码扫描一样配置，而是直接根据自己生成的debug地址进行调试，操作步骤如下
1.cd到platform->iOS目录下面，找到Podfile文件，里面按这个配置，直接copy过去，然后执行pod install
source 'git@github.com/CocoaPods/Specs.git' platform :ios, '8.0' #inhibit_all_warnings! def common pod 'WeexSDK' pod 'WeexPluginLoader' pod 'SDWebImage', '3.7.5' pod 'SocketRocket', '0.4.2' pod 'WXDevtool', '0.15.3', :configurations => ['Debug'] end target 'WeexDemo' do common end target 'WeexUITestDemo' do common end
安装之后，打开Xcode文件，然后在AppDelegate里面引入头文件
#import <TBWXDevTool/WXDevTool.h>- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.backgroundColor = [UIColor whiteColor]; [WXDevTool setDebug:YES]; [WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.1.47:8089/debugProxy/native/ee10e3b6-df8c-4fc9-8c84-628bbb2064e6"]; [WeexSDKManager setup]; [self.window makeKeyAndVisible]; // Override point for customization after application launch. [self startSplashScreen]; return YES; }
最后在App这个启动的方法里面加入WXDevTool的配置 注意别复制我的，launchDevToolDebugWithUrl 这个方法的后面参数是自己配置的，下面介绍
Debug Url 是哪里来的？
打开新的终端，cd到目录下面，然后执行weex debug 会出现一个页面，我的做法是点击页面的二维码，然后会进入一个新的调试页面。首先看终端，找到对应的host
然后native后面的路径就是weex debug打开的网页里面的参数
把终端的host路径和这个Id拼起来，才是上面WXDevTool的Url参数，如果你错了一个，例如端口不对或者id没有配对，你启动的App是看不到任何东西的
OK，这个时候基本都配置完了，你通过Weex run ios启动App，能同时看到Web和App的更新，你如果用代码编辑器保存js文件，Web和App是会实时更新对应的更改的，如果有错误，Web也能看到如下类似的报错
步骤四（目录结构和多路由配置）
├―― README.md // 项目说明 ├―― configs // 打包编译配置文件 │ ├―― config.js │ ├―― helper.js │ ├―― logo.png │ ├―― plugin.js │ ├―― utils.js // 构建工具相关 │ ├―― vue-loader.conf.js │ ├―― webpack.common.conf.js // webpack公共环境数据 │ ├―― webpack.dev.conf.js // webpack开发环境 │ ├―― webpack.prod.conf.js // webpack生产环境 │ └―― webpack.release.conf.js ├―― dist // 编译打包出来的文件目录，打包出几个js文件安居上面的webpack设置 │ ├―― FourthPage.js │ ├―― index.js │ ├―― index.web.js │ └―― vendor.web.js ├―― node_modules // npn install 安装的依赖，根据package.json的内容安装插件 ├―― package.json // 依赖json以及一些命令的介绍 ├―― platforms // 编译出来的平台 │ ├―― ios │ └―― platforms.json ├―― plugins │ └―― plugins.json ├―― src // 源码工作目录 │ ├―― components // vue组件目录 ├―― FirstPage.vue // tabbar页面1 │ │ ├―― FourthPage.vue // 二级Navigator跳转页面 │ │ ├―― LoginPage.vue // 登陆页面 │ │ ├―― MainTabPage.vue // 主页面tabbar │ │ ├―― SecondPage.vue // tabbar页面2 │ │ ├―― ThirdPage.vue // tabbar页面3 │ │ └―― WelcomePage.vue // 进入的引导页面 │ ├―― config // vue配置文件目录 │ ├―― entry // webpack打包成多个js目录 │ ├―― entry.js // 程序入口js文件 加载各种组件 │ ├―― index.vue // 入口页面文件 │ ├―― mixins // 混入目录，类似iOS的Category全局注入方法 │ └―― router.js // 路由跳转相关文件 ├―― static // 静态资源 web目录 iOS需要自行拖进去bundle目录下面 │ ├―― font │ └―― img ├―― web │ ├―― assets │ ├―― index.html // 唯一入口页面 │ └―― preview.html └―― webpack.config.js
根据上面的Demo，我们用到了router看下结构
/* global Vue */ import Router from 'vue-router' import WelcomePage from '@/components/WelcomePage' import LoginPage from '@/components/LoginPage' import MainTabPage from '@/components/MainTabPage' Vue.use(Router) module.exports = new Router({ routes: [{ path: '/', name: 'WelcomePage', component: WelcomePage }, { path: '/login', name: 'LoginPage', component: LoginPage }, { path: '/main', name: 'MainTabPage', component: MainTabPage }, ] })
分别是启动引导页面，登陆页面和主页面Tabbar（页面1 页面2 页面3），还有个页面不是router里面的就是页面4
正常情况下，默认打包，router只会在dist目录下打包出一个js文件，也就是index.js，所有的跳转都是Router的切换，这样如果你用Weex做一个纯粹的RouterApp，那体验就和H5一模一样了，点进去几层，就要像网页一样一层层返回。这里就涉及到了Weex给出的Navigator模块，如果要想原生一样跳转，就需要单独打包生成对应的js文件，也就是我们上面看到的dist文件夹下面多出来一个FourthPage.js文件，先看下如何进行Navigator跳转。
/* this.jumpWithParams("RepositoryDetailPage", { userName: 'DeftMKJ', reposName: 'TaoBaoShoppingCart', web index.js:37154 http://192.168.1.47:8080/index.js weex.config.bundleUrl; index.js:37167 web index.js:37175 http://192.168.1.47:8080/ index.js:37191 111http://192.168.1.47:8080/ index.js:37192 222 index.js:37193 333http://192.168.1.47:8080/SearchPage.js http://192.168.1.47:8080/RepositoryDetailPage.js?userName=DeftMKJ&reposName=MKJWechat&title=MKJWechat */ jumpWithParams(to, params) { if(WXEnvironment.platform === 'Web') { if (this.$router) { this.$router.push({name: to, params: params}) } } else { let path = this.getBaseUrl(); let q = this.createQuery(params) this.getNavigator().push({ url: path + to + '.js' + q, animated: "true" }, event => { }) } },
WeexSDK那里应该会默认生成一个页面进行js的管理，单纯嵌入SDK的操作下一篇再记录一下，这里先将纯Weex如何搭建。
那么如何打包出多个js页面？
首先你可以在src目录下面弄一个目录，名字随便，这里是entry，然后你把原本entry.js下的代码复制过来，然后替换成需要打包js的vue组件名称，详情可以看entry目录下的文件
最后在webpack打包目录下新增需要打包的js文件
设置完之后，执行 weex run ios就会打包出多个js文件供我们跳转用。
基本上按上面的做完，就可以愉快的写代码了，按Weex官方的介绍，写几个Vue模板代码，也就是写Controller，然后怼到导航控制器里面去就搞定了。
看了两周多一点的Weex，基本把Vue的知识和JS的知识都过了一遍，写个简单的应该问题不大，这里主要参考的是下面祝各位大神写的Demo 传送门，这位大哥写的其实是用起来的时候需要注意的以及遇到的坑，Demo也非常详细，但没有详细分析一些如何配置入门以及调试，毕竟万事开头难，配置好了，写UI模板代码应该就清晰很多，不然自己按Weex官网写，如果不去看下结构和配置，都不知道为什么那么写。网上很多文章都是站在很高的高度去谈，反正看完完全不知道怎么着手写，而且Bug一大堆，跟着Demo撸了一遍，然后整理了以下我自己的思路，就把这个WeexDemo的基本结构给弄出来了