做一个恐怖、灵异的资讯类APP

大家先看下PC网站的样子(请用webkit浏览器访问)

http://115.28.42.207/jj/index

功能包括

用户注册、登录、发帖、评论

1. 网站已经有的内容是自己写脚本爬下来的

2. 前端用的ionic,配合angular,写代码很少,不愧是mobile web开发利器

3. 服务端用的nginx + vert.x,json交互

4. 用phonegap打包成apk的时候有点讲究,为了b/s结构不让客户端更新版本,所以动态的内容全部引用远程的html/js/css,但是这样速度很慢。我的做法是:

 a) 把固定的第三方库的js/css都放到assets目录

 b) assets目录下的index.html的内容如下,引入远程的合并(压缩)过的css/js

 c) all-ready.js里负责加载dom和执行js

这样动态的html/css/js都放在远程,不常变打包到apk中,性能做到最好。

<!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 href="ionic/css/ionic.min.css" rel="stylesheet">
	<link href="http://115.28.42.207/jj/css/default.css" rel="stylesheet">
</head>

<body>

</body>
</html>

<script src="ionic/js/ionic.bundle.min.js"></script>
<script src="js/underscore-1.5.1.min.js"></script>
<script src="js/cordova-1.7.0.js"></script>

<script src="http://115.28.42.207/jj/js/all-ready.js"></script>

    all-ready.js

    

var md = angular.module('ionicApp', ['ionic']);
// ***
;(function(){
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			document.body.innerHTML = xhr.responseText;
			angular.bootstrap(document, ['ionicApp']);
		}
	};

	xhr.open('GET', 'http://115.28.42.207/jj/index-dom', true);
	xhr.send();
})();

源代码请下载附件,分服务端的代码(服务端用到了我写的一个基于vert.x的一个封装,参考这里)和android工程代码,以及简单的爬虫。

猜你喜欢

转载自key232323.iteye.com/blog/2106149
今日推荐