效果图：
地址：http://pan.baidu.com/s/1eSupF6E
总结：只要熟悉Jquery，很快就能上手，界面效果和原生的还是有些区别，做简单的页面还是可以的。
page_chat.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
::-webkit-scrollbar{width:0px} /* 隐藏滚动条 */
.page{
background:#E9E9E9;
}
.navbar{
margin:5px;
padding:0px;
text-align:center;
}
.navbar li{
float:left; /* 横向排列 */
}
ul{
list-style-type:none;
}
a{
text-decoration:none; /* 不显示超链接下划线 */
}
.navbar li a{
color:#8A8A8A; /* 字体颜色 */
}
.navbar li img{
width:30px;
height:30px;
}
.header{
background-color:#292421;
}
.header div{
float:right;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;
}
.header div img{
width:22px;
height:22px;
}
div.float{
position:fixed;
top:60px;
z-index:999;
width:160px;
height:auto;
}
</style>
<script>
var lastTab; //上一个选中的按钮
var screenWidth; //宽度
var isFloatDisplay = false; //弹窗显示状态
$(document).ready(function(){
lastTab = $("#tab_chat")[0];
//监听窗口大小改变
$(window).resize(function(){
screenWidth = $(document.body).width(); //宽度
adjustNavBarWidth();
adjustFloatPosition();
});
});
$(document).on("pagecreate", function(){
//初始化加载聊天列表
set2ChatMsgList();
screenWidth = $(document.body).width(); //宽度
//初始化导航栏宽度
adjustNavBarWidth();
//初始化悬浮窗的位置
adjustFloatPosition();
$("body").on("vmouseup", function(){
if(isFloatDisplay){
isFloatDisplay = false;
$("#btnmorelist").html("");
}
});
$(".header div.button").on("vmousedown", function(){
this.style.background = "#121212";
});
$(".header div.button").on("vmouseup", function(){
this.style.background = "#292421";
});
$("#fun_more").on("tap", function(){
if(!isFloatDisplay){
isFloatDisplay = true;
var list = $("#btnmorelist");
list.html('<li><a href="#"><img src="image/ic_groupchat.png" class="ui-li-icon"/>发起群聊</a></li><li><a href="#"><img src="image/ic_newfriends_2.png" class="ui-li-icon"/>添加朋友</a></li><li><a href="#"><img src="image/ic_scan_white.png" class="ui-li-icon"/>扫一扫</a></li><li><a href="#"><img src="image/ic_pay.png" class="ui-li-icon"/>收付款</a></li><li><a href="#"><img src="image/ic_feedback.png" class="ui-li-icon"/>帮助和反馈</a></li>');
list.listview("refresh");
}
});
$("#navbarlist li").on("tap", function(){
if(this == lastTab) return;
//上一个按钮恢复未选中状态
var img = $(lastTab).children("img");
var a = $(lastTab).children("a");
a.css("color", "#8a8a8a");
img.attr("src", "image/" + lastTab.id + "_normal.png");
lastTab = this;
//改变按钮的样式
var img = $(this).children("img");
var a = $(this).children("a");
a.css("color", "#2aa515");
img.attr("src", "image/" + this.id + "_checked.png");
//切换列表
if(this.id == "tab_chat"){
set2ChatMsgList();
}else if(this.id == "tab_addressbook"){
set2AddressbookList();
}else if(this.id == "tab_found"){
set2FoundList();
}else if(this.id == "tab_me"){
set2MeList();
}
});
});
//调整导航栏的宽度
function adjustNavBarWidth(){
$("ul.navbar li").css("width", screenWidth / 4 - 5 + "px");
}
//设置悬浮窗的位置
function adjustFloatPosition(){
var floatWidth = $("div.float").width();
$("div.float").css("left", screenWidth - floatWidth - 10 + "px");
}
//初始化列表内容
function initMyList(content){
var mylist = $("#mylist");
mylist.html(content);
//重新渲染listview
mylist.listview("refresh");
}
//设置为聊天列表
function set2ChatMsgList(){
var content = "";
for(var i = 0; i < 20; i++){
content += '<li><a href="#"><img src="image/head.jpg" style="margin-left:5px;margin-top:5px;width:70px;height:70px;"/><p style="float:right;color:#8a8a8a">17:26</p><h2>好友</h2><p style="color:#8a8a8a">这是聊天消息</p></a></li>';
}
initMyList(content);
}
//设置为通讯录列表
function set2AddressbookList(){
var s = new Array();
s[0] = "新的朋友";
s[1] = "群聊";
s[2] = "标签";
s[3] = "公众号";
var imgnames = new Array();
imgnames[0] = "image/ic_newfriends.png";
imgnames[1] = "image/ic_chatgroup.png";
imgnames[2] = "image/ic_tag.png";
imgnames[3] = "image/ic_publicnumber.png";
var colors = new Array();
colors[0] = "#FF6100";
colors[1] = "#228B22";
colors[2] = "#4169E1";
colors[3] = "#4169E1";
var content = "";
for(var i = 0; i < s.length; i++){
content += '<li><a href="#"><img src="' + imgnames[i] + '" style="background:' + colors[i] + '" class="ui-li-icon"/>' + s[i] + '</a></li>';
}
content += '<li data-role="list-divider">A</li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>A联系人1</a></li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>A联系人2</a></li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>A联系人3</a></li>';
content += '<li data-role="list-divider">B</li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>B联系人1</a></li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>B联系人2</a></li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>B联系人3</a></li>';
content += '<li data-role="list-divider">C</li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>C联系人1</a></li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>C联系人2</a></li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>C联系人3</a></li>';
content += '<li data-role="list-divider">D</li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>D联系人1</a></li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>D联系人2</a></li>';
content += '<li data-role="list-divider">E</li>';
content += '<li><a href="#"><img src="image/head.jpg" class="ui-li-icon"/>E联系人1</a></li>';
initMyList(content);
}
//设置为发现列表
function set2FoundList(){
var s = new Array();
s[0] = "朋友圈";
s[1] = "扫一扫";
s[2] = "摇一摇";
s[3] = "附近的人";
s[4] = "漂流瓶";
s[5] = "购物";
s[6] = "游戏";
var imgnames = new Array();
imgnames[0] = "image/ic_friendscircle.png";
imgnames[1] = "image/ic_scan.png";
imgnames[2] = "image/ic_shake.png";
imgnames[3] = "image/ic_nearbypeople.png";
imgnames[4] = "image/ic_driftingbottle.png";
imgnames[5] = "image/ic_shopping.png";
imgnames[6] = "image/ic_game.png";
var content = "";
for(var i = 0; i < s.length; i++){
if(i == 0 || i % 2 != 0){
content += '<li data-role="list-divider"></li>';
}
content += '<li><a href="#"><img src="' + imgnames[i] + '" class="ui-li-icon"/>' + s[i] + '</a></li>';
}
0,1,3,5
initMyList(content);
}
//设置为我的列表
function set2MeList(){
var s = new Array();
s[0] = "相册";
s[1] = "收藏";
s[2] = "钱包";
s[3] = "卡包";
s[4] = "表情";
s[5] = "设置";
var imgnames = new Array();
imgnames[0] = "image/ic_album.png";
imgnames[1] = "image/ic_collection.png";
imgnames[2] = "image/ic_wallet.png";
imgnames[3] = "image/ic_cardpackage.png";
imgnames[4] = "image/ic_expression.png";
imgnames[5] = "image/ic_setting.png";
var content = "";
content += '<li data-role="list-divider"></li>';
content += '<li><a href="#"><img src="image/head.jpg" style="margin-left:5px;margin-top:5px;width:70px;height:70px;"/><h1 style="float:left;margin-top:18px">蜡笔小新</h1><img src="image/qrcode.png" style="float:right;width:20px;height:20px;margin-top:18px"/></a></li>';
for(var i = 0; i < s.length; i++){
if(i % 2 == 0 || i > 3){
content += '<li data-role="list-divider"></li>';
}
content += '<li><a href="#"><img src="' + imgnames[i] + '" class="ui-li-icon"/>' + s[i] + '</a></li>';
}
initMyList(content);
}
</script>
</head>
<body>
<div data-role="page" id="page_main" class="page">
<div data-role="header" data-position="fixed" data-theme="b" class="header">
<div style="font-size:20px;float:left;">微信</div>
<div class="button" style="margin-right:10px;" id="fun_more">
<img src="image/ic_more.png"/>
</div>
<div class="button" id="fun_search">
<img src="image/ic_search.png"/>
</div>
</div>
<div data-role="main" class="ui-content">
<div class="float">
<ul data-role="listview" data-icon="false" data-theme="b" id="btnmorelist"></ul>
</div>
<ul data-role="listview" data-icon="false" id="mylist"></ul>
</div>
<div data-role="footer" data-position="fixed" style="background-color:#FFFFFF">
<ul id="navbarlist" class="navbar">
<li id="tab_chat">
<img src="image/tab_chat_checked.png"/><br/>
<a href="#" style="color:#2aa515">微信</a>
</li>
<li id="tab_addressbook">
<img src="image/tab_addressbook_normal.png"/><br/>
<a href="#">通讯录</a>
</li>
<li id="tab_found">
<img src="image/tab_found_normal.png"/><br/>
<a href="#">发现</a>
</li>
<li id="tab_me">
<img src="image/tab_me_normal.png"/><br/>
<a href="#">我</a>
</li>
</ul>
</div>
</div>
</body>
</html>打包成APP，用WebView来加载页面
MainActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
private final String ASSETPATH = "file:///android_asset/";
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWebView();
}
private void initWebView() {
webView = (WebView) findViewById(R.id.webView);
//WebView加载web资源
webView.loadUrl(ASSETPATH + "page_chat.html");
//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//返回值是true的时候控制用WebView打开，为false调用系统浏览器或第三方浏览器
view.loadUrl(url);
return true;
}
});
//允许允许Javascript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
//使用缓存
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}
}
扫一扫
4500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
