手機頁面前端框架weui+

2021-01-05 江邊碼農

隨著智慧型手機的普及,越來越多的用戶從電腦轉移到手機,現在去談客戶我們一定要說:「您一定要做手機版或者是微信端」,可見智慧型手機的強大,雖然說手機頁面很早就有,但是感覺它是被自適應網站架構html5和微信帶起來的。估計以後的頁面展示趨勢還是依託手機頁面。

針對前端寫代碼手機頁面有以下幾種方式,一個是寬度按照百分比來寫,比如寬度100%,元素30%來寫,這種方式的話相對多一些,兼容的效果也好很多;一種方式是通過html5多媒體概念,針對每一個尺寸都寫個頁面出來,通過屏幕尺寸來自動調整,這種相對來說比較繁瑣,而且整體效果也不是很理想,還有一種就是通過大神們寫好的前端框架來進行架構,比如Bootstrap,AUI,JQuery WeUI,Amaze UI,Frozen UI,WeUI ,SUI ,Foundation ,MUI,UiKit Pure等成熟的前端框架來進行搭建,這種相對來說效果要好,也是現在主要的方式。但是各有各的好處,要說哪個好,這個只能是針對自己怎麼寫。

這裡的話,我介紹下weUI 個人覺得如果針對做手機網站夠用!

WeUI+是Zepto1.2和WeUI 1.1.3為基礎,收集整理了上百個組件開發而成,兼容IOS和Android平臺,主要用於微信/手機網站開發

網址:http://weui.shanliwawa.top/

解壓後,css,js,是屬於基礎文件,demo屬於效果文件

調用方式也相對簡單

加一個單獨的css文件放入自己寫的樣式這種方便操作(如果在調用效果的時候,建議加一個div外框,這種方便修改)

比如一個簡單的首頁模型:

比如幻燈片:

比如底部菜單:

都是可以直接拿過來用的

同時weui 還為我們提供常規列表頁的選擇,(基礎-面板)

我們也可以直接調用,感覺上和MUI有很多相同的地方,在代碼調用上沒有多少的難度,很適合前端的工作人員,希望weui工作研發團隊在常用的模塊上添加一些新的功能模塊。

相關焦點

  • 談談前端框架 2020該怎麼選擇前端框架?
    由於瀏覽器與JavaScript 標準的進展,近年來前端領域可以說是突飛猛進,各種前端框架/函式庫也如雨後春筍般紛紛出現。常常有人問,「怎麼選擇前端框架」你會怎麼回答?再來是終端設備的效能,這包含PC 端上的效能、手機端的效能,甚至是瀏覽器的效能限制。當硬體的效能還沒有達到一定水準,瀏覽器廠商也就沒有動力更新產品,而作為網頁應用的唯一載體,瀏覽器發展的停滯也就直接影響了整個前端技術的發展。所以回顧過去,你會發現ECMAScript 的標準更曾停滯了將近十年之久。
  • 前端,什麼是你眼中的前端?一個好看頁面?
    什麼是前端?前端: 將數據以更直觀的、友好的顯示出來的一種方式。能看到的都屬於前端。說到前端,必然會想到後端,那什麼又是後端呢?後端: 數據的來源,根據需要產生數據。對於一個軟體來說,如果只有界面,那就只能拿來觀看。
  • 藝龍網孫東 Slarkjs-前端框架的優化與實踐
    以我們公司藝龍為例,第一季度藝龍核心業務酒店的移動訂單量在總酒店客房間夜中所佔比例達到65%,這一數字在半年前還只是48%,移動業務的快速增長,對公司也越來越重要,對於我們前端框架有了更高的要求。移動前端相比pc前端有很大的不同,面臨很多新的問題和挑戰。【作者】
  • 前端Js框架匯總
    一、前端框架庫:1.Zepto.js地址:http://www.css88.com/doc/zeptojs/**描述:**Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫,它與jquery有著類似的api。 如果你會用jquery,那麼你也會用zepto。
  • WeUI - 為微信 Web 服務量身設計的 UI 框架
    ,用於規範頁面元素所屬的層級、層級順序,和組合規範。最底層是內容頁面,其上是導航頁面,然後是則遮蓋層,最上方則是彈出頁面。</a><a href=&34; class=&34;><i class=&34;></i>頁面主操作</a><a href=&34; class=&34;>頁面主操作</a>WeUI 提供了基本的表單結構組件,一個表單,由
  • 月薪50W前端大牛分享的技能整理,web前端要學哪些東西
    [ ] ES6新特性:看編碼規範 [ ] aurelia ES6前端框架dom操作即時刷新前端頁面 [ ] 根據dom操作生成組件config配置保存到db [ ] bootstrap、jqwidgets、semantic ui、amaze ui [ ] 微信手Q ui: frozenui、weui
  • Twitter BootStrap:前端框架利器
    Bootstrap的歷史為了應對複雜的需求,早期的Twitter前端工程師在開發網站時幾乎採用了所有自己熟悉的前端庫。造成了網站維護困難、擴展性不強、開發成本高等問題。此時BootStrap被提上了日程。Twitter要求前端工程師完全依靠這一單一框架進行前端開發。
  • 20個優秀的前端框架
    2. 3. 960gs(GPL&MIT;響應式)960gs提供了一個簡單的網格系統,適合快速開發。9. G5 Framework(Free)(x)HTML5、CSS、PHP前端開發框架。12. YAML(Creative Commons)(x)HTML+CSS框架,適合開發現代化浮動布局。
  • 前端頁面的優化對SEO的重要性
    很多老闆就比較納悶,這個前端頁面我是開始就想好了的,本身營銷性以及審美角度來考慮的,個人是覺得非常的滿足,但是為什麼在SEO這裡,就會有那麼多的毛病?是SEO想要搞事情?在這裡就不得不提及一下前端頁面的優化對SEO的重要性,相信很多的站長都發現了這個問題,網站的前端優化,對SEO來說是比較重要的一個環節,因為一個網站的體量,以及一個網站是否能夠有效的參與關鍵詞排名,那麼網站的前端頁面的框架布局,是有很大的影響的。
  • 程式設計師2015年8月A:前端框架
    (1)AngularJS在2015(2)Vue.js:輕量高效的前端組件化方案(3)avalon:小而美,輕量級前端MVVM框架(4)解讀React(5)不僅用於UI構建文/ 程邵非2014到2015年,隨著移動網際網路的興起,前端框架開始從jQuery一統天下的局面,逐漸演變成了百花齊放的局面。
  • 我們為什麼選擇Vuetify作為前端框架
    嘗試了很多不同的前端框架,最終我們選擇Vuetify(https://vuetifyjs.com)前端框架。從Bootstrap開始,到iview,Buefy,elementUI,我們都是不斷的嘗試了多種不同的前端Vue框架,最終選擇Vuetify,並在公司所有項目中使用Vuetify作為後端管理頁面的前端框架,下面來介紹一下我們為什麼選擇這個框架。
  • 百度開源低代碼前端框架–amis,提升前端效率必殺技
    amis 是一個低代碼前端框架,它使用 JSON 配置來生成頁面,可以節省頁面開發工作量,極大提升開發前端頁面的效率。提供完整的界面解決方案:其它 UI 框架必須使用 JavaScript 來組裝業務邏輯,而 amis 只需 JSON 配置就能完成完整功能開發,包括數據獲取、表單提交及驗證等功能;內置 100+ 種 UI
  • 1.前端三大主流框架~技術之間的關係
    Angular.js:出來最早的前端框架,學習曲線比較陡,NG1學起來比較麻煩,NG2開始,進行了一系列的改革,也開始啟用組件化了;在NG中,也支持使用TS(TypeScript)進行編程;Vue.js:最火的一門前端框架
  • 受歡迎的vue前端UI框架top5
    Vue.js是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。實用的 Vue.js組件庫可以幫助我們快速搭建頁面,下面介紹小編認為比較受歡迎的五個vue前端ui框架。
  • 「前端必備」介紹幾款優秀的前端UI框架
    直到現在適合於各種開發的UI框架相應而生,針對不同的界面開發選擇相應的UI框架,能使開發效率事半功倍。這篇文章就為大家介紹多種前端UI框架,助你高效開發。LayUI由職業前端傾情打造,面向全層次的前後端開發者,低門檻開箱即用的前端 UI 解決方案,layui是一個採用自身模塊規範化編寫的前端UI框架,它依照原生HTML/CSS/JS的書寫與組織形式,入門簡單,使用也非常簡單。
  • Basecamp發布網頁前端開發框架
    不用大量JavaScript,而是發送HTML的方式,不只可以實現快速加載首次頁面的目的,還能夠將模板渲染交給伺服器,並在不犧牲傳統單頁應用程式的速度與響應性的情況下,讓開發者使用各種程序語言開發網頁程序,有效提升生產力。 網頁應用程式通過發送HTML來呈現客戶端頁面,並非全新的方法,只是近幾年JavaScript技術蓬勃發展,吸引了多數開發者的目光。
  • Amaze UI優秀案例:跨屏H5前端框架
    Bootstrap框架是目前比較受全球程式設計師受歡迎的框架之一,因其擁有美觀的樣式和封裝完善的JQ插件,和其它框架無法比擬的擴展。但針對中國開發者,Amaze UI除了開源和組件豐富的特點以外,它還擁有更加本土化的元素。 首先界面操作更加符合中國人的習慣,解決了Bootstrap沒有對中文字體做設置的問題。
  • 前端框架bootstrap和layui有什麼區別
    做前端的小夥伴肯定都用過或聽過Bootstrap和LayUi,小編我雖然不是專業的前端程式設計師,但是對於前端還是頗有研究,閒暇事情會經常研究各種前端框架的源碼,一來可以借鑑優秀框架的思想,二來可以順便學習可以提高自己,好了,不廢話了。
  • 5 個優秀前端 UI 框架
    隨著 Web 技術的不斷發展,前端開發框架層出不窮,各有千秋,今天小編為大家奉上前端 UI 框架的開源項目,希望大家能夠喜歡!如果大家有 UI 框架相關的開源項目,也可以託管到碼雲上,我們會及時給予推薦。最後,如果你很喜歡以下提到的項目,別忘了分享給其他人哦!
  • Web前端三大主流框架是什麼?
    前端框架對於前端開發的好處是顯而易見的,比如減少代碼中因失誤產生的bug,還能大大節約時間和人力成本,縮短開發周期等等。目前,市面上Web前端三大主流框架分別指的是Angular、React和Vue,在Web前端開發中,它們平分秋色,各有優劣。