前言

先来张图,仿微信界面,界面如下,并不完全一模一样,只能说有些类似,希望大家见谅。

1 用到的知识点

jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的JS组件均是以JQuery 插件的形式提供,使用非常方便,并且可以和React、Angular、VUE之类的主流JS框架一起使用。

WeUI 是微信官方团队针对微信提供的一个H5 UI库,它只提供了一组CSS组件。jQuery WeUI 中使用的是官方WeUI的CSS代码,并提供了jQuery/Zepto版本的API实现。因为直接使用了官方的CSS,所以你不用担心跟官方版本的冲突。实际上 jQuery WeUI == WeUI + jQuery插件。

Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用。

2 引入样式文件

  <link href="static/lib/weui.css" rel="stylesheet" type="text/css" />
  <link href="static/css/jquery-weui.css" rel="stylesheet" type="text/css" />
  <link href="static/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" /> 

3 先说底部菜单

<div class="weui-tabbar">
<a href="wx-wx.html" class="weui-tabbar__item "> <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
<div class="weui-tabbar__icon">
<i class="fa fa-comment-o fa-fw" style=" "></i>
</div> <p class="weui-tabbar__label">微信</p> </a>
<a href="wx-tongxulv.html" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="fa fa-vcard-o" style=" "></i>
</div> <p class="weui-tabbar__label">通讯录</p> </a>
<a href="#tab3" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="fa fa-compass " style=""></i>
</div> <p class="weui-tabbar__label">发现</p> </a>
<a href="wx-user.html" class="weui-tabbar__item weui-bar__item--on">
<div class="weui-tabbar__icon">
<i class="fa fa-user" style=" color:#0dba08;"></i>
</div> <p class="weui-tabbar__label" style=" color:#0dba08;">我</p> </a>
</div>

4 头部代码

  <nav class="blue nav" style=" ">
   <a  id="topPopovershow" href="#" class="button button-link right "> <i class="fa fa-plus fa-fw" style=" font-size:20px;" ></i> </a>
   <h1 class="title">微信</h1>
  </nav> 

5 主体部分

 <div class="page-content">
            <div class="weui-cells" style="margin-top: 0px;">
                 <a class="weui-cell weui-cell_access open-popup  weui-popup-modal "  data-target="#full"  href="javascript:;">
            <div class="weui-cell__hd">
            <img width="48px;" class="weui-media-box__thumb" src="data:images/timg5.jpg" alt="" class="self-header">
        </div>
            <div class="weui-cell__bd">
                <div style=" margin-left:10px;">

      <h4 class="weui-media-box__title">小楼听春雨菩提本无树</h4>
      <p class="weui-media-box__desc" >菩提本无树,明镜</p>

            </div>
            </div>
            <div class="weui-cell__ft">22:55</div>
          </a>

               <a class="weui-cell weui-cell_access" href="javascript:;">
            <div class="weui-cell__hd">
            <img width="48px;" class="weui-media-box__thumb" src="data:images/timg2.jpg" alt="" class="self-header">
        </div>
            <div class="weui-cell__bd">
                <div style=" margin-left:10px;">

      <h4 class="weui-media-box__title">听春雨</h4>
      <p class="weui-media-box__desc" >大家聊聊天今天下雨了</p>

            </div>
            </div>
            <div class="weui-cell__ft">22:55</div>
          </a>
</div>

6 头部css

.nav {
 position: fixed;
    right:;
    left:;
    z-index:;
    height: 2.2rem;
    padding-right: .5rem;
    padding-left: .5rem;
    background-color: #0993c7;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    color: #FFF;
    background-color: #20a0ff;
} 

H5仿微信界面教程(一)的更多相关文章

  1. html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图

    之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...

  2. h5移动端聊天室|仿微信界面聊天室|h5多人聊天室

    今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...

  3. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  4. h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器

    之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...

  5. h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

    html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...

  6. Android ActionBar仿微信界面

    ActionBar仿微信界面 1.学习了别人的两篇关于ActionBar博客,在结合别人的文章来仿造一下微信的界面: 思路如下:1).利用ActionBar生成界面的头部,在用ActionBar的Ac ...

  7. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  8. h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗

    这段时间一直在着手h5开发手机端聊天系统——html5仿微信聊天室,最近又在原先基础上开发了一个仿微信.微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗 ...

  9. 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)

    什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...

随机推荐

  1. asp.net已流的方式下载文件

    string filePath = context.Server.MapPath("~/" + uploadFolder+"/"+file_name);//路径 ...

  2. Java解析word文档

    背景 在互联网教育行业,做内容相关的项目经常碰到的一个问题就是如何解析word文档. 因为系统如果无法智能的解析word,那么就只能通过其他方式手动录入word内容,效率低下,而且人工成本和录入出错率 ...

  3. 初码-Azure系列-文章目录

    系统迁移 初码-Azure系列-记一次MySQL数据库向Azure的迁移 初码-Azure系列-迁移PHP应用至Azure的一些实践记录和思考 初码-Azure系列-记一次从阿里云到Azure的迁移和 ...

  4. Java常用集合体系以及相互区别

    Collection集合特点: 1.2.1一些 collection 允许有重复的元素,而另一些则不允许 1.2.2一些 collection 是有序的,而另一些则是无序的 [有序是指与添加的顺序一致 ...

  5. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  6. JavaScript设计模式_03_代理模式

    代理模式是非常常见的模式,比如我们使用的VPN工具,明星的经纪人,都是代理模式的例子.但是,有人会疑问,明明可以直接访问对象,为什么中间还要加一个壳呢?这也就说到了代理模式的好处.在我看来,代理模式最 ...

  7. NLTK学习笔记(三):NLTK的一些工具

    主要总结一下简单的工具:条件频率分布.正则表达式.词干提取器和归并器. 条件分布频率 <自然语言学习>很多地方都用到了条件分布频率,nltk提供了两种常用的接口:FreqDist 和 Co ...

  8. 机器学习:保序回归(IsotonicRegression):一种可以使资源利用率最大化的算法

    1.数学定义 保序回归是回归算法的一种,基本思想是:给定一个有限的实数集合,训练一个模型来最小化下列方程: 并且满足下列约束条件: 2.算法过程说明 从该序列的首元素往后观察,一旦出现乱序现象停止该轮 ...

  9. ffmpeg最全的命令参数

    Hyper fast Audio and Video encoderusage: ffmpeg [options] [[infile options] -i infile]... {[outfile ...

  10. Vulkan Tutorial 19 Vertex input description

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 在接下来几个章节中,我们将会使用内存顶点缓冲区来替换之前硬 ...