开源分享|如何解锁小程序开发？这份攻略请收好！

比起其他应用，由框架主体和框架页面组成的小程序相对容易上手。想解锁新技能、做出下一款“狼了个狼”吗？这些开源项目可以助你走出新手村、开启新副本。

开源框架 二开创作

一般来说，小程序相关的开发者社区或是开源平台中主要有两种框架：

1. UI 框架：提供不同样式的组件。开发者可以使用一些现成的样式，完成自己产品或应用的开发。
2. 基础框架：用于小程序的打包、编译和组件化等方面，让开发者在应用开发中更简单、方便地使用自己熟悉的方案。

下面是四个各具特色且功能强大的开发框架。

1. Tencent/wepy

仓库地址：

https://github.com/Tencent/wepy

Tencent/wepy是一款由腾讯官方开发的、让小程序支持组件化开发的框架。它对微信原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式，并通过预编译的手段让开发者可以在开发小程序时选择自己喜欢的开发风格。

wepy框架中最受欢迎的就是它的各种“预”功能了，不论是预编译、预加载还是预查询，都能大大提升开发效率。

举个例子，我在“page1” 写了一个倒计时，跳转到 “page2” 后发现倒计时仍然在进行。一般而言，我们请求数据是在“onLoad”中进行，但是小程序的“page 1”跳转到“page 2”再到“page 2” 的“onLoad”存在一个 300ms ~ 400ms 的延时，这个时间就会被浪费掉。

在这里wepy做了很棒的预加载优化，用于“page1” 主动传递数据给“page2”，比如“page2” 需要加载一份耗时很长的数据，我可以在“page1”空闲时先加载好，然后进入 “page2”直接使用。

下图就是一个“预加载数据”的实例，它扩展了页面生命周期，添加了“preload”事件，使得数据在“$redirect”的位置被主动调用。同时，给“onload”事件添加了一个参数，用于接收预加载的数据。

图1 Tencent/wepy中的数据预加载示例

经OpenSCA检测，该项目共包含3214个开源组件，其中11个风险等级为严重，54个风险等级为高危，14个风险等级为中危，共有50个漏洞。

图2 Tencent/wepy检测结果

2. youzan/vant-weapp

仓库地址：

https://github.com/youzan/vant-weapp

youzan/vant-weapp在整个开发周期内负责UI设计部分，于 2017 年开源， 是业界主流的移动端组件库之一，有丰富的组件可供挑选。使用它可以使小程序的整个搭建过程完全可视化，做到功能和美观兼备。

图3 youzan/vant-weapp组件库示例

经OpenSCA检测，该项目共包含1942个开源组件，其中2个风险等级为高危，共有3个漏洞。

图4 youzan/vant-weapp检测结果

3. dcloudio/uni-app

仓库地址：

https://github.com/dcloudio/uni-app

dcloudio/uni-app是一个本地编程自动跨平台适配的框架，亮点是“一端开发，多端覆盖” 。

它完备的功能体系和丰富的插件市场已经得到了阿里和腾讯的官方认证：阿里小程序提供的官方工具中内置了uni-app，腾讯课堂官方也制作了uni-app的培训视频。此外，星巴克、犯罪大师、CSDN的官方小程序就是用它开发的，广东、贵州、内蒙古等共37个省市的健康码小程序也是用它开发的。

下图是uni-app所提供的功能框架图，图中阐述了uni-app在不同平台上所具备的通用功能和各平台上的延伸功能。

图5 dcloudio/uni-app功能框架图

经OpenSCA检测，该项目共包含16463个开源组件，其中59个风险等级为严重，119个风险等级为高危，72个风险等级为中危，共有177个漏洞。

图6 dcloudio/uni-app检测结果

4. didi/chameleon

仓库地址：

https://github.com/didi/chameleon

chameleon是变色龙的意思，意味着此项目就像变色龙一样，能适应不同环境，提供跨端整体解决方案，“一端所见即多端所见”。

相对于上文提到的两个框架，没有可视化界面的chameleon对开发者的编程水平有更高的要求。纯代码的场景在带来挑战的同时但也具备更大的可能性和可玩性，可以不受框架中已提供的组件的限制，构建完全符合开发者设计和想象的小程序。

图7 didi/chameleon源文件包中的package列表

但是，使用chameleon必须安装它专用的IDE（用VS Code是不能编译的）并配置最新Java环境。用过Java的小伙伴们可能遇到过旧版本“卸载不完全”的情况，这会导致新版本安装不成功，带来一些麻烦。

经OpenSCA检测，该项目共包含20609个开源组件，其中259个风险等级为严重，538个风险等级为高危，289个风险等级为中危，共有158个漏洞。

图8 didi/chameleon检测结果

宝藏插件 开发帮手

1. haojy/weact

仓库地址：

https://github.com/haojy/weact

haojy/weact实现了用JSX和ES6或ES7来开发小程序，你可以在一个JSX文件中编写页面或组件，并把关联的JSX代码和引用包编译成小程序代码，然后在小程序开发者工具中调试代码。因为它使用了JSX和ES标准语法，所以可以轻松地把已有的JSX代码重构成小程序。

但是它的缺点也比较明显：不具备完整的组件库，很多想要的组件都需要自己从零编写，没有源码可以直接使用。换言之，我们可以暂且称它为“代码翻译器”。对于JSX功底深厚的开发者比较友好，可以用入门其他语言（或是了解要使用的框架）的时间，在自己擅长的领域从零搭建。

经OpenSCA检测，该项目共包含1083个开源组件，其中16个风险等级为严重，16个风险等级为高危，14个风险等级为中危，共有80个漏洞。

图9 haojy/weact检测结果

2. lypeer/Matchmaker

仓库地址：

https://github.com/lypeer/Matchmaker

在开发微信小程序的时候，WXML和JS之间如果要有事件响应的话，要先在WXML中用“bind***/catch***”标签绑定一个方法，然后去JS里面一个一个去把WXML里面定义的方法写出来。

图10 lypeer/Matchmaker操作示例

这个写空方法的过程其实很无聊，这个插件可以把WXML里面声明的方法直接注入到JS里面，自动生成代码，让开发者把时间和精力花在更有技术含量的地方。

经OpenSCA检测，该项目没有引入开源组件。

图11 lypeer/Matchmaker检测结果

使用OpenSCA治理开源风险

尝试使用这些项目或对它们进行二开前，记得使用OpenSCA进行一次软件成分分析，只需通过一条命令即可掌握项目中开源组件的漏洞及风险情况，还支持在本地输出JSON、HTML格式的检测报告及SPDX格式的SBOM清单。

除了上文展示的组件及漏洞结果概览，OpenSCA提供的HTML格式的报告中还会展示组件及漏洞详情。下图展示了OpenSCA对haojy/weact检出的一个高危漏洞的详情，包括漏洞的名称、风险等级、发布日期、利用难度及修复建议等内容。

图12 检测报告中的漏洞详情页

以上就是OpenSCA项目组整理的若干与小程序开发相关的开源项目，若您还有其他开源项目推荐或二开尝试，欢迎随时与我们分享~

感谢每一位开源社区成员对OpenSCA的支持和贡献。

OpenSCA的代码会在GitHub和Gitee持续迭代，欢迎Star和PR，成为我们的开源贡献者，也可提交问题或建议至Issues。我们会参考大家的建议不断完善OpenSCA开源项目，敬请期待更多功能的支持。

GitHub：

https://github.com/XmirrorSecurity/OpenSCA-cli/releases

Gitee：

https://gitee.com/XmirrorSecurity/OpenSCA-cli/releases

OpenSCA官网：

https://opensca.xmirror.cn/