ionic开发笔记——开始
发布于 8 年前 作者 skymovinggit 5591 次浏览 来自 分享

15年5月份开始接触ionic，到现在为止，公司的所有产品全部采用ionic来完成，这期间，遇到了各种各样的问题，也踩了不少的坑。

现在回过头来，想想当初选择ionic的决定还算是比较明智的。

ionic提供了一套很好的APP开发解决方案，如果你的运用不需要对手机硬件有过多的操作和交互，我觉得你完全可以用她来开发你的APP，她的流畅度（IOS）在15年以后已经可以和原生OC相媲美，安卓也能适配90%以上的机型。

在接触ionic之前，接触了大概半年多的angular，所以在真正使用ionic开发的时候，还算顺利。

我当初选择ionic最重要的一点就是看中H5架构手机应用发布更新更加灵活，只要bowers客户端顺利发布一次以后，后续的不涉及到本地硬件调用或者交互都可以不再更新客户端版本，这样就可以灵活的修改页面和bugfix。当然原生也能实现这样的架构，但是代价会比采用ionic高很多，因为ionic本质就是一个站点而已；

说起发布灵活，最开始的时候还遇到了点小麻烦，不过后来顺利解决了。

我们知道ionic的基本架构是用H5来做原生的页面交互，基础来自phonegap现在改名为cordova；按照官方的文档，是需要把静态HTML资源一起打包到APP中的，我们的第一款产品提交AppStore审核的时候，我就讨巧，打包的index.html里面除了ionic的基础组件打包进去，其它业务逻辑全部引用服务器资源，结果提交审核2天后，发现我服务端逻辑代码和template文件修改后，客户端却看不到任何变化。

这个时候心情真的是七上八下，因为不知道苹果会在什么时候审核，如果他们看到这样的一个客户端，那一定是被拒绝的。

因为这个问题，反反复复来回看ionic的文档，然后修改尝试。最关键的是，我想要不修改客户端打包文件的前提下解决这个问题，否则就算苹果不打回来，我们也得自己重新打包上传~~~

经过一天的反复测试，我找到了问题的所在，ionic采用的路由是angular-ui-router，配置文件里面，对模板文件的引用是这样写的

$stateProvider 
	// setup an abstract state for the tabs directive
	.state('tab', {
		url: "/tab",
		abstract: true,
		templateUrl: "templates/tabs.html"
	})
	.state('tab.dash', {
		url: '/dash',
			views: {
				'tab-dash': {
					templateUrl: 'templates/tab-dash.html',
					controller: 'DashCtrl'
				}
			}
	})

这里引用的模板永远都是index.html的相对目录下的模板，也就是说，引用的是打包到客户端中的模板。需要解决这个问题，得修改模板引用路径，找到了问题，那么解决起来就比较方便了，我们都知道ionic是基于angular的，而angular中有一个模块是 $templateCache ，同时我们需要做的就是用模板引用的另外一种方式，采用templateProvider。

最后，我将上面的代码改成了

$stateProvider
	// setup an abstract state for the tabs directive
	.state('tab', {
		url: "/tab",
		abstract: true,
		//templateUrl: "templates/tabs.html"
		templateProvider: ['$templateCache', function ($templateCache) {
			return $templateCache.get('tabs.html');
		}],
	})
	.state('tab.dash', {
		url: '/dash',
		views: {
			'tab-dash': {
				//templateUrl: 'templates/tab-dash.html',
				templateProvider: ['$templateCache', function ($templateCache) {
					return $templateCache.get('tab-dash.html');
				}],
				controller: 'DashCtrl'
			}
		}
	})

接下来需要将template下的html文件打包成angular的模板文件js，用gulp-ng-template快速搞定！

到此，忐忑的心总算放下了，过了几天，我们的应用就顺利审核通过，产品开发到上线历时45天。后来我们其他产品就顺利了很多，庆幸选择ionic没让我失望。

! 很久没有写过开发笔记了，各位看官不要笑话小弟，如果有任何不对之处，还请大侠们指正

回到顶部