首頁 web前端 前端問答 微信小程式是html5嗎

微信小程式是html5嗎

Sep 13, 2021 pm 03:39 PM
html5 微信小程式

微信小程式不是html5,它是根據微信的獨立的開發模式,能過節約人們的開發本錢與開發週期。微信小程式和html5的差別:1、運作環境的不同;2、開發成本的不同;3、取得系統級權限的不同;4、應用在生產環境的運作流暢度不同。

微信小程式是html5嗎

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

HTML英文全稱為Hyper Text Markup Language,即超文本標記語言。 HTML5是一種技術,可附的外殼是瀏覽器,而小程式是基於微信的一種不需要下載安裝即可使用的應用程式。

以下從「前端開發」的角度來看,微信小程式和HTML5也存在著多方面的差異。概括來說有以下四個面向的差別!

第一條、運作環境的不同

傳統的HTML5的運作環境是瀏覽器,包括webview,而微信小程式的運作環境並非完整的瀏覽器。大家注意,我這裡寫的是“非完整的瀏覽器”,有以下幾個原因:

小程式的開發過程中會用到HTML5相關的技術(並非全部)。

小程式最後的發布上線需要微信審核,微信在不更新自身軟體的情況下可以將小程式更新到自身軟體內,這就聯想到了ReactNative框架。並且已經有開發者在微信小程式的開發工具原始碼中發現使用了react和NodeWebkit函式庫。

官方文件中著重強調了腳本內是無法使用瀏覽器中常用的window對象和document對象(基於這一點,像zepto/jQuery這種操作dom的庫就被完全拋棄了)。

所以我認為,小程式的運作環境很有可能是微信開發團隊基於瀏覽器核心完全重構的內建解析器,針對小程式專門做了最佳化,配合自己定義的開發語言標準,提升了小程式的效能。

不過由於微信給開發者提供了開發工具,而開發工具中也內建了程式設計、調試、開發環境、發佈於一身,我們也不用再探討它的最終運行環境了,只要按照官方文檔進行開發就可以了。並且從微信團隊給開發者提供開發工具這一舉動,讓我聯想到了蘋果給開發者提供的X-CODE開發工具,可以想像微信的“野心”可見一斑

##第二條、開發成本的不同

這裡我提出了一個問題,當我們面對一個HTML5web開發需求時,我們需要考慮什麼呢?

拋去開發工具(vscode、sublimtext、Atom等)不談,大到前端框架(Angular、react、vue、backbone等)、模組管理工具(Webpack 、Browserify 等)、任務管理工具( Grunt、Gulp等),小到UI函式庫選擇、介面呼叫工具(ajax、Fetch Api等)、瀏覽器相容性等都要我們一一考略,再不濟用jqery插件寫H5,也要在開發過程中去尋找合適的jquery插件來配合項目。

儘管這些工具可客製化非常高,並且提高了開發者的開發效率。但小編相信專案開發的配置工作已經消耗了不少精力,儘管大部分開發者都有自己的配置模板。長久以來對於專案中使用的各種外部函式庫的版本迭代、版本升級所產生的成本應該也不低。

而當我們面對一個微信小程式的開發需求時,我們需要考慮什麼呢?微信團隊提供了開發者工具,並且規範了開發標準,前端常見的HTML、CSS變成了微信自訂的WXML、WXSS,WXML中儘管全部是自訂標籤,但官方文件中都有明確的使用介紹,相信上手應該是非常容易的;WXSS、JSON和js檔案中的寫法稍有限制,但整體相差不多。在統一了這些標準之後,作為一個開發者,你會發現,自己只要專注於寫程式就可以了:

  • 當需要呼叫後端介面時,呼叫發起請求API;

  • 當需要上傳下載時,呼叫上傳下載API;

  • #當需要資料快取時,呼叫本機儲存API;

  • 引入地圖、使用羅盤、呼叫支付、呼叫掃碼等等功能都可以直接使用;

  • UI函式庫方面,框架自然帶有自家weui庫加成;

並且在使用這些API時,你不用再去顧慮瀏覽器相容性,不用擔心生產環境中出現不可預料的奇妙BUG,可見微信小程式的開發成本確實相比以往的web開發低很多。

第三條、取得系統級權限的不同

微信小程式相對於HTML5 web應用程式能獲得更多的系統權限,例如網路通訊狀態、數據快取能力等,這些系統級權限都可以和微信小程式無縫銜接,也就是官方宣稱的擁有Native App的流暢性能,而這一點恰好是HTML5 web應用經常被詬病的地方,這也是HTML5的大多應用場景被定位在業務邏輯簡單、功能單一的原因。

第四條、應用在生產環境的運作流暢度不同。

最容易區分小程式與H5的一點, 開啟H5,實際上是開啟一個網頁,而網頁需要在瀏覽器中渲染,面對複雜的業務邏輯或豐富的頁面互動時頁面會卡頓。

而微信小程序,直接在微信上運行,省去了透過瀏覽器渲染的步驟,因此,在微信中使用小程序,才會比H5流暢很多。除了首次開啟需要幾秒鐘的載入時間外,小程式各頁面的切換、跳轉等體驗已經媲美原生App,非常順暢。

小程式不能跳轉外部鏈接,H5沒有限制。

概括來說、小程式相對H5有著開發成本低、功能更豐富、使用者體驗更佳的優點。 (缺點:微信做了很多限制,很多東西不能自訂)

以上就是我總結的微信小程式跟HTML5的差別。微信現在月活9億,特別是微信推出大眾號今後,微信的月活也大幅上升,這就為微信小程式帶了十分便利的入口。以9億為基數,奠定了微信小程式的根底。

微信小程式不是HTML5,它是根據微信的獨立的開發模式,能過節約人們的開發本錢與開發週期。

更多程式相關知識,請造訪:程式設計影片! !

以上是微信小程式是html5嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles