hbuilder案例-仿微信界面
2024-05-11 10:10:45
目录
运行效果图：
index.html
sub1.html:
sub2.html:
sub3.html
sub4.html:
chat.html
fdHeader.html
fdBody.html
运行效果图：
index.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet"/><link rel="stylesheet" type="text/css" href="css/Main.css"/><script type="text/javascript" charset="utf-8">mui.init();//mui加载完成事件mui.plusReady(function () {var subPages=["sub1.html","sub2.html","sub3.html","sub4.html"];var subPageStyle={top:"44px",bottom:"50px"};var mainView=plus .webview.currentWebview();for(var i=0;i<subPages .length;i++){var url=subPages[i ];var subView=plus.webview.create(url,url ,subPageStyle);subView.hide();mainView.append(subView);}plus.webview.show(subPages[0]);//注册轻击事件mui(".mui-bar-tab").on("tap","a",function(){var id=this.getAttribute("href");plus.webview.show(id)})})</script>
</head>
<body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">微信</h1></header><nav class="mui-bar mui-bar-tab"><a class="mui-tab-item mui-active" href="sub1.html"><span class="mui-icon mui-icon-chatbubble"></span><span class="mui-tab-label">微信</span></a><a class="mui-tab-item" href="sub2.html"><span class="mui-icon mui-icon-contact"></span><span class="mui-tab-label">通讯录</span></a><a class="mui-tab-item" href="sub3.html"><span class="mui-icon mui-icon-navigate"></span><span class="mui-tab-label">发现</span></a><a class="mui-tab-item" href="sub4.html"><span class="mui-icon mui-icon-person"></span><span class="mui-tab-label">我</span></a></nav></body>
</html>sub1.html:
<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /></head><body><script src="js/mui.js"></script><script type="text/javascript">mui.init()mui.plusReady(function() {mui(".mui-table-view-cell").on("tap", "a", function() {//获取好友名称var title=this.getAttribute("title");mui.openWindow({url:"chat.html",id: "chat.html",extras: {name:title //自定义扩展参数，可以用来处理页面间传值},show: {autoShow: true, //页面loaded事件发生后自动显示，默认为trueaniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；},waiting: {autoShow: true, //自动显示等待框，默认为truetitle: '正在加载...'//等待对话框上显示的提示内容}})})})</script><div class="mui-content"><ul class="mui-table-view"><li class="mui-table-view-cell mui-media"><a href="javascript:;" title="幸福"><img class="mui-media-object mui-pull-left" src="data:images/shuijiao.jpg"><div class="mui-media-body">幸福<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;" title="木屋"><img class="mui-media-object mui-pull-left" src="data:images/muwu.jpg"><div class="mui-media-body">木屋<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;" title=CBD"><img class="mui-media-object mui-pull-left" src="data:images/yuantiao.jpg"><div class="mui-media-body">CBD<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></div></a></li></ul></div></body></html>
sub2.html:
<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /></head><body><script src="js/mui.js"></script><script type="text/javascript">mui.init()</script><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">通讯录</h1></header></body></html>
sub3.html
<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /></head><body><script src="js/mui.js"></script><script type="text/javascript">mui.init()mui.plusReady(function () {var friends=document.getElementById("friends"); friends.addEventListener("tap",function(){mui.openWindow({url:"fdHeader.html",id: "fdHeader.html"})})})</script><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">发现</h1></header><div class="mui-content"><ul class="mui-table-view"><li class="mui-table-view-cell mui-left" id="friends"><img src="data:images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈</li></ul><br><ul class="mui-table-view"><li class="mui-table-view-cell mui-left"><img src="data:images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈</li><li class="mui-table-view-cell mui-left"><img src="data:images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈</li></ul><br><ul class="mui-table-view"><li class="mui-table-view-cell mui-left"><img src="data:images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈</li><li class="mui-table-view-cell mui-left"><img src="data:images/朋友圈.jpg" width="30px" height="30px" align="absmiddle" /> 朋友圈</li></ul></div></body></html>
sub4.html:
<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /><style type="text/css">.mui-table-view-cell {font-size: 18px;line-height: 20px;}</style></head><body><script src="js/mui.js"></script><script type="text/javascript">mui.init()</script><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">个人中心</h1></header></body></html>
chat.html
<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /></head><body><script src="js/mui.js"></script><script type="text/javascript">mui.init()</script><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">聊天界面</h1></header></body></html>
fdHeader.html
<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /></head><body><script src="js/mui.js"></script><script type="text/javascript">mui.init({subpages:[{url:"fdBody.html",id:"fdBody.html",styles:{top:'44px'}}]})</script><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">朋友圈</h1></header></body></html>
fdBody.html
<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /></head><body><script src="js/mui.js"></script><script type="text/javascript">mui.init()</script><div class="mui-content">adasdfsaf</div></body></html>
hbuilder案例-仿微信界面相关推荐
- h5移动端聊天室|仿微信界面聊天室|h5多人聊天室
今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...
- 是男人就下100层【第一层】——高仿微信界面（4）
上一篇<是男人就下100层[第一层]--高仿微信界面(3)>中我们完成了登录,这一篇看完成登录后的一个短暂加载和引导界面. 加载界面: <RelativeLayout xmlns:a ...
- WPF仿微信界面发送消息简易版
WPF仿微信界面发送消息简易版 参考别的博主的例子用WPF MVVM框架来仿了一个微信聊天界面,做了个发送消息简易功能,下面一起来看看吧! 以下为View视图布局代码,消息对话框的样式直接在这里定义了 ...
- Android 二维码扫描(仿微信界面),根据Google zxing
Android 二维码扫描(仿微信界面),根据Google zxing Android项目开发中经常会用到二维码扫描,例如登陆.支付等谷歌方面已经有了一个开源库(地址: https://github. ...
- imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例.实现了消息发送.图片/视频预览.下拉刷新/长按弹窗.朋 ...
- 安卓开发— —仿微信界面（一）
目录 一.项目内容 二.代码实现 1.项目结构 2.头部代码 3.底部代码 4.四个内容界面 5.窗体总布局 6.MainActivity实现点击图标与页面的互动 三.运行效果 四.总结 一.项目内容 ...
- QT_QML_仿微信界面（实战）
QT_QML_仿微信界面(实战) 效果如下: 代码获取地址: 链接:https://pan.baidu.com/s/1wmDqpe94HnY_OPjSou5xBg 提取码:xmkt
- 安卓仿微信界面，导航，右上角菜单栏
下面是安卓开发仿微信界面的代码. 分为3步,第一步是界面的编写,第二步是导航界面,第三步是右上角菜单栏. 开始第一步前先预览一下效果. 第一步,界面. 界面的思路是利用ViewPager+Fragme ...
- 是男人就下100层【第一层】——高仿微信界面（8）
上一篇<是男人就下100层[第一层]--高仿微信界面(7)>中我们实现了下弹式菜单,这一篇我们来看看如何实现微信中的摇一摇功能. 首先我们来布局我们的摇一摇界面 布局文件如下: <? ...
最新文章
- java异常类型和基本处理原则_Java异常控制机制和异常处理原则
- 一丶宝塔+青龙面板安装部署教程及命令-依赖库
- 计算机网络基础 单选题) 作业,南开大学《计算机网络基础》在线作业及答案
- Mac安装brew包管理工具
- 如何用CSS让一个容器水平垂直居中？
- NDK/JNI01--NDK下载配置
- java脚本接口自动化测试_接口自动化测试实践的记录
- hadoop启动后，9000端口无法连接，netstat -tpnl中找不到该端口
- BAT与华为职级薪资股权大揭秘 网友看完后很酸表示“雨女无瓜”
- HMM条件下的 前向算法 和 维特比解码
- 降级降薪去 Amazon ——左耳朵
- java多个pdf合并为一个pdf，并通过feign下载
- mysql 免安装版忘记密码_mysql免安装版忘记密码怎么办？
- 2017.11.3作业
- md文件的简洁打开方式
- QT各种压缩包下载地址
- 苹果CMS搭建影视网站教程
- 网页调用 iOS/Android 客户端
- R markdown的笔记02
- Linux的.a、.so和.o文件以及与windows下的对应关系