Utilisez H5 pour imiter l'interface WeChat

Cet article présente principalement en détail le premier didacticiel d'interface WeChat d'imitation H5, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Avant-propos

Tout d'abord, voici une image imitant l'interface WeChat. L'interface est la suivante. Ce n'est pas exactement la même. Je peux seulement dire qu'elle est un peu similaire.

1 Points de connaissances utilisés

jQuery WeUI est une version d'implémentation jQuery de WeUI en plus d'implémenter le plug-in officiel. , il fournit également de riches composants d'extension tels que l'actualisation déroulante, le calendrier, le sélecteur d'adresse, etc. Les composants JS de jQuery WeUI sont tous fournis sous la forme de plug-ins JQuery, très pratiques à utiliser et peuvent être utilisés avec les frameworks JS grand public tels que React, Angular et VUE.

WeUI est une bibliothèque d'interface utilisateur H5 fournie par l'équipe officielle de WeChat pour WeChat. Elle ne fournit qu'un ensemble de composants CSS. jQuery WeUI utilise le code CSS officiel WeUI et fournit la version jQuery/Zepto de l'implémentation de l'API. Comme le CSS officiel est utilisé directement, vous n’avez pas à vous soucier des conflits avec la version officielle. En fait jQuery WeUI == WeUI + plugin jQuery.

Font Awesome est un ensemble parfait de polices d'icônes, principalement conçues pour être utilisées avec Bootstrap.

2 Présenter les fichiers de style

<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 Parlons d'abord du menu du bas

<p 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> 
<p class="weui-tabbar__icon"> 
<i class="fa fa-comment-o fa-fw" style=" "></i> 
</p> <p class="weui-tabbar__label">微信</p> </a> 
<a href="wx-tongxulv.html" class="weui-tabbar__item"> 
<p class="weui-tabbar__icon"> 
<i class="fa fa-vcard-o" style=" "></i> 
</p> <p class="weui-tabbar__label">通讯录</p> </a> 
<a href="#tab3" class="weui-tabbar__item"> 
<p class="weui-tabbar__icon"> 
<i class="fa fa-compass " style=""></i> 
</p> <p class="weui-tabbar__label">发现</p> </a> 
<a href="wx-user.html" class="weui-tabbar__item weui-bar__item--on"> 
<p class="weui-tabbar__icon"> 
<i class="fa fa-user" style=" color:#0dba08;"></i> 
</p> <p class="weui-tabbar__label" style=" color:#0dba08;">我</p> </a> 
</p>

4 Code d'en-tête

<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 Partie principale

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

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

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

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

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

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

6 Tête css

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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez l'imitation Android WeChat pour charger la barre de progression de la page H5

Stockage local HTML5 IndexedDB

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!