ก่อนที่จะเปิดรูปภาพเลียนแบบอินเทอร์เฟซ WeChat อินเทอร์เฟซมีดังนี้และมันก็ไม่เหมือนกัน
1 จุดความรู้ที่ใช้JQuery Weui เป็นเวอร์ชันการใช้งาน jQuery ของ WEUI ส่วนประกอบ JS ใน jQuery WeUI มีให้ในรูปแบบของปลั๊ก jQuery -in
Weui เป็นห้องสมุด H5 UI ที่จัดทำโดยทีมงานอย่างเป็นทางการของ 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 = stylesheet type = text/css/> <link href = static/css/jquis-weui.css rel = stylesheet type = text/css/> href = แบบคงที่/font- Awesome/CSS/FONT-AWESOSE.CSS R = stylesheet type = text/css/>3 มาพูดถึงเมนูด้านล่างก่อน
<div class = weui-tabbar> <a href = wx-wx.html class = weui-tabbar__item> <span class = weui-badge style = 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> </div> <p class = weui -tabbar__label> ที่อยู่ /a> <a href =#tab3 class = weui-tabbar__item> <div class = weui-tabbar_icon> <i class = fa-compass style => </i> </</</div> <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> <class = fa fa-user user สี:#0dba08;> </i> </div> <p class = weui-tabbar_label style = color:#0dba08;> i </p> </a> </div>4 รหัสหัว
<nav class = blue nav style => <a id = toppoVershow href =# class = ปุ่มปุ่มลิงก์ขวา> <i class = fa-plus fa-fw style = font-size: 20px;> i> < /a> <h1 class = tictle> weChat </h1> </av>5 ส่วนหลัก
<div class = page-conftent> <div class = weui-cells style = margin-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 style = margin-heft: 10px;> <h4 class = weui-media-box__title> การฟัง Chunyu Bodhi No Tree </h4> <p class = weui-media-box_desc> Mirror </p> > </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 ความกว้าง = 48px; h4 class = weui-media-box__title> ฟัง Chunyu </h4> <p class = weui-media-box_desc> ทุกคนแชทวันนี้ 22:55 </div> </a> </div>6 หัว CSS
.NAV {POSITY: แก้ไข; Backface-visibility: Hidden;ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้