App相关技术以及打包
平时小伙伴们自己的博客网站只能在浏览器打开，但是有时候你想要制作自己独立个人博客app，宣传并推广自己的app，打造个人ip。如何把自己的web博客网站打包成安卓app？
1.开发App的相关技术使⽤
⽬前市⾯上的移动互联开发技术主要分为三种，NativeAPP（基于本地操
作系统运⾏）、Web APP（基于⼿机浏览器运⾏）与HybridApp（混合模
式移动应⽤）。
1.1.原⽣开发
原⽣开发⽬前的主流技术包含iOS与Android开发，使⽤的是Apple与
Google⾃家的开发语⾔。
Apple开发者⽹站
Android开发者⽹站
原⽣App开发特点：
- 每⼀种移动操作系统都需要独⽴的开发项⽬
- 每种平台都需要独⽴的开发语⾔。iOS(Objective-C, swift)，
Android(Kotlin，Java)
- 需要使⽤各⾃的软件开发包，开发⼯具以及各⾃的控
件;iOS(Xcode)，Android(Android Studio) - iOS开发对系统依赖性较强，只能在MacOS与iPadOS(21年九⽉后)系
统下进⾏编程上架
能⼒⽅⾯： - 能够与移动硬件设备的底层功能，⽐如个⼈信息，摄像头以及重⼒加
速器等等
获取⽅法 - 直接下载到设备
- 以独⽴的应⽤程序运⾏(并不需要浏览器)
- ⽤户必须⼿动去下载并安装这些原⽣App
- 有⼀些商店与卖场来帮助⽤户寻找你的App，⽬前app市场不计其数
版本控制
- ⽤户可以⾃由地选择是否更新软件版本，所以会出现不同⽤户同时使
⽤不同版本的情况
优势
- ⽐移动WebApp运⾏快
- ⼀些商店与卖场会帮助⽤户寻找原⽣App
- 官方⽅卖场的应⽤审核流程会保证让⽤户得到⾼质量以及安全的App
- 官⽅会发布很多开发⼯具或者⼈⼯⽀持来帮助你的开发
劣势
- 开发成本⾼，尤其是当需要多种移动设备来测试时
- 因为是不同的开发语⾔，所以开发，维护成本也⾼
- 因为⽤户使⽤的App版本不同，所以你维护起来很困难
- 官⽅卖场审核流程复杂且慢，会严重影响你的发布进程
1.2.Web App开发
使⽤前端技术进⾏App的开发，主要技术有H5，Vue等，相当于讲前端
技术放在原⽣的webView中去执⾏
Web App开发特点
- 因为运⾏在移动设备的浏览器上，所以只需要⼀个开发项⽬
- 这种应⽤可以使⽤HTML5,CSS3以及JavaScript以及服务器端语⾔来
完成（Java,Python,PHP等） - 这⾥没有标准的SDK，可以选择跨平台开发⼯具进⾏打包发布，⽐如
PhoneGap, Cordova等
能⼒⽅⾯
- 只能使⽤有限的移动硬件设备功能。
获取⽅法
- 从移动设备上的浏览器访问
- 不需要安装额外的软件
- 软件更新只需要服务器就够了
- 可以使⽤打包⼯具进⾏App打包，发布到iOS与Android软件市场
版本控制
- 所有的⽤户都是⽤同样的版本
优势 - HTML5具有很强的兼容性，原来必须要⽤原⽣技术去做的效果或者
功能现在基本都可以通过简单的 HTML5开发技术实现 - 跨平台开发
- 使⽤现有组件库或框架进⾏快速开发
- 开发成本低，掌握前端技术便可很快上⼿
- 如果你已经有了⼀个WebApp，你可以使⽤ responsive web design
来辅助改进
- 迭代更容易
劣势
- ⽆法使⽤很多移动硬件设备的独特功能
- 要同时⽀持多种移动设备的浏览器让开发维护的成本也不低
- 如果⽤户使⽤更多的新型浏览器，那问题就更不好处理了
1.3.混合式开发
是指介于web-app、native-app这两者之间的app，兼具“Native App良
好⽤户交互体验的优势”和“Web App跨平台开发的优势”。
混合式开发主流技术
React Native(facebook开源的基于reactJs的RN)
优点：
- 能够在Javascript和React的基础上获得完全⼀致的开发体验，构建
世界⼀流的原⽣APP。 - 仅需学习⼀次，编写任何平台。(Learn once, write anywhere)
缺点： - 初次学习成本⾼
- 必须在不同平台下写两套代码，依赖暴露的接⼝
⾕歌 Flutter(Flutter是⾕歌的移动UI框架, Dart 语⾔)
Flutter是⾕歌的移动UI框架，可以快速在iOS和Android上构建⾼质量
的原⽣⽤户界⾯。 Flutter可以与现 有的代码⼀起⼯作。
优点：
- 快速开发，Flutter的热重载可帮助您快速地进⾏测试、构建UI、
添加功能并更快地修复错误。在iOS 和Android模拟器或真机上可以
在亚秒内重载，并且不会丢失状态 - UI界⾯⽐较漂亮，使⽤Flutter内置美丽的Material Design和
Cupertino（iOS⻛格）widget、丰富的 motion API、平滑⽽⾃然的
滑动效果和平台感知，为您的⽤户带来全新体验。 - 不会原⽣可以直接开发
- 原⽣性能⽐较好
缺点：
- ⽬前仍然处于技术更新完善阶段
- 脱离不开原⽣，开发⼈员需要具备原⽣（Android、iOS）基础开
发能⼒ - 适配问题，开发⼯具版本升级后，修改量⼤
阿⾥weex(阿⾥巴巴开源的基于Vue.js)
Weex是2016年6⽉由阿⾥巴巴推出的⼀个动态化的⾼扩展跨平台解决
⽅案，⽀持iOS、安卓、YunOS及 Web等多端开发部署。
优点：
-
Weex 的结构是解耦的，渲染引擎与语法层是分开的，也不依赖任
何特定的前端框架 -
⽬前主要⽀持 Vue.js 和 Rax这两个前端框架。
-
渲染 Weex ⻚⾯时和渲染原⽣⻚⾯⼀样。
-
⼀套基础的内置组件
-
不需要安装复杂的环境，运⾏环境简洁、调试⼯具也还好，容易做
降级处理，特别适合开发单个⻚⾯
缺点：
- ⽂档更新不及时，资料不多
- 坑⽐较多，前端
2.使⽤HBuilderX打包Web App
这里推荐使用HBuilderX，当然用其他的也可以，但是因为从软件的用户体验上来讲，跟市面上的这些软件比起来。确实比较简单，比较好用，这个软件的体积非常的小，大概只有十几MB，也不需要你安装，你只需要下载下来解压就可以使用。尤其对初学者来讲，这个软件几乎不需要什么学习成本，就可以快速的掌握它。
下载HBuilderX⼯具，打包Web App https://www.dcloud.io/
打包步骤(以Vue为例)
1.在项⽬根⽬录下新建vue.config.js⽂件，写⼊如下配置
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static'
}
2.在src/router/index.js下，将路由history模式注释掉
3.在项⽬路径下执⾏命令npm run build，⽣成dist打包⽂件
4.打开HBuilder，新建项⽬，选择H5+App，输⼊项⽬名称，选择项⽬路
径，点击创建
5.了解⽬录结构
6.找打打包⽣成的dist⽂件，放⼊到项⽬中，替换已经存在的index.html⽂
件
7.基础配置
8.图标配置
9.如需配置App启动图⽚，可以⾃⾏配置
10.配置SDK
11.根据⾃⼰的需求，进⾏权限配置使⽤
12.App常⽤其他设置
13.源码视图
"statusbar":{ // 应⽤可视区域到系统状态栏下透明显示效果
"immersed": true
}
14.原⽣App-云打包
进⼊⽹站填写⼿机号验证
15.打包成功后，找到对应apk使⽤即可
链接直接打包成Apk 参考我这篇
使用android studio将网站打包成apk(可以直接使用替换为自己的网站连接即可)
参考
HBuilderX官方（App离线打包）：
https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android.html#versioncode
segmentfault博客：https://segmentfault.com/a/1190000040092971
CSDN博客：https://blog.csdn.net/PIOnly/article/details/125196697