iOS开发之纯Weex+Vuejs开发原生App整体结构和调试步骤（二）
前言上一篇文章是根据Weex官方的介绍，启动了Weex的Hello World的介绍以及一些插件的安装环境部署和Debug之前花了2周时间看了下Vue的语法和用法以及一些实战介绍，毕竟是iOS开发，还是有必要把新学的东西写下来，而且会写的非常详细，能保证从我git仓库弄下来的基础结构能跑起来并且能热更新调试这个是整体的结构，基本上搭完这个结构，你就可以开发一个简单App来玩了。OK下面就开始介绍如
前言
上一篇文章是根据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 '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的基本结构给弄出来了
下面是写完Weex几个文章的记录传送门
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)