Android jquery mobile 仿微信主界面

来源：互联网发布：淘宝账号要实名认证吗编辑：程序博客网时间：2024/05/17 21:43

效果图：

地址：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);//重新渲染listviewmylist.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,5initMyList(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);    }}

0 0