前言
上一篇文章是根据Weex官方的介绍，启动了Weex的Hello World的介绍以及一些插件的安装
之前花了2周时间看了下Vue的语法和用法以及一些实战介绍，毕竟是iOS开发，还是有必要把新学的东西写下来，而且会写的非常详细，能保证从我git仓库弄下来的基础结构能跑起来并且能热更新调试
Demo已经写好了，Github上按照下面的步骤弄下来运行，看下App源码也行，或者看下Vue源码也行，如果老司机，直接自己clone下来即可，如果刚入门，可以按照下面的步骤操作一下，就能把一个简单的用Vuejs写的App基本结构框架给弄明白而且跑起来了点击打开链接
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 ios
weex 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 '[email protected]/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的基本结构给弄出来了
下面是写完Weex几个文章的记录传送门