首頁(yè) 小程序開(kāi)發(fā) 正文

微信小程序開(kāi)發(fā)ui框架（微信小程序開(kāi)發(fā)前端框架）

小程序開(kāi)發(fā) 2023-02-15T13:24:13 3533

今天給各位分享微信小程序開(kāi)發(fā)ui框架的知識(shí)，其中也會(huì)對(duì)微信小程序開(kāi)發(fā)前端框架進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！本文目錄一覽： 1、基于微信小程序的的電商訂單的技術(shù)框架是什么

今天給各位分享微信小程序開(kāi)發(fā)ui框架的知識(shí)，其中也會(huì)對(duì)微信小程序開(kāi)發(fā)前端框架進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

1、基于微信小程序的的電商訂單的技術(shù)框架是什么
2、H5開(kāi)發(fā)與微信小程序開(kāi)發(fā)的區(qū)別有哪些
3、前端ui框架排名
4、微信小程序ui框架有哪些
5、肯德基微信小程序用什么開(kāi)發(fā)的

基于微信小程序的的電商訂單的技術(shù)框架是什么

layui框架。

該系統(tǒng)有網(wǎng)站后臺(tái)管理端和小程序客戶端,后臺(tái)前端框架使用的是layui框架。

微信小程序，小程序的一種，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。

微信小程序開(kāi)發(fā)ui框架（微信小程序開(kāi)發(fā)前端框架）

H5開(kāi)發(fā)與微信小程序開(kāi)發(fā)的區(qū)別有哪些

一、運(yùn)行環(huán)境的不同。

傳統(tǒng)的HTML5的運(yùn)行環(huán)境是瀏覽器，包括webview，而微信小程序的運(yùn)行環(huán)境并非完整的瀏覽器，大家注意，我這里寫(xiě)的是“非完整的瀏覽器”，有以下幾個(gè)原因

小程序的開(kāi)發(fā)過(guò)程中會(huì)用到HTML5相關(guān)的技術(shù)(并非全部)

小程序最后的發(fā)布上線需要微信審核，微信在不更新自身軟件的情況下可以將小程序更新到自身軟件內(nèi)，這就聯(lián)想到了React Native框架,并且已經(jīng)有開(kāi)發(fā)者在微信小程序的開(kāi)發(fā)工具源碼中發(fā)現(xiàn)使用了React和NodeWebkit庫(kù)

官方文檔中著重強(qiáng)調(diào)了腳本內(nèi)是無(wú)法使用瀏覽器中常用的window對(duì)象和document對(duì)象（基于這一點(diǎn)，像zepto/jquery這種操作dom的庫(kù)就被完全拋棄了）

所以我個(gè)人認(rèn)為，小程序的運(yùn)行環(huán)境很有可能是微信開(kāi)發(fā)團(tuán)隊(duì)基于瀏覽器內(nèi)核完全重構(gòu)的一個(gè)內(nèi)置解析器，針對(duì)小程序?qū)ｉT(mén)做了優(yōu)化，配合自己定義的開(kāi)發(fā)語(yǔ)言標(biāo)準(zhǔn)，提升了小程序的性能。

不過(guò)由于微信給開(kāi)發(fā)者提供了開(kāi)發(fā)工具，而開(kāi)發(fā)工具中也內(nèi)置了編程、調(diào)試、開(kāi)發(fā)環(huán)境、發(fā)布于一身，我們也不用再探討它的最終運(yùn)行環(huán)境了，只要按照官方文檔進(jìn)行開(kāi)發(fā)就可以了。并且從微信團(tuán)隊(duì)給開(kāi)發(fā)者提供開(kāi)發(fā)工具這一舉動(dòng)，讓我聯(lián)想到了蘋(píng)果給開(kāi)發(fā)者提供的X-CODE開(kāi)發(fā)工具，可以想象微信的“野心”可見(jiàn)一斑

二、開(kāi)發(fā)成本的不同。

這里我提出了一個(gè)問(wèn)題，當(dāng)我們面對(duì)一個(gè)HTML5 web開(kāi)發(fā)需求時(shí)，我們需要考慮什么呢？拋去開(kāi)發(fā)工具（vscode、sublimtext、Atom等）不談，大到前端框架（Angular、react、vue、backbone等）、模塊管理工具（Webpack 、Browserify 等）、任務(wù)管理工具（Grunt、Gulp等），小到UI庫(kù)選擇、接口調(diào)用工具（ajax、Fetch Api等）、瀏覽器兼容性等都要我們一一考略，再不濟(jì)用jqery插件寫(xiě)H5，也要在開(kāi)發(fā)過(guò)程中去尋找合適的jquery插件來(lái)配合項(xiàng)目。盡管這些工具可定制化非常高，并且提高了開(kāi)發(fā)者的開(kāi)發(fā)效率，但我相信項(xiàng)目開(kāi)發(fā)的配置工作已經(jīng)消耗了不少精力，盡管大部分開(kāi)發(fā)者都有自己的配置模板，但長(zhǎng)久以來(lái)對(duì)于項(xiàng)目中使用的各種外部庫(kù)的版本迭代、版本升級(jí)所產(chǎn)生的成本應(yīng)該也不低。

而當(dāng)我們面對(duì)一個(gè)微信小程序的開(kāi)發(fā)需求時(shí)，我們需要考慮什么呢？微信團(tuán)隊(duì)提供了開(kāi)發(fā)者工具，并且規(guī)范了開(kāi)發(fā)標(biāo)準(zhǔn)，前端常見(jiàn)的HTML、CSS變成了微信自定義的WXML、WXSS，WXML中盡管全部是自定義標(biāo)簽，但官方文檔中都有明確的使用介紹，相信上手應(yīng)該是非常容易的；WXSS、JSON和JS文件中的寫(xiě)法稍有限制，但整體相差不多。在統(tǒng)一了這些標(biāo)準(zhǔn)之后，作為一個(gè)開(kāi)發(fā)者，你會(huì)發(fā)現(xiàn)，自己只要專注寫(xiě)程序就可以了：

當(dāng)需要調(diào)用后端接口時(shí)，調(diào)用發(fā)起請(qǐng)求API

當(dāng)需要上傳下載時(shí)，調(diào)用上傳下載API

當(dāng)需要數(shù)據(jù)緩存時(shí)，調(diào)用本地存儲(chǔ)API

引入地圖、使用羅盤(pán)、調(diào)用支付、調(diào)用掃碼等等功能都可以直接使用

UI庫(kù)方面，框架自然帶有自家weui庫(kù)加成

并且在使用這些API時(shí)，你不用再去顧慮瀏覽器兼容性，不用擔(dān)心生產(chǎn)環(huán)境中出現(xiàn)不可預(yù)料的奇妙BUG，可見(jiàn)微信小程序的開(kāi)發(fā)成本確實(shí)相比以往的web開(kāi)發(fā)低很多。

三、獲取系統(tǒng)級(jí)權(quán)限的不同。

微信小程序相對(duì)于HTML5 web應(yīng)用能獲得更多的系統(tǒng)權(quán)限，比如網(wǎng)絡(luò)通信狀態(tài)、數(shù)據(jù)緩存能力等，這些系統(tǒng)級(jí)權(quán)限都可以和微信小程序無(wú)縫銜接，也就是官方宣稱的擁有Native App的流暢性能，而這一點(diǎn)恰巧是HTML5 web應(yīng)用經(jīng)常被詬病的地方，這也是HTML5的大多應(yīng)用場(chǎng)景被定位在業(yè)務(wù)邏輯簡(jiǎn)單、功能單一的原因。

四、應(yīng)用在生產(chǎn)環(huán)境的運(yùn)行流暢度。

這條無(wú)論對(duì)于用戶還是開(kāi)發(fā)者來(lái)說(shuō)，都是最直觀的感受。長(zhǎng)久以來(lái)，當(dāng)HTML5應(yīng)用面對(duì)復(fù)雜的業(yè)務(wù)邏輯或者豐富的頁(yè)面交互時(shí)，它的體驗(yàn)總是不盡人意，需要不斷的對(duì)項(xiàng)目?jī)?yōu)化來(lái)提升用戶體驗(yàn)。但是由于微信小程序運(yùn)行環(huán)境獨(dú)立，盡管同樣用html+css+js去開(kāi)發(fā)，但配合微信的解析器最終渲染出來(lái)的是原生組件的效果，自然體驗(yàn)上將會(huì)更進(jìn)一步。請(qǐng)使用手機(jī)"掃一掃"x

前端ui框架排名

在前端項(xiàng)目開(kāi)發(fā)過(guò)程中，現(xiàn)在很少有人會(huì)使用原生的CSS來(lái)搭建頁(yè)面，總歸都會(huì)引入一些前端UI框架以減少代碼的書(shū)寫(xiě)。一般為了方便自己的使用，很多大公司都有自己的一套UI框架，同時(shí)也會(huì)把其開(kāi)源出來(lái)。下面就是最近經(jīng)常使用并且很流行的一些前端UI框架，總有一款適合你：

Mint UI

Mint UI是餓了么團(tuán)隊(duì)開(kāi)發(fā)的基于Vue .js的移動(dòng)端UI框架，它包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開(kāi)發(fā)需要。

WeUI

WeUI是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素。

Cube-ui

Cube-ui 是滴滴團(tuán)隊(duì)開(kāi)發(fā)的基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù)。支持按需引入和后編譯，輕量靈活；擴(kuò)展性強(qiáng)，可以方便地基于現(xiàn)有組件實(shí)現(xiàn)二次開(kāi)發(fā)。

iView UI

iView UI是一個(gè)強(qiáng)大的UI庫(kù)，基于vue，有很多實(shí)用的基礎(chǔ)組件比elementui的組件更豐富，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。使用單文件的 Vue 組件化開(kāi)發(fā)模式基于 npm + webpack + babel 開(kāi)發(fā)，支持 ES2015 高質(zhì)量、功能豐富友好的 API ，自由靈活地使用空間。

LayUI

LayUI是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架，遵循原生 HTML/CSS/JS 的書(shū)寫(xiě)與組織形式，門(mén)檻極低，拿來(lái)即用。其外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合界面的快速開(kāi)發(fā)。

ElementUI

Element是餓了么前端開(kāi)源維護(hù)的Vue UI組件庫(kù),組件齊全，基本涵蓋后臺(tái)所需的所有組件，文檔講解詳細(xì)，例子也很豐富。主要用于開(kāi)發(fā)PC端的頁(yè)面，是一個(gè)質(zhì)量比較高的Vue UI組件庫(kù)。

at-ui

at-ui 是一款阿里團(tuán)隊(duì)創(chuàng)建的基于 Vue 2.x 的前端 UI 組件庫(kù)，主要用于快速開(kāi)發(fā) PC 網(wǎng)站產(chǎn)品。它提供了一套 npm + webpack + babel 前端開(kāi)發(fā)工作流程，CSS 樣式獨(dú)立，即使采用不同的框架實(shí)現(xiàn)都能保持統(tǒng)一的 UI 風(fēng)格。

amaze UI

Amaze UI 是一個(gè)移動(dòng)優(yōu)先的跨屏前端框架。提供基礎(chǔ)樣式，網(wǎng)格，表格、表單、按鈕及常用組件樣式。是一個(gè)輕量級(jí)（所有 CSS 和 JS gzip 后 100 kB 左右）、?Mobile first?的前端框架

Vant UI

Vant UI是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的 Vue 組件庫(kù)，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過(guò) Vant，可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開(kāi)發(fā)效率。

Flutter

Flutter 是谷歌的移動(dòng)端 UI 框架，可在極短的時(shí)間內(nèi)構(gòu)建 Android 和 iOS 上高質(zhì)量的原生級(jí)應(yīng)用。 Flutter 可與現(xiàn)有代碼一起工作, 它被世界各地的開(kāi)發(fā)者和組織使用, 并且 Flutter 是免費(fèi)和開(kāi)源的.

ionic

Ionic既是一個(gè)CSS框架也是一個(gè)Javascript UI庫(kù),Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開(kāi)發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。它使用 JavaScript MVVM 框架和 AngularJS 來(lái)增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開(kāi)發(fā)者的共同選擇。