原生App云打包

1.开发App的相关技术使⽤

⽬前市⾯上的移动互联开发技术主要分为三种&＃xff1a;
NativeAPP&＃xff08;基于本地操作系统运⾏&＃xff09; Web APP&＃xff08;基于⼿机浏览器运⾏&＃xff09; HybridApp&＃xff08;混合模式移动应⽤&＃xff09;

1.1.原⽣开发

原⽣开发⽬前的主流技术包含iOS与Android开发&＃xff0c;使⽤的是Apple与 Google⾃家的开发语⾔。 Apple开发者⽹站
Android开发者⽹站 原⽣App开发特点&＃xff1a;

• 每⼀种移动操作系统都需要独⽴的开发项⽬
• 每种平台都需要独⽴的开发语⾔。iOS(Objective-C, swift)&＃xff0c; Android(Kotlin&＃xff0c;Java)
• 需要使⽤各⾃的软件开发包&＃xff0c;开发⼯具以及各⾃的控 件;iOS(Xcode)&＃xff0c;Android(Android Studio)
• iOS开发对系统依赖性较强&＃xff0c;只能在MacOS与iPadOS(21年九⽉后)系 统下进⾏编程上架 能⼒⽅⾯&＃xff1a;
• 能够与移动硬件设备的底层功能&＃xff0c;⽐如个⼈信息&＃xff0c;摄像头以及重⼒加 速器等等 获取⽅法
• 直接下载到设备
• 以独⽴的应⽤程序运⾏(并不需要浏览器)
• ⽤户必须⼿动去下载并安装这些原⽣App
• 有⼀些商店与卖场来帮助⽤户寻找你的App&＃xff0c;⽬前app市场不计其数 版本控制
• ⽤户可以⾃由地选择是否更新软件版本&＃xff0c;所以会出现不同⽤户同时使 ⽤不同版本的情况 优势
• ⽐移动WebApp运⾏快
• ⼀些商店与卖场会帮助⽤户寻找原⽣App
• 官⽅卖场的应⽤审核流程会保证让⽤户得到⾼质量以及安全的App
• 官⽅会发布很多开发⼯具或者⼈⼯⽀持来帮助你的开发 劣势
• 开发成本⾼&＃xff0c;尤其是当需要多种移动设备来测试时
• 因为是不同的开发语⾔&＃xff0c;所以开发&＃xff0c;维护成本也⾼
• 因为⽤户使⽤的App版本不同&＃xff0c;所以你维护起来很困难
• 官⽅卖场审核流程复杂且慢&＃xff0c;会严重影响你的发布进程

1.2.Web App开发 使⽤前端技术进⾏App的开发&＃xff0c;主要技术有H5&＃xff0c;Vue等&＃xff0c;相当于讲前端 技术放在原⽣的webView中去执⾏ Web App开发特点

• 因为运⾏在移动设备的浏览器上&＃xff0c;所以只需要⼀个开发项⽬
• 这种应⽤可以使⽤HTML5,CSS3以及Javascript以及服务器端语⾔来 完成&＃xff08;Java,Python,PHP等&＃xff09;
• 这⾥没有标准的SDK&＃xff0c;可以选择跨平台开发⼯具进⾏打包发布&＃xff0c;⽐如 PhoneGap, Cordova等 能⼒⽅⾯
• 只能使⽤有限的移动硬件设备功能。 获取⽅法
• 从移动设备上的浏览器访问
• 不需要安装额外的软件
• 软件更新只需要服务器就够了
• 可以使⽤打包⼯具进⾏App打包&＃xff0c;发布到iOS与Android软件市场 版本控制
• 所有的⽤户都是⽤同样的版本 优势
• HTML5具有很强的兼容性&＃xff0c;原来必须要⽤原⽣技术去做的效果或者 功能现在基本都可以通过简单的 HTML5开发技术实现
• 跨平台开发
• 使⽤现有组件库或框架进⾏快速开发
• 开发成本低&＃xff0c;掌握前端技术便可很快上⼿
• 如果你已经有了⼀个WebApp&＃xff0c;你可以使⽤ responsive web design 来辅助改进
• 迭代更容易 劣势
• ⽆法使⽤很多移动硬件设备的独特功能
• 要同时⽀持多种移动设备的浏览器让开发维护的成本也不低
• 如果⽤户使⽤更多的新型浏览器&＃xff0c;那问题就更不好处理了

1.3.混合式开发 是指介于web-app、native-app这两者之间的app&＃xff0c;兼具“Native App良 好⽤户交互体验的优势”和“Web App跨平台开发的优势”。 混合式开发主流技术 React
Native(facebook开源的基于reactJs的RN) 优点&＃xff1a;

• 能够在Javascript和React的基础上获得完全⼀致的开发体验&＃xff0c;构建 世界⼀流的原⽣APP。
• 仅需学习⼀次&＃xff0c;编写任何平台。(Learn once, write anywhere) 缺点&＃xff1a;
• 初次学习成本⾼
• 必须在不同平台下写两套代码&＃xff0c;依赖暴露的接⼝ ⾕歌 Flutter(Flutter是⾕歌的移动UI框架, Dart 语⾔) Flutter是⾕歌的移动UI框架&＃xff0c;可以快速在iOS和Android上构建⾼质量 的原⽣⽤户界⾯。 Flutter可以与现
  有的代码⼀起⼯作。 优点&＃xff1a;
• 快速开发&＃xff0c;Flutter的热重载可帮助您快速地进⾏测试、构建UI、 添加功能并更快地修复错误。在iOS 和Android模拟器或真机上可以 在亚秒内重载&＃xff0c;并且不会丢失状态
• UI界⾯⽐较漂亮&＃xff0c;使⽤Flutter内置美丽的Material Design和 Cupertino&＃xff08;iOS⻛格&＃xff09;widget、丰富的 motion API、平滑⽽⾃然的 滑动效果和平台感知&＃xff0c;为您的⽤户带来全新体验。
• 不会原⽣可以直接开发
• 原⽣性能⽐较好 缺点&＃xff1a;
• ⽬前仍然处于技术更新完善阶段
• 脱离不开原⽣&＃xff0c;开发⼈员需要具备原⽣&＃xff08;Android、iOS&＃xff09;基础开 发能⼒
• 适配问题&＃xff0c;开发⼯具版本升级后&＃xff0c;修改量⼤ 阿⾥weex(阿⾥巴巴开源的基于Vue.js) Weex是2016年6⽉由阿⾥巴巴推出的⼀个动态化的⾼扩展跨平台解决 ⽅案&＃xff0c;⽀持iOS、安卓、YunOS及 Web等多端开发部署。 优点&＃xff1a;
• Weex 的结构是解耦的&＃xff0c;渲染引擎与语法层是分开的&＃xff0c;也不依赖任 何特定的前端框架
• ⽬前主要⽀持 Vue.js 和 Rax 这两个前端框架。
• 渲染 Weex ⻚⾯时和渲染原⽣⻚⾯⼀样。
• ⼀套基础的内置组件
• 不需要安装复杂的环境&＃xff0c;运⾏环境简洁、调试⼯具也还好&＃xff0c;容易做 降级处理&＃xff0c;特别适合开发单个⻚⾯

缺点&＃xff1a;

• 坑⽐较多&＃xff0c;前端
  2.使⽤HBuilderX打包Web App 下载HBuilderX⼯具&＃xff0c;打包Web App https://www.dcloud.io/

打包步骤

1.在项⽬根⽬录下新建vue.config.js⽂件&＃xff0c;写⼊如下配置
2.在src/router/index.js下&＃xff0c;将路由history模式注释掉
module.exports &＃61; {
publicPath: ‘./’,
outputDir: ‘dist’,
assetsDir: ‘static’
}
3.在项⽬路径下执⾏命令npm run build&＃xff0c;⽣成dist打包⽂件
4.打开HBuilder&＃xff0c;新建项⽬&＃xff0c;选择H5&＃43;App&＃xff0c;输⼊项⽬名称&＃xff0c;选择项⽬路
径&＃xff0c;点击创建
5.了解⽬录结构
6.找打打包⽣成的dist⽂件&＃xff0c;放⼊到项⽬中&＃xff0c;替换已经存在的index.html⽂
件
7.基础配置
8.图标配置
9.如需配置App启动图⽚&＃xff0c;可以⾃⾏配置
10.配置SDK
11.根据⾃⼰的需求&＃xff0c;进⾏权限配置使⽤
12.App常⽤其他设置
13.源码视图
“statusbar”:{ // 应⽤可视区域到系统状态栏下透明显示效果
“immersed”: true
}
14.原⽣App-云打包

进⼊⽹站填写⼿机号验证
15.打包成功后&＃xff0c;找到对应apk使⽤即可