開源分享|如何解鎖小程序開發(fā)？這份攻略請收好！
據(jù)騰訊2022年第三季度財報，僅微信就已有近5億個小程序，DAU（日活用戶）也已經(jīng)突破了6億；除卻激增的用戶量，2022年使用云開發(fā)的小程序開發(fā)者也突破了300萬。
比起其他應用，由框架主體和框架頁面組成的小程序相對容易上手。想解鎖新技能、做出下一款“狼了個狼”嗎？這些開源項目可以助你走出新手村、開啟新副本。一般來說，小程序相關(guān)的開發(fā)者社區(qū)或是開源平臺中主要有兩種框架：
UI 框架：提供不同樣式的組件。開發(fā)者可以使用一些現(xiàn)成的樣式，完成自己產(chǎn)品或應用的開發(fā)。
基礎(chǔ)框架：用于小程序的打包、編譯和組件化等方面，讓開發(fā)者在應用開發(fā)中更簡單、方便地使用自己熟悉的方案。
下面是四個各具特色且功能強大的開發(fā)框架。
1. Tencent/wepy
倉庫地址：
https://github.com/Tencent/wepy
Tencent/wepy是一款由騰訊官方開發(fā)的、讓小程序支持組件化開發(fā)的框架。它對微信原生小程序的開發(fā)模式進行了再次封裝，更貼近于 MVVM 架構(gòu)模式，并通過預編譯的手段讓開發(fā)者可以在開發(fā)小程序時選擇自己喜歡的開發(fā)風格。
wepy框架中最受歡迎的就是它的各種“預”功能了，不論是預編譯、預加載還是預查詢，都能大大提升開發(fā)效率。
舉個例子，我在“page1” 寫了一個倒計時，跳轉(zhuǎn)到 “page2” 后發(fā)現(xiàn)倒計時仍然在進行。一般而言，我們請求數(shù)據(jù)是在“onLoad”中進行，但是小程序的“page 1”跳轉(zhuǎn)到“page 2”再到“page 2” 的“onLoad”存在一個 300ms ~ 400ms 的延時，這個時間就會被浪費掉。
在這里wepy做了很棒的預加載優(yōu)化，用于“page1” 主動傳遞數(shù)據(jù)給“page2”，比如“page2” 需要加載一份耗時很長的數(shù)據(jù)，我可以在“page1”空閑時先加載好，然后進入 “page2”直接使用。
下圖就是一個“預加載數(shù)據(jù)”的實例，它擴展了頁面生命周期，添加了“preload”事件，使得數(shù)據(jù)在“$redirect”的位置被主動調(diào)用。同時，給“onload”事件添加了一個參數(shù)，用于接收預加載的數(shù)據(jù)。
圖1 Tencent/wepy中的數(shù)據(jù)預加載示例
經(jīng)OpenSCA檢測，該項目共包含3214個開源組件，其中11個風險等級為嚴重，54個風險等級為高危，14個風險等級為中危，共有50個漏洞。
圖2 Tencent/wepy檢測結(jié)果
2. youzan/vant-weapp倉庫地址：
https://github.com/youzan/vant-weapp
youzan/vant-weapp在整個開發(fā)周期內(nèi)負責UI設(shè)計部分，于 2017 年開源， 是業(yè)界主流的移動端組件庫之一，有豐富的組件可供挑選。使用它可以使小程序的整個搭建過程完全可視化，做到功能和美觀兼?zhèn)洹?/p> 圖3 youzan/vant-weapp組件庫示例
經(jīng)OpenSCA檢測，該項目共包含1942個開源組件，其中2個風險等級為高危，共有3個漏洞。
圖4 youzan/vant-weapp檢測結(jié)果
3. dcloudio/uni-app倉庫地址：
https://github.com/dcloudio/uni-app
dcloudio/uni-app是一個本地編程自動跨平臺適配的框架，亮點是“一端開發(fā)，多端覆蓋” 。
它完備的功能體系和豐富的插件市場已經(jīng)得到了阿里和騰訊的官方認證：阿里小程序提供的官方工具中內(nèi)置了uni-app，騰訊課堂官方也制作了uni-app的培訓視頻。此外，星巴克、犯罪大師、CSDN的官方小程序就是用它開發(fā)的，廣東、貴州、內(nèi)蒙古等共37個省市的健康碼小程序也是用它開發(fā)的。
下圖是uni-app所提供的功能框架圖，圖中闡述了uni-app在不同平臺上所具備的通用功能和各平臺上的延伸功能。
圖5 dcloudio/uni-app功能框架圖
經(jīng)OpenSCA檢測，該項目共包含16463個開源組件，其中59個風險等級為嚴重，119個風險等級為高危，72個風險等級為中危，共有177個漏洞。
圖6 dcloudio/uni-app檢測結(jié)果
4. didi/chameleon倉庫地址：
https://github.com/didi/chameleon
cmeleon是變色龍的意思，意味著此項目就像變色龍一樣，能適應不同環(huán)境，提供跨端整體解決方案，“一端所見即多端所見”。
相對于上文提到的兩個框架，沒有可視化界面的chameleon對開發(fā)者的編程水平有更高的要求。純代碼的場景在帶來挑戰(zhàn)的同時但也具備更大的可能性和可玩性，可以不受框架中已提供的組件的限制，構(gòu)建完全符合開發(fā)者設(shè)計和想象的小程序。
圖7 didi/chameleon源文件包中的package列表
但是，使用chameleon必須安裝它專用的IDE（用VS Code是不能編譯的）并配置最新java環(huán)境。用過Java的小伙伴們可能遇到過舊版本“卸載不完全”的情況，這會導致新版本安裝不成功，帶來一些麻煩。
經(jīng)OpenSCA檢測，該項目共包含20609個開源組件，其中259個風險等級為嚴重，538個風險等級為高危，289個風險等級為中危，共有158個漏洞。
圖8 didi/chameleon檢測結(jié)果
寶藏插件 開發(fā)幫手1. haojy/weact
倉庫地址：
https://github.com/haojy/weact
haojy/weact實現(xiàn)了用JSX和ES6或ES7來開發(fā)小程序，你可以在一個JSX文件中編寫頁面或組件，并把關(guān)聯(lián)的JSX代碼和引用包編譯成小程序代碼，然后在小程序開發(fā)者工具中調(diào)試代碼。因為它使用了JSX和ES標準語法，所以可以輕松地把已有的JSX代碼重構(gòu)成小程序。
但是它的缺點也比較明顯：不具備完整的組件庫，很多想要的組件都需要自己從零編寫，沒有源碼可以直接使用。換言之，我們可以暫且稱它為“代碼翻譯器”。對于JSX功底深厚的開發(fā)者比較友好，可以用入門其他語言（或是了解要使用的框架）的時間，在自己擅長的領(lǐng)域從零搭建。
經(jīng)OpenSCA檢測，該項目共包含1083個開源組件，其中16個風險等級為嚴重，16個風險等級為高危，14個風險等級為中危，共有80個漏洞。
圖9 haojy/weact檢測結(jié)果
2. lypeer/Matchmake
倉庫地址：
https://github.com/lypeer/Matchmaker
在開發(fā)微信小程序的時候，WXML和JS之間如果要有事件響應的話，要先在WXML中用“bind***/catch***”標簽綁定一個方法，然后去JS里面一個一個去把WXML里面定義的方法寫出來。
圖10 lypeer/Matchmaker操作示例
這個寫空方法的過程其實很無聊，這個插件可以把WXML里面聲明的方法直接注入到JS里面，自動生成代碼，讓開發(fā)者把時間和精力花在更有技術(shù)含量的地方。
經(jīng)OpenSCA檢測，該項目沒有引入開源組件。
圖11 lypeer/Matchmaker檢測結(jié)果
使用OpenSCA治理開源風險嘗試使用這些項目或?qū)λ鼈冞M行二開前，記得使用OpenSCA進行一次軟件成分分析，只需通過一條命令即可掌握項目中開源組件的漏洞及風險情況，還支持在本地輸出JSON、HTML格式的檢測報告及SPDX格式的SBOM清單。
除了上文展示的組件及漏洞結(jié)果概覽，OpenSCA提供的HTML格式的報告中還會展示組件及漏洞詳情。下圖展示了OpenSCA對haojy/weact檢出的一個高危漏洞的詳情，包括漏洞的名稱、風險等級、發(fā)布日期、利用難度及修復建議等內(nèi)容。
圖12 檢測報告中的漏洞詳情頁
以上就是OpenSCA項目組整理的若干與小程序開發(fā)相關(guān)的開源項目，若您還有其他開源項目推薦或二開嘗試，歡迎隨時與我們分享~
OpenSCA的代碼會在GitHub和Gitee持續(xù)迭代，歡迎Star和PR，成為我們的開源貢獻者，也可提交問題或建議至Issues。我們會參考大家的建議不斷完善OpenSCA開源項目，敬請期待更多功能的支持。
GitHub：
https://github.com/XmirrorSecurity/OpenSCA-cli/releases
Gitee：
https://gitee.com/XmirrorSecurity/OpenSCA-cli/releases
OpenSCA官網(wǎng)：
https://opensca.xmirror.cn/
掃碼聯(lián)系秋月@OpenSCA
加入OpenSCA社區(qū)技術(shù)交流群
版權(quán)聲明：
本站所有文章和圖片均來自用戶分享和網(wǎng)絡收集，文章和圖片版權(quán)歸原作者及原出處所有，僅供學習與參考，請勿用于商業(yè)用途，如果損害了您的權(quán)利，請聯(lián)系網(wǎng)站客服處理。
