这里着重说下,怎样真真切切的做混合开发,如果你还对是否采用ionic来开发web纠结,请看我上篇文章
注:本文章适用于1.x 版本
OK,言归正传,首先混合开发,就要明白你不是用ionic完成你项目中的所有模块,比如:你的boss说咱们有四大模块,分别为:A、B、C、D,A和C模块因为各种原因需要用原生来写,那么其他B和D,你来用web来写好了;对于这种情况,就可以说你是在混合开发了。
作为混合开发,你要明白ionic到底是个什么鬼,实际他就是一个WebView(相对Android来说,在iOS那叫做UIWebView),在这个WebView中ionic会模拟原生的页面跳转,按钮点击,手势操作,不管他怎么炫,始终是 一个 WebView(相对原生来说)。那么现在的情况就是 A原生、BWebView、C原生、DWebView,你需要面临的主要问题是怎样四个模块相互切换,了解原生的可能会说,这不是很好切换吗,不就是个WebView么,但是这里你要注意,控件的生命周期问题,A切B没问题,B切A,你就要保证在切到A的时候要把B销毁,特别是B切D的时候,因为一个项目中不允许有两个ionic同时共存,所以,该kill 的不要手软。
咱们顺着思路往下走,既然刚才说了,一个项目中不能同时存在两个ionic,那就把两个模块的代码写到一个ionic中,每次打开ionic的时候让他动态选择要加载哪个模块,对ionic已经熟悉点的都知道,加载哪个模块是靠 路由 来决定的,而路由也是写死的,默认会加载.config函数中$urlRouterProvider服务的otherwise方法指定的模板
var templateName = 'login';
$urlRouterProvider.otherwise(templateName);
所以这里就要想办法去动态改变templateName的值,在这里可以通过桥接,在加载ionic的时候原生给ionic传递一个想要加载的模块名称,以iOS为例:
** 原生代码 **:
我使用的是javaScriptCore,作为原生与web之间的交互
先实现UIWebView代理<UIWebViewDelegate>
// 实现代理方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
FMGIonicBridge *bridge = [[FMGIonicBridge alloc] init];
__weak typeof(self)weakSelf = self;
bridge.message = @{ // 在这里你可以传给ionic一些参数
@"BBBB": @"bb",
@"AAAA":@"aa",
@"XXX":@"x"};
bridge.templateName = @"login"; // 这个就是我前面提到我告诉ionic我要加载哪个模块,
// ionic调用原生的侧边栏
bridge.back = ^(NSString *info) {
// 我们项目中有侧边栏,所以写个这个方法,只使用底部切换模块的,请忽略。。。
weakSelf.showSlideMenu();
};
bridge.webDidFinishedLoad = ^{ // 在这里你可以在ionic加载完成的时候做一些操作,
weakSelf.hideNavigation(YES); // 比如隐藏原生的导航条
weakSelf.view.alpha = 1; // 解决加载ionic时的白屏问题
};
context[@"myNative"] = bridge; // myNative 要跟ionic中保持统一
}
** ionic 代码 **:
// willShowTemplateName是桥接的一个方法,获取原生想要加载哪个模块
var templateName = myNative.willShowTemplateName();
$urlRouterProvider.otherwise(templateName);
app.js 配置代码
define([
'controllers/controllers',
],
function () {
'use strict';
// Ionic Starter App
// 'starter.controllers' is found in controllers.js
var app = angular.module('starter', ['ionic','ngCordova', 'starter.controllers'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider, $controllerProvider,$httpProvider,$ionicConfigProvider) {
app.registerController = $controllerProvider.register;
app.loadControllerJs = function (controllerJs) {
return function ($rootScope, $q) {
var def = $q.defer(), deps = [];
angular.isArray(controllerJs) ? (deps = controllerJs) : deps.push(controllerJs);
require(deps, function () {
$rootScope.$apply(function () {
def.resolve();
});
});
return def.promise;
};
}
//------以上部分是为了做异步加载控制器用,不采用一个.js文件将所有的js操作加载,这样可以提升加载速度-------
//$httpProvider.defaults.headers.common = {"Access-Control-Allow-Origin":"*"}
$ionicConfigProvider.backButton.previousTitleText(false);
$ionicConfigProvider.backButton.text("");
//------以上部分是为了设置导航条只是返回箭头,没有文字-------
/******* 顺便提下这里是纯ionic 开发整套app代码
//if none of the above states are matched, use this as the fallback
//var templateName = myObj.willShowTemplateName();
var originInfo = window.localStorage.getItem('userInfo');
console.log('&&&&&&'+originInfo)
if(originInfo == 'undefined' || originInfo == null ) {
console.log('登录');
var templateName = 'login';
} else { //控制跳转
console.log('现实' + window.localStorage.getItem('userInfo'));
var userInfo = window.JSON.parse(window.localStorage.getItem('userInfo'))
var templateName = 'actuality';
}
$urlRouterProvider.otherwise(templateName);
*******/
// willShowTemplateName是桥接的一个方法,获取原生想要加载哪个模块(混合开发必备)
var templateName = myNative.willShowTemplateName();
$urlRouterProvider.otherwise(templateName);
// Ionic uses AngularUI Router which uses the concept of states
$stateProvider
//*************************************** 登录注册***************************************//
// 登录
.state('login', {
url: '/login',
templateUrl: 'templates/loginAndRegister/login.html',
controller: 'loginCtrl',
resolve : {
deps: app.loadControllerJs('./controllers/loginAndRegister/login')
}
})
.state('xxxx', { // 模仿登录写就OK了
url: '/xxx',
templateUrl: 'xxx',
controller: 'xxxx',
resolve : {
deps: app.loadControllerJs('./xxxxxx')
}
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
//引入ngCordova库
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
//环境配置,也叫启动文件
<script data-main="js/require-config.js" src="lib/requirejs/require.js"> </script>
// 自定义全局变量文件
<script src="js/common.js"></script>
</head>
<body>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
require-config.js
require.config({
baseUrl:'js',
paths: {
},
deps: [
'bootstrap'
]
});
controllers.js
define(function (require) {
'use strict';
var services = require('services/services'); // 不需要自定义服务的可以忽略
var controllers = angular.module('starter.controllers', []);
return controllers;
});
bootstraps.js
define(['app'], function (app) {
'use strict';
angular.element(document.getElementsByTagName('html')[0]).ready(function(){
var width = document.documentElement.clientWidth;
// 这里可以设置字体动态化,使用rem,下面只是个例子具体怎么动态化,请观看其他文章
//document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px';
try {
angular.bootstrap(document, ['starter']);
} catch (e) {
console.error(e.stack || e.message || e);
}
});
});
先到这吧,有不清楚的请留言!祝君工作愉快!