前言

上一篇文章是根据Weex官方的介绍,启动了Weex的Hello World的介绍以及一些插件的安装

环境部署和Debug

之前花了2周时间看了下Vue的语法和用法以及一些实战介绍,毕竟是iOS开发,还是有必要把新学的东西写下来,而且会写的非常详细,能保证从我git仓库弄下来的基础结构能跑起来并且能热更新调试

Demo已经写好了,Github上按照下面的步骤弄下来运行,看下App源码也行,或者看下Vue源码也行,如果老司机,直接自己clone下来即可,如果刚入门,可以按照下面的步骤操作一下,就能把一个简单的用Vuejs写的App基本结构框架给弄明白而且跑起来了点击打开链接


这个是整体的结构,基本上搭完这个结构,你就可以开发一个简单App来玩了。


OK下面就开始介绍如何来配置启动



步骤一(Git clone或者Download到本地)

Git仓库地址

这里会涉及到一些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调试工具)

首先资源都在目录下面的static文件夹下面,里面有图片和字体

放在上面那个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官方介绍

这里没有像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的基本结构给弄出来了

结构Demo传送门

完整Demo传送门


下面是写完Weex几个文章的记录传送门

Weex环境部署和调试(一)

Weex嵌入已有应用实践(三)



Logo

前往低代码交流专区

更多推荐