中英文企业网站php源码,wordpress背景特效,深圳有名的品牌设计公司,前端开发工具vscode平时小伙伴们自己的博客网站只能在浏览器打开#xff0c;但是有时候你想要制作自己独立个人博客app#xff0c;宣传并推广自己的app#xff0c;打造个人ip。如何把自己的web博客网站打包成安卓app#xff1f;
1.开发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(KotlinJava)
需要使⽤各⾃的软件开发包开发⼯具以及各⾃的控 件;iOS(Xcode)Android(Android Studio)iOS开发对系统依赖性较强只能在MacOS与iPadOS(21年九⽉后)系 统下进⾏编程上架 能⼒⽅⾯能够与移动硬件设备的底层功能⽐如个⼈信息摄像头以及重⼒加 速器等等 获取⽅法直接下载到设备以独⽴的应⽤程序运⾏(并不需要浏览器)⽤户必须⼿动去下载并安装这些原⽣App有⼀些商店与卖场来帮助⽤户寻找你的App⽬前app市场不计其数
版本控制
⽤户可以⾃由地选择是否更新软件版本所以会出现不同⽤户同时使 ⽤不同版本的情况
优势
⽐移动WebApp运⾏快⼀些商店与卖场会帮助⽤户寻找原⽣App官方⽅卖场的应⽤审核流程会保证让⽤户得到⾼质量以及安全的App官⽅会发布很多开发⼯具或者⼈⼯⽀持来帮助你的开发
劣势
开发成本⾼尤其是当需要多种移动设备来测试时因为是不同的开发语⾔所以开发维护成本也⾼因为⽤户使⽤的App版本不同所以你维护起来很困难官⽅卖场审核流程复杂且慢会严重影响你的发布进程
1.2.Web App开发
使⽤前端技术进⾏App的开发主要技术有H5Vue等相当于讲前端 技术放在原⽣的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和 CupertinoiOS⻛格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新建项⽬选择H5App输⼊项⽬名称选择项⽬路 径点击创建 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
