首頁(yè)?>?知識?資訊?>?小程序簡(jiǎn)介,小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區別?>?正文

小程序簡(jiǎn)介,小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區別

2020/12/29 10:12:03 · 稿源:傳誠信

小程序簡(jiǎn)介

小程序是一種全新的連接用戶(hù)與服務(wù)的方式,它可以在微信內被便捷地獲取和傳播,同時(shí)具有出色的使用體驗。

小程序技術(shù)發(fā)展史

小程序并非憑空冒出來(lái)的一個(gè)概念。當微信中的 WebView 逐漸成為移動(dòng) Web 的一個(gè)重要入口時(shí),微信就有相關(guān)的 JS API 了。

代碼清單1-1 使用 WeixinJSBridge 預覽圖片

WeixinJSBridge.invoke('imagePreview',?{
????current:?'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
????urls:?[?//?所有圖片的URL列表,數組格式
????????'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
????????'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
????????'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
????]},?function(res)?{
????console.log(res.err_msg)})

代碼1-1是一個(gè)調用微信原生組件瀏覽圖片的JS API,相比于額外引入一個(gè)JS圖片預覽組件庫,這種調用方式顯得非常簡(jiǎn)潔和高效。

實(shí)際上,微信官方是沒(méi)有對外暴露過(guò)如此調用的,此類(lèi) API 最初是提供給騰訊內部一些業(yè)務(wù)使用,很多外部開(kāi)發(fā)者發(fā)現了之后,依葫蘆畫(huà)瓢地使用了,逐漸成為微信中網(wǎng)頁(yè)的事實(shí)標準。2015年初,微信發(fā)布了一整套網(wǎng)頁(yè)開(kāi)發(fā)工具包,稱(chēng)之為 JS-SDK,開(kāi)放了拍攝、錄音、語(yǔ)音識別、二維碼、地圖、支付、分享、卡券等幾十個(gè)API。給所有的 Web 開(kāi)發(fā)者打開(kāi)了一扇全新的窗戶(hù),讓所有開(kāi)發(fā)者都可以使用到微信的原生能力,去完成一些之前做不到或者難以做到的事情。

同樣是調用原生的瀏覽圖片,調用方式如代碼清單1-2所示。

代碼清單1-2 使用 JS-SDK 調用圖片預覽組件

wx.previewImage({
??current:?'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
??urls:?[?//?所有圖片的URL列表,數組格式
????'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
????'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
????'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
??],
??success:?function(res)?{
????console.log(res)
??}})

JS-SDK是對之前的 WeixinJSBridge 的一個(gè)包裝,以及新能力的釋放,并且由對內開(kāi)放轉為了對所有開(kāi)發(fā)者開(kāi)放,在很短的時(shí)間內獲得了極大的關(guān)注。從數據監控來(lái)看,絕大部分在微信內傳播的移動(dòng)網(wǎng)頁(yè)都使用到了相關(guān)的接口。

JS-SDK 解決了移動(dòng)網(wǎng)頁(yè)能力不足的問(wèn)題,通過(guò)暴露微信的接口使得 Web 開(kāi)發(fā)者能夠擁有更多的能力,然而在更多的能力之外,JS-SDK 的模式并沒(méi)有解決使用移動(dòng)網(wǎng)頁(yè)遇到的體驗不良的問(wèn)題。用戶(hù)在訪(fǎng)問(wèn)網(wǎng)頁(yè)的時(shí)候,在瀏覽器開(kāi)始顯示之前都會(huì )有一個(gè)白屏的過(guò)程,在移動(dòng)端,受限于設備性能和網(wǎng)絡(luò )速度,白屏會(huì )更加明顯。我們團隊把很多技術(shù)精力放置在如何幫助平臺上的Web開(kāi)發(fā)者解決這個(gè)問(wèn)題。因此我們設計了一個(gè) JS-SDK 的增強版本,其中有一個(gè)重要的功能,稱(chēng)之為“微信 Web 資源離線(xiàn)存儲”。

以下文字引用自?xún)炔康奈臋n(沒(méi)有最終對外開(kāi)放):

微信 Web 資源離線(xiàn)存儲是面向 Web 開(kāi)發(fā)者提供的基于微信內的 Web 加速方案。

通過(guò)使用微信離線(xiàn)存儲,Web 開(kāi)發(fā)者可借助微信提供的資源存儲能力,直接從微信本地加載 Web 資源而不需要再從服務(wù)端拉取,從而減少網(wǎng)頁(yè)加載時(shí)間,為微信用戶(hù)提供更優(yōu)質(zhì)的網(wǎng)頁(yè)瀏覽體驗。每個(gè)公眾號下所有 Web App 累計最多可緩存 5M 的資源。

這個(gè)設計有點(diǎn)類(lèi)似 HTML5 的 Application Cache,但在設計上規避了一些 Application Cache的不足。

在內部測試中,我們發(fā)現 離線(xiàn)存儲 能夠解決一些問(wèn)題,但對于一些復雜的頁(yè)面依然會(huì )有白屏問(wèn)題,例如頁(yè)面加載了大量的 CSS 或者是 JavaScript 文件。除了白屏,影響 Web 體驗的問(wèn)題還有缺少操作的反饋,主要表現在兩個(gè)方面:頁(yè)面切換的生硬和點(diǎn)擊的遲滯感。

微信面臨的問(wèn)題是如何設計一個(gè)比較好的系統,使得所有開(kāi)發(fā)者在微信中都能獲得比較好的體驗。這個(gè)問(wèn)題是之前的 JS-SDK 所處理不了的,需要一個(gè)全新的系統來(lái)完成,它需要使得所有的開(kāi)發(fā)者都能做到:

- 快速的加載

- 更強大的能力

- 原生的體驗

- 易用且安全的微信數據開(kāi)放

- 高效和簡(jiǎn)單的開(kāi)發(fā)

這就是小程序的由來(lái)。

小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區別

小程序的主要開(kāi)發(fā)語(yǔ)言是 JavaScript ,小程序的開(kāi)發(fā)同普通的網(wǎng)頁(yè)開(kāi)發(fā)相比有很大的相似性。對于前端開(kāi)發(fā)者而言,從網(wǎng)頁(yè)開(kāi)發(fā)遷移到小程序的開(kāi)發(fā)成本并不高,但是二者還是有些許區別的。

網(wǎng)頁(yè)開(kāi)發(fā)渲染線(xiàn)程和腳本線(xiàn)程是互斥的,這也是為什么長(cháng)時(shí)間的腳本運行可能會(huì )導致頁(yè)面失去響應,而在小程序中,二者是分開(kāi)的,分別運行在不同的線(xiàn)程中。網(wǎng)頁(yè)開(kāi)發(fā)者可以使用到各種瀏覽器暴露出來(lái)的 DOM API,進(jìn)行 DOM 選中和操作。而如上文所述,小程序的邏輯層和渲染層是分開(kāi)的,邏輯層運行在 JSCore 中,并沒(méi)有一個(gè)完整瀏覽器對象,因而缺少相關(guān)的DOM API和BOM API。這一區別導致了前端開(kāi)發(fā)非常熟悉的一些庫,例如 jQuery、 Zepto 等,在小程序中是無(wú)法運行的。同時(shí) JSCore 的環(huán)境同 NodeJS 環(huán)境也是不盡相同,所以一些 NPM 的包在小程序中也是無(wú)法運行的。

網(wǎng)頁(yè)開(kāi)發(fā)者需要面對的環(huán)境是各式各樣的瀏覽器,PC 端需要面對 IE、Chrome、QQ瀏覽器等,在移動(dòng)端需要面對Safari、Chrome以及 iOS、Android 系統中的各式 WebView 。而小程序開(kāi)發(fā)過(guò)程中需要面對的是兩大操作系統 iOS 和 Android 的微信客戶(hù)端,以及用于輔助開(kāi)發(fā)的小程序開(kāi)發(fā)者工具,小程序中三大運行環(huán)境也是有所區別的,如表1-1所示。

表1-1 小程序的運行環(huán)境

運行環(huán)境邏輯層渲染層
iOSJavaScriptCoreWKWebView
安卓V8chromium定制內核
小程序開(kāi)發(fā)者工具NWJSChrome WebView

網(wǎng)頁(yè)開(kāi)發(fā)者在開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候,只需要使用到瀏覽器,并且搭配上一些輔助工具或者編輯器即可。小程序的開(kāi)發(fā)則有所不同,需要經(jīng)過(guò)申請小程序帳號、安裝小程序開(kāi)發(fā)者工具、配置項目等等過(guò)程方可完成。

體驗小程序

開(kāi)發(fā)者可使用微信客戶(hù)端(6.7.2 及以上版本)掃碼下方小程序碼,體驗小程序。

查看小程序示例源碼


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門(mén)
  • 最新
客戶(hù)服務(wù)
咨詢(xún)熱線(xiàn)

010-62199213

24小時(shí)咨詢(xún)熱線(xiàn)

139-1050-5354