دعنا نفتح الصورة أولاً ، وقلل من واجهة WeChat ، كما يلي الواجهة ، ولا يمكن قول ذلك تمامًا.
1 نقطة المعرفة المستخدمةJQuery Weui هي نسخة تنفيذ jQuery من WEUI. يتم توفير مكونات JS في jQuery Weui في شكل قابس jQuery.
WeUi هي مكتبة واجهة المستخدم H5 التي يقدمها فريق WeChat الرسمي لـ WeChat. يستخدم JQuery Weui رمز Weui CSS الرسمي ويوفر تطبيق API لإصدار JQuery/Zepto. نظرًا لأن CSS الرسمية تستخدم مباشرة ، فلا داعي للقلق بشأن الصراع مع الإصدار الرسمي. في الواقع ، jQuery weui == weui + jquery plug -in.
Font Awesome هي مجموعة مثالية من خطوط الأيقونات ، والتي تستخدم مع bootstrap.
2 مقدمة من ملفات النمط<link href = static/lib/weui.css rel = typesheet type = text/css/> <link href = static/css/jquist-weui.css rel = typehype type = text/css/> href = static/font- Awesome/CSS/FONT-AWOYENG.CSS R = TYPESHEET TYPE = TEXT/CSS/>3 دعنا نتحدث عن القائمة السفلية أولاً
<div class = weui-tabbar> <a href = wx-wx.html class = weui-tabbar__item> <span class = weui-badge = poselute: top: -4emt ؛ <div class = weui-tabbar__icon> <i class = fatefomment-o fa-fw style => </div> <p class = weui-tabbar_label> weChat </p> </a> <a href = wx tongxulv. html class = weui-tabbar__item> <div class = weui-tabbar__icon> <i class = fa fa-vcard-o style => </i> </viv> <p class = weui -tabbar__label> دفتر العناوين </p> <p> < /a> <a href =#tab3 class = weui-tabbar__item> <div class = weui-tabbar_icon> <i class = fa-compass style => </i> </ </viv> <p class = weui -tabbar__label> discovery </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 = اللون:#0dba08 ؛> </i> </viv> <p class = weui-tabbar_label style = color:#0dba08 ؛> i </p> </a> </viv>4 رمز الرأس
<nav class = Blue nav style => <a id = toppopovershow href =# class = button button-link right> <i class = fa-plus fa-fw style = font-size: 20px ؛> i> </a> <h1 class = tictle> weChat </h1> </v>5 الجزء الرئيسي
<div class = page-conftent> <div class = weui-cells style = hargin-top: 0px ؛> <a class = weui-cell weui-cell_access open-popup-modal data- target =#full href = javaScript :؛ <div class = weui-cell__hd> <img width = 48px ؛ النمط div = الهامش-heft: 10px ؛> <h4 class = weui-media-box__title> الاستماع إلى chunyu bodhi no tree </h4> <p class = weui-media-box_desc> مرآة مشرقة </p> </div > </viv> <div class = weui-cell__ft> 22:55 </viv> </a> <a class = weui-cell weui-cell_access href = javaScript:> <div class = weui-cell__hd> <img العرض = 48 بكسل ؛ H4 Class = Weui-Media-Box__title> استمع إلى Chunyu </h4> <p Class = Weui-Media-Box_desc> يتحدث الجميع اليوم. 22:55 </viv> </a> </viv>6 رأس CSS
. وضوح الخلفية: مخفية ؛
ما سبق هو كل محتويات هذا المقال.