小程序憑借其高曝光率、開發(fā)成本低、運行更流暢等優(yōu)勢和特點,一經(jīng)推出就被廣泛使用,面對小程序的火爆,自然而然地,就有很多開發(fā)者轉(zhuǎn)戰(zhàn)小程序領(lǐng)域,本文主要帶大家了解下小程序運行環(huán)境背后的故事,但對于想要學(xué)習(xí)了解這些內(nèi)部架構(gòu)來說,目前市面上的教程更多是告訴你如何使用現(xiàn)有規(guī)則開發(fā)一款小程序功能,少有說明白一套小程序內(nèi)部機制是如何運行起來的。本文我會詳細(xì)分享小程序的運行機制。
了解小程序的由來
在小程序沒有出來之前,最初微信WebView逐漸成為移動web重要入口,微信發(fā)布了一整套網(wǎng)頁開發(fā)工具包,稱之為 JS-SDK,給所有的 Web 開發(fā)者打開了一扇全新的窗戶,讓所有開發(fā)者都可以使用到微信的原生能力,去完成一些之前做不到或者難以做到的事情。
但JS-SDK 的模式并沒有解決使用移動網(wǎng)頁遇到的體驗不良的問題,比如受限于設(shè)備性能和網(wǎng)絡(luò)速度,會出現(xiàn)白屏的可能。因此又設(shè)計了一個增強版JS-SDK,也就是“微信 Web 資源離線存儲”,但在復(fù)雜的頁面上依然會出現(xiàn)白屏的問題,原因表現(xiàn)在頁面切換的生硬和點擊的遲滯感。這個時候需要一個 JS-SDK 所處理不了的,使用戶體驗更好的一個系統(tǒng),小程序應(yīng)運而生。
- 快速的加載
- 更強大的能力
- 原生的體驗
- 易用且安全的微信數(shù)據(jù)開放
- 高效和簡單的開發(fā)
小程序與普通網(wǎng)頁開發(fā)的區(qū)別
小程序的開發(fā)同普通的網(wǎng)頁開發(fā)相比有很大的相似性,小程序的主要開發(fā)語言也是 JAVAScript,但是二者還是有些差別的。
- 普通網(wǎng)頁開發(fā)可以使用各種瀏覽器提供的 DOM API,進行 DOM 操作,小程序的邏輯層和渲染層是分開的,邏輯層運行在 JSCore中,并沒有一個完整瀏覽器對象,因而缺少相關(guān)的DOM API和BOMAPI。
- 普通網(wǎng)頁開發(fā)渲染線程和腳本線程是互斥的,這也是為什么長時間的腳本運行可能會導(dǎo)致頁面失去響應(yīng),而在小程序中,二者是分開的,分別運行在不同的線程中。
- 網(wǎng)頁開發(fā)者在開發(fā)網(wǎng)頁的時候,只需要使用到瀏覽器,并且搭配上一些輔助工具或者編輯器即可。小程序的開發(fā)則有所不同,需要經(jīng)過申請小程序帳號、安裝小程序開發(fā)者工具、配置項目等等過程方可完成。
小程序運行機制
小程序啟動會有兩種情況,一種是「冷啟動」,一種是「熱啟動」。假如用戶已經(jīng)打開過某小程序,然后在一定時間內(nèi)再次打開該小程序,此時無需重新啟動,只需將后臺狀態(tài)的小程序切換到前臺,這個過程就是熱啟動;冷啟動指的是用戶首次打開或小程序被微信主動銷毀后再次打開的情況,此時小程序需要重新加載啟動。
- 小程序沒有重啟的概念
- 當(dāng)小程序進入后臺,客戶端會維持一段時間的運行狀態(tài),超過一定時間后,會被微信主動銷毀
小程序更新機制
小程序冷啟動時如果發(fā)現(xiàn)有新版本,將會異步下載新版本的代碼包,并同時用客戶端本地的包進行啟動,即新版本的小程序需要等下一次冷啟動才會應(yīng)用上。 如果需要馬上應(yīng)用最新版本,可以使用 wx.getUpdateManager API 進行處理。
小程序安全
作為開發(fā)者,無論是前端開發(fā)者,還是后端開發(fā)者,了解常見的安全問題,以及常見的解決方案是非常必要的。
1.反編譯
非常多原創(chuàng)的微信小程序,被技術(shù)人員通過反編譯技術(shù)或者工具,將完整的代碼反編譯出來。這項技術(shù)自小程序發(fā)布初期到現(xiàn)在都一直存在。多數(shù)開發(fā)者反編譯項目用作學(xué)習(xí),但也有不少公司,直接利用反編譯市場上的現(xiàn)有的小程序,快速搭建屬于自己的產(chǎn)品,謀取利益。
對于這樣的問題,微信官方并沒有做出太多反制措施。畢竟小程序模擬的是瀏覽器,一般的前端項目,在瀏覽器端右鍵即可查看源碼,在控制臺可以查看網(wǎng)絡(luò)請求等更加詳細(xì)的信息。
在小程序代碼中,不要寫入敏感數(shù)據(jù),將敏感數(shù)據(jù)全部放在服務(wù)端。客戶端要使用時,通過接口進行請求。反編譯后的代碼都是些前端樣式,這些并沒有太重要。畢竟一般的前端程序員復(fù)刻一個小程序項目,也只是時間問題。
2.接口鑒權(quán)
開發(fā)者很容易通過抓包,第三方工具等方式獲取到小程序的網(wǎng)絡(luò)請求。小程序開發(fā)者應(yīng)當(dāng)在后臺接口被調(diào)用時,對本次調(diào)用進行權(quán)限校驗,包括自建后臺接口和云函數(shù),否則容易發(fā)生越權(quán)問題和數(shù)據(jù)泄漏。
對于敏感數(shù)據(jù)、開發(fā)能力相關(guān)接口需要在后臺進行鑒權(quán),通常可檢驗openid,IP地址,自定義登錄態(tài)等信息。
鑒權(quán)的邏輯應(yīng)該放在后臺進行,不應(yīng)在小程序中以隱藏頁面、按鈕等方式來代替。
常見的鑒權(quán)示例如下:
//自建后臺鑒權(quán)
function actionDelete(){
$item_id = $_POST["item_id"];
$openid = $_POST["openid"];
$ip = $_SERVER['REMOTE_ADDR'];
$user_role = $_SESSION["user_role"];
if ($openid === "xxx" &&
$ip === "192.168.0.101" &&
$user_role === "admin") {
// 進行刪除操作
// ...
return 0;
} else {
// 記錄非法請求
// ...
return -1;
}
}
//云函數(shù)鑒權(quán)
exports.mAIn = async (event, context) => {
const { OPENID, AppID, UNIONID } = cloud.getWXContext();
if (OPENID === "xxx") {
// 進行刪除操作
// ...
} else {
// 記錄非法請求
// ...
}
}
3.代碼管理
當(dāng)使用 git、 svn 等版本管理工具時,會產(chǎn)生 .git 等目錄。某些編輯器或軟件也會在運行過程中生成臨時文件。若這些目錄或文件被帶到生產(chǎn)環(huán)境,則可能發(fā)生源碼泄漏。
4.內(nèi)容安全
對于包含用戶輸入內(nèi)容,如評論、修改昵稱、頭像等功能。開發(fā)者需要自行調(diào)用信息過濾接口,判定內(nèi)容是否有違規(guī)內(nèi)容。對于沒有配置相應(yīng)功能的小程序,會被警告然后限制搜索。我之前開發(fā)過的一款社區(qū)類目小程序就因為這個原因,被封禁了好久。
5.敏感數(shù)據(jù)安全
對于存儲在本地的敏感數(shù)據(jù),如用戶信息,openid等數(shù)據(jù),開發(fā)者應(yīng)當(dāng)對敏感數(shù)據(jù)自行加密存儲。
小程序雙線程架構(gòu)
什么是雙線程架構(gòu)?
一條線程負(fù)責(zé)處理邏輯層一條線程負(fù)責(zé)處理渲染層。線程之間通過native層通信。
為什么要選擇雙線程架構(gòu)?
1.最重要的點: 這個一個基于安全于管控的方案
2.其次:比純web更好的交互體驗,
3.原生版本迭代更為便捷 小程序選擇的是webview+原生組件的形式,hybrid方式,既享受到了webview頁面的低門檻和在線更新,