小程式技術科普:執行機制&安全機制
接觸小程式有一段時間了,總得來說小程式開發門檻比較低,但其中基本的執行機制和原理還是要懂的。
瞭解小程式的由來
在小程式沒有出來之前,最初微信WebView逐漸成為移動web重要入口,微信釋出了一整套網頁開發工具包,稱之為 JS-SDK,給所有的 Web 開發者開啟了一扇全新的窗戶,讓所有開發者都可以使用到微信的原生能力,去完成一些之前做不到或者難以做到的事情。
但JS-SDK 的模式並沒有解決使用移動網頁遇到的體驗不良的問題,比如受限於裝置效能和網路速度,會出現白屏的可能。因此又設計了一個增強版JS-SDK,也就是“微信 Web 資源離線儲存”,但在複雜的頁面上依然會出現白屏的問題,原因表現在頁面切換的生硬和點選的遲滯感。這個時候需要一個 JS-SDK 所處理不了的,使使用者體驗更好的一個系統,小程式應運而生。
-
快速的載入
-
更強大的能力
-
原生的體驗
-
易用且安全的微信資料開放
-
高效和簡單的開發
小程式與普通網頁開發的區別
小程式的開發同普通的網頁開發相比有很大的相似性,小程式的主要開發語言也是 JavaScript,但是二者還是有些差別的。
-
普通網頁開發可以使用各種瀏覽器提供的 DOM API,進行 DOM 操作,小程式的邏輯層和渲染層是分開的,邏輯層執行在 JSCore中,並沒有一個完整瀏覽器物件,因而缺少相關的DOM API和BOMAPI。
-
-
普通網頁開發渲染執行緒和指令碼執行緒是互斥的,這也是為什麼長時間的指令碼執行可能會導致頁面失去響應,而在小程式中,二者是分開的,分別執行在不同的執行緒中。
-
-
網頁開發者在開發網頁的時候,只需要使用到瀏覽器,並且搭配上一些輔助工具或者編輯器即可。小程式的開發則有所不同,需要經過申請小程式帳號、安裝小程式開發者工具、配置專案等等過程方可完成。
小程式執行機制
小程式啟動會有兩種情況,一種是「冷啟動」,一種是「熱啟動」。假如使用者已經開啟過某小程式,然後在一定時間內再次開啟該小程式,此時無需重新啟動,只需將後臺狀態的小程式切換到前臺,這個過程就是熱啟動;冷啟動指的是使用者首次開啟或小程式被微信主動銷燬後再次開啟的情況,此時小程式需要重新載入啟動。
-
-
當小程式進入後臺,客戶端會維持一段時間的執行狀態,超過一定時間後,會被微信主動銷燬。
小程式更新機制
小程式冷啟動時如果發現有新版本,將會非同步下載新版本的程式碼包,並同時用客戶端本地的包進行啟動,即新版本的小程式需要等下一次冷啟動才會應用上。 如果需要馬上應用最新版本,可以使用 wx.getUpdateManager API 進行處理。
這也是為什麼現在小程式容器技術(如:
FinClip
)深受App開發者廣泛關注的原因(包括下述的小程式安全機制)
小程式安全
作為開發者,無論是前端開發者,還是後端開發者,瞭解常見的安全問題,以及常見的解決方案是非常必要的。
1.反編譯
非常多原創的微信小程式,被技術人員透過反編譯技術或者工具,將完整的程式碼反編譯出來。這項技術自小程式釋出初期到現在都一直存在。多數開發者反編譯專案用作學習,但也有不少公司,直接利用反編譯市場上的現有的小程式,快速搭建屬於自己的產品,謀取利益。
對於這樣的問題,微信官方並沒有做出太多反制措施。畢竟小程式模擬的是瀏覽器,一般的前端專案,在瀏覽器端右鍵即可檢視原始碼,在控制檯可以檢視網路請求等更加詳細的資訊。
在小程式程式碼中,不要寫入敏感資料,將敏感資料全部放在服務端。客戶端要使用時,透過介面進行請求。反編譯後的程式碼都是些前端樣式,這些並沒有太重要。畢竟一般的前端程式設計師復刻一個小程式專案,也只是時間問題。
2.介面鑑權
開發者很容易透過抓包,第三方工具等方式獲取到小程式的網路請求。小程式開發者應當在後臺介面被呼叫時,對本次呼叫進行許可權校驗,包括自建後臺介面和雲函式,否則容易發生越權問題和資料洩漏。
對於敏感資料、開發能力相關介面需要在後臺進行鑑權,通常可檢驗openid,IP地址,自定義登入態等資訊。
鑑權的邏輯應該放在後臺進行,不應在小程式中以隱藏頁面、按鈕等方式來代替。
常見的鑑權示例如下:
//自建後臺鑑權 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; } }//雲函式鑑權 exports.main = async (event, context) => { const { OPENID, APPID, UNIONID } = cloud.getWXContext(); if (OPENID === "xxx") { // 進行刪除操作 // ... } else { // 記錄非法請求 // ... } }
3.程式碼管理
當使用 git、 svn 等版本管理工具時,會產生 .git 等目錄。某些編輯器或軟體也會在執行過程中生成臨時檔案。若這些目錄或檔案被帶到生產環境,則可能發生原始碼洩漏。
4.內容安全
對於包含使用者輸入內容,如評論、修改暱稱、頭像等功能。開發者需要自行呼叫資訊過濾介面,判定內容是否有違規內容。對於沒有配置相應功能的小程式,會被警告然後限制搜尋。我之前開發過的一款社群類目小程式就因為這個原因,被封禁了好久。
5.敏感資料安全
對於儲存在本地的敏感資料,如使用者資訊,openid等資料,開發者應當對敏感資料自行加密儲存。
小程式雙執行緒架構
什麼是雙執行緒架構?
一條執行緒負責處理邏輯層一條執行緒負責處理渲染層。執行緒之間透過native層通訊。
為什麼要選擇雙執行緒架構?
1.最重要的點: 這個一個基於安全於管控的方案
2.其次:比純web更好的互動體驗,
3.原生版本迭代更為便捷 小程式選擇的是webview+原生元件的形式,hybrid方式,既享受到了webview頁面的低門檻和線上更新,?️可以使用部分流暢的native原生元件,並且最重要的是空對開發的內容進行一定程度按的管控,同時在安全問題從設計層面就予以瞭解決。
為什麼說小程式有著相對較好的互動體驗呢?
首先說小程式的互動體驗肯定是比不上原生app的,app的響應速度肯定是最快的,相對指的的h5 web,網頁開發的渲染執行緒和指令碼執行緒是互斥的,二者是共享一個執行緒的,也就是說在執行指令碼執行緒的時候可能會讓頁面失去響應,所以這也是為什麼我們在開發網頁的時候需要將script指令碼的引入放在body的後面然後winow.onload去知道已經渲染完的節點。而在小程式中渲染執行緒和邏輯(指令碼)執行緒相互獨立,不能直接干擾對方,渲染線層和邏輯執行緒可以同時執行。聯想一下,這是不是從設計層面就規避了react16推出fiber架構所為了解決的最重要的問題問題(一次大的更新任務會長時間佔據著當前執行緒的資源,導致頁面無法響應帶來的互動問題!)。
在版本迭代上小程式又有哪些優勢呢?
我們都知道原生渲染的體驗優勢,這也是為什麼會出現誇端框架的weex,react native ,flutter的框架去直接生成原生應用的方式來進行開發,但是小程式是依賴於宿主環境的,小程式的發版不可能說隨著微信的大版本去迭代,如果是這樣我覺得就和小程式分質治理的理念不合了,也會有很多的弊端,並且也不能發揮web的優勢。
那麼web的優勢是什麼呢?--答案是線上更新。--(有啥bug隨時修完!甚至產品經理都感知不到!),小程式也是線上更新,但是小程式比h5多了另外一項優勢--底層資源的動態注入。h5的指令碼資源都是透過請求獲取的,獲取完了之後還要解析,然後再去執行實際的業務層面的程式碼。而在小程式中在初始化的時候,native(原生層)就會將WXSDK(裝置資訊,hls流影片處理工具,基礎版本庫等)動態的載入注入到新開啟的頁面中,由於小程式的pageFrame(快速渲染設計)技術,在後續開啟的頁面中,直接讀取快取中準備資料,直接省去的解析的過程。小程式這些最佳化直接的效果是(包體積變小,減少了網路請求sdk的時間。)
小程式現在版本迭代的模式下,忽略微信稽核的環節的話,基本上可以做到99%使用者的線上更新。但是並不完全,在有新版本迭代的情況下,雖然微信不支援強制更新,但是我們可以在互動層面上,強提示互動讓使用者更新。但是不知何種原因(估計是使用者微信版本和小程式基礎庫版本的問題)無法做到100%,這是從後臺監控的sdk所反饋的資料。
如果這篇文章對你有幫助,歡迎點贊關注評論!多謝啦。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70021577/viewspace-2931451/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 淺談小程式執行機制
- Java技術分享:Java的執行機制Java
- java程式的執行機制Java
- JavaScript執行緒機制與事件機制JavaScript執行緒事件
- JavaScript執行機制JavaScript
- Javascript 執行機制JavaScript
- JavaScript的程式碼執行機制JavaScript
- 微信小程式開發記錄02_執行機制微信小程式
- 探索新技術機制
- Java程式執行記憶體機制Java記憶體
- 執行緒同步機制執行緒
- 理解Reacg執行機制
- Js執行機制圖JS
- js的執行機制JS
- requestAnimationFrame 執行機制探索requestAnimationFrame
- 探索JavaScript執行機制JavaScript
- SSM框架執行機制SSM框架
- java的執行機制Java
- from ... import ... 執行機制Import
- 微信小程式更新機制微信小程式
- Elasticsearch核心技術(五):搜尋API和搜尋執行機制ElasticsearchAPI
- 計算機病毒執行機制 (轉)計算機
- 【執行機制】 JavaScript的事件迴圈機制總結 eventLoopJavaScript事件OOP
- 圖解JS執行機制圖解JS
- js執行機制淺析JS
- Java的執行機制分析!Java
- js Event Loop 執行機制JSOOP
- React的setState執行機制React
- JavaScript中的執行機制JavaScript
- js執行機制詳解JS
- JS引擎的執行機制JS
- 比特幣執行機制比特幣
- javascript執行機制:Event LoopJavaScriptOOP
- JavaScript執行機制淺析JavaScript
- IIS 內部執行機制
- 淺聊java執行機制Java
- ConcurrentHashMap執行緒安全機制以及原始碼分析HashMap執行緒原始碼
- 快速失敗機制&失敗安全機制