004-基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter

知识点

1、APP架构-封装&原生态&H5&flutter等

2、小程序架构-Web&H5&JS&VUE框架等

APP应用开发架构

1、原生开发：安卓一般使用Java语言开发，当然现在也有Kotlin语言进行开发。如何开发就涉及到具体编程了，这里就不详说了。简单描述就是使用安卓提供的一系列控件来实现页面，复杂点的页面可以通过自定义控件来实现。

2、使用H5语言开发：使用H5开发的好处有很多，可多端复用，比如浏览器端，ios端，当然H5开发的体验是没有原生好的。结合我做过的项目来说，一般是这个页面需要分享出去的话，就用H5开发。

3、使用Flutter开发：Flutter是近年来谷歌推出的一款UI框架，使用dart语言进行开发，支持跨平台，weight渲染直接操作硬件层，体验可媲美原生。但是flutter技术比较新，生态还不完善，开发起来效率相对偏低。

4、常规Web开发：Web App软件开发简单地说，就是开发一个网站，然后加入app的壳。Web App一般非常小，内容都是app内的网页展示，受制于网页技术本身，可实现功能少，而且每次打开，几乎所有的内容都需要重新加载，所以反应速度慢，内容加载过多就容易卡死，用户体验差，而且app内的交互设计等非常有效。但开发周期长端，需要的技术人员少，成本低。

演示案例-APP应用开发架构

APP-开发架构-原生态-IDEA

原理

原生开发：安卓一般使用Java语言开发，当然现在也有kotlin语言进行开发。如何开发就涉及到具体编程了，这里就不详说了。简单描述就是使用安卓提供的一系列控件来实现页面，复杂点的页面可以通过自定义控件来实现。

演示

remusic项目源码

安全影响

安全影响：此类原生APP渗透测试就需要反编译+抓包+常规测试，从逆向的角度去分析逻辑设计安全

反编译
- 提取源码
- 提取源码中的资产
- 提取资产进行常规测试
抓包
- 抓数据包提取资产
- 资产类型常规测试

APP-开发架构-Web封装-封装平台

原理：Web App

常规Web开发：Web App软件开发简单地说，就是开发一个网站，然后加入app的壳。Web App一般非常小，内容都是app内的网页展示，受制于网页技术本身，可实现功能少，而且每次打开，几乎所有的内容都需要重新加载，所以反应速度慢，内容加载过多就容易卡死，用户体验差，而且app内的交互设计等非常有效。但开发周期长端，需要的技术人员少，成本低。

注：某些web页面无法直接适配封装平台，会出现界面不适配问题

演示：ShopXO源码程序+一门APP打包

使用ShopXO框架可以搭建一个网页商城

搭建后web页面如下图

使用一门小程序网页工具即可将web页面打包成app

到处apk安装包后安装如下图所示

安全影响

安全影响：其本身就是Web，可进行常规Web安全测试

APP-开发架构-H5+Vue+HBuilderX

原理

使用H5语言开发：使用H5开发的好处有很多，可多端复用，比如浏览器端、ios端、微信小程序、支付宝小程序，当然H5开发的体验是没有原生好的。结合我做过的项目来说，一般是这个页面需要分享出去的话，就用H5开发。

HBuilderX工具支持将H5开发的应用发布为APP、微信小程序、支付宝小程序等

演示

演示：HBuilderX案例

安全影响

安全影响：H5+Vue开发的App类似前面讲的前后端分离，一般测试API漏洞或JS框架安全问题以及JS前端测试

Js渗透
接口安全
框架安全

WX小程序-开发架构-Web封装-平台

原理：Web封装小程序

类似Web App，也可以将网页Web封装成小程序进行发布，注意需要微信开发者平台的开发者ID、开发者秘钥等信息才可

演示

演示：ShopXO源码程序+一门APP打包成微信小程序（略）

安全影响

安全影响：和常规Web安全测试类似

WX小程序-开发架构-H5&Vue-HBuilderX

原理

原理：同H5+Vue+HBuilderX开发APP，这里只是发布为微信小程序

演示

演示：HBuilderX案例（略）

安全影响

安全影响：API&JS框架安全问题&JS前端测试