`

做一个恐怖、灵异的资讯类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工程代码，以及简单的爬虫。

 

 

分享到：
| 感觉前端方向不适合自己，要再多学些新知识 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics