笔记--移动App

已于 2022-03-25 14:00:38 修改
阅读量433 收藏 1
点赞数 1
文章标签： css3 css html
于 2022-03-25 14:00:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43488583/article/details/123734138
版权

移动App第1天

什么是混合移动App开发【重点】

  1. 苹果上的软件是如何开发出来的：使用的是 OC、或者使用Swift这门语言
  2. 安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发
  3. 苹果和安卓平台上共有的软件是如何开发出来的：腾讯招两套开发人员【开发组】，手机京东
  4. 前端移动 App（Application）开发技术，去开发手机端的应用程序；
  5. 前端的混合移动App开发技术，并没有使用 苹果 或 安卓 官方推荐的 开发平台和开发方式，而是抛弃了 官方提供的方式，使用 前端的独有的技术进行移动App开发体验；

什么是移动App开发：通俗的理解，就是把开发Web网站的技术（HTML+CSS+JS），通过某种方式，移植到移动App开发上进行使用，这种利用Web开发技术进行移动端开发体验的方式，叫做混合移动App开发！

关于移动App开发，需要知道的几个概念：

  • 原生开发：它的英文单词是（NativeApp）,指的就是使用 IOS、Android 官方提供的工具、开发平台、配套语言进行 手机App开发的方式；
  • 混合开发：（HybirdApp）就是使用前端已有的技术，HTML + CSS + JS ，然后再搭配一些相关的打包编译技术，就能够开发出一个手机App，安装到手机中进行使用；
  • 什么是App：App是（Application的缩写），意思是：可安装的应用程序；
  • App的分类：
    • 按照平台来划分：
      • PC端：浏览器、代码编辑器、PC端的游戏、听歌的、看视频的、聊天的
      • 移动端：手机QQ、手机微信、手机爱奇艺、亡者农药
    • 按照功能来划分：
      • 游戏：愤怒的小鸡仔、植物大战僵尸、亡者农药…LOL
      • 应用：非游戏类的软件，支付宝、陌陌、美团外卖、
  • App和Web的区别：
    • APP概念：App是（Application的缩写），意思是：可安装的应用程序；
    - 优点：流畅、稳定、基本上一些App都可以脱网运行，用户体验好；
- 缺点：不能跨平台
    • Web概念：特指那些基于浏览器的web网站（本质：就是网页）
    - 优点：可以跨平台（浏览器天生就是跨平台的）
- 缺点：没有App流畅、不稳定，受限于网速和网络

为什么要学混合App开发

从程序员的角度分析：

  1. 挣钱多（别人不会的你会，别人会的，你精通）
  2. 对于找工作来说：（React Native）市场需求量大，好找工作，提高我们的行业竞争力
  3. 能接触到前端流行的技术和框架（各大公司基本都再用React），注意：再React中我们全部都使用ES6语法（class）
  • 前端是一个永恒的行业???（只要世界上还有浏览器的存在，必然需要前端，只不过，随着时间的推移，技术更新换代，可能我们对新技术的要求会越来高）
  • 屌丝的崛起之路：只能做页面 -> Ajax前后台数据交互 -> Jquery、Bootstrap -> webApp -> 三大框架 -> 可以做手机混合App/桌面应用 -> 可以做手机原生App -> 将来或许可以发射火箭发射卫星发射导弹 -> 终极目标：统一全宇宙
  1. （搞前端App开发）能购置一批牛逼的设备【苹果笔记本、IOS测试机、安卓手机（三星的、华为、小米）】

从企业的角度分析:(选择合适自身的移动App开发方式)【重点】

  • 节省开发成本
  • 从工资上：尽最大的可能，压榨员工的剩余劳动力
  • 从时间上：因为 原生的安卓和IOS开发，它们的开发效率并不是很高，因为原生的代码复杂度比较高，因此原生的开发周期比较慢；如果采用移动App开发，那么，我们的开发周期会很短；因为 HTML + CSS + JS 足够简单；（对于前端开发APP来说，有两种方式，其中，比较早的一种，也是比较简单的一种，就是 先开发出一个网站， 然后再把网站运行一行打包的命令，就能得到一个 APP了）
  1. 市面上常见的App开发方式
  • WebApp：基于浏览器实现的，有特定功能的网站，称作WebApp
    • 例如：百度脑图、https://m.jd.com/、https://m.taobao.com/#index
    • 优点：跨平台
    • 缺点：依赖网络，有白屏效果，相对来说，用户体验差；不能调用硬件底层得设备，比如摄像头；
  • NativeApp：用android和Object-C等原生语言开发的应用
    • 优点：体验好；用户使用起来很流畅；非常适合做游戏【性能高】；可以直接调用硬件底层的API；
    • 缺点：不能跨平台
  • HybirdApp：利用前端所学的知识去开发移动端App，兼具2者的优势
    • 优点：能够跨平台；体验会好一些；也能够调用硬件底层的API
    • 缺点：相对于原生体验稍微弱一丢丢；不适合做游戏；适合做非游戏类型的手机App；
    • 应用场景：
  • 注意： 使用 Java 或者 IOS 写出来的代码和程序，在最终运行的时候，普通的文本代码，都会被编译为 原生的机器码去运行，并不像 JS 这样，解析执行，Java代码是 编译执行的；
  1. 三种开发方式的原理和对比
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WeqSqz3N-1648187971527)(images/三种开发类型的原理.png)]
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fS8bS17i-1648187971529)(images/三种开发类型的对比.png)]
  2. 谁在使用React Native？？？

企业如何选择合适自己的App开发方式

  1. 如果这个企业中，曾经使用原生技术开发过一些APP，那么在维护的时候，必然需要使用原生技术来维护
  2. 如果企业中，需要做一些游戏级别的应用，那么推荐使用原生，因为原生运行效率高，对耗电量处理的很好；
  3. 如果企业做一些应用级别的非游戏软件，比如 淘宝、京东、美团，就可以使用 混合APP了；
  4. 在企业中，最主要的是好的点子，如果有了一个好的项目立案，那么最好要立即把这个项目做出来；这时候，使用混合App非常合适，因为开发周期很短，能快速上线，抢先占领市场；【裤衩开发】

企业中项目开发流程

  • 需求调研：产品定位、受众群体、市场需求、开发价值；【产出物：需求文档】
  • 产品设计：功能模块、流程逻辑；【产出物：设计文档，交互稿】，确定项目的基本功能；
  • 项目开发：项目架构、美工、前端、后台、测试【产品的把控】要理解前后端分离的概念
  • 运营维护：上线试运行、调Bug、微调功能模块、产品迭代

根据需求搞设计，根据设计做开发

企业技术选型 - 几大主流技术之间的关系

  1. Angular.js 和 Ionic
  1. Vue.js 和 Weex
  1. React.js 和 React-Native

Angular, Vue, React 这三个都是前端框架，我们在进行混合App开发的时候，只是用到了这三个框架的【基础语法】而已；
Ionic， Weex， ReactNatvie 这三个都是打包工具（提供了相关的命令行，只要运行指定的命令，就能够把项目打包成一个手机App出来），能够把我们开发出来的应用，最终打包成一个可安装的手机端程序安装包；同时，这三个东西，也提供了好用的一些小组件，方便我们去构建移动App的用户界面；

前端混合App开发框架

  1. Html5+、ReactNative、Weex、Ionic
  2. 认识HTML5+
  • h5+是一个产业联盟，它有一些互联网成员，专门在中国推广H5
  1. HBuilder官网

开发框架之间的区别

  1. Html5+ 和 Ionic
  2. ReactNative 和 Weex

使用HBuilder生成安卓应用（在线）

API地址
Hbuilder这个工具，是一个在线打包工具，使用很方便，不需要在本地配置开发环境；直接将做好的网站，通过一些简单的操作，就能在线打包为一个App出来；

  • 在项目上右键 -> 发行 -> 发行为原生安装包

好处：本地不用配置开发环境；操作方便，对于程序员来说不关心打包的过程，打包过程对于我们来说是透明的；
缺点：程序员很少能干预打包的过程；源代码被提交到了云端的服务器，存在项目核心代码被泄露的风险；

环境变量的使用

作用：将需要全局使用的工具或者应用程序，配置到Path环境变量中，可以很方便的通过命令行的形式，在任何想要运行这些应用程序的地方，运行它们；

移动App开发环境配置【重点】

安装最新版本的java jdk

  1. 修改环境变量，新增JAVA_HOME的系统环境变量，值为C:\Program Files (x86)\Java\jdk1.8.0_112，也就是安装JDK的根目录
  2. 修改系统环境变量Path，在Path之后新增%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
  3. 新建系统环境变量CLASSPATH，值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
  4. 保存所有的系统环境变量，同时退出系统环境变量配置窗口，然后运行cmd命令行工具，输入javac，如果能出现javac的命令选项，就表示配置成功！

安装Node.js环境

注意：需要安装最新的长期稳定版本，不要实验版本；安装完毕之后的node.js会自动配置到全局系统环境变量中
安装完毕后，可以输入node -v查看node版本号；

安装C++环境

大多数情况下操作系统自带C++环境，不需要手动安装C++环境；
如果运行报错，则需要手动安装visual studio中的C++环境；

安装Git环境

Git安装完毕后，会自动配置到系统环境变量中；
可以通过运行git --version来检查是否正确安装和配置了Git的环境变量；

安装Python环境

  1. 注意：安装Python时候，只能安装2.×的版本，注意勾选安装界面上的Add Python to path，这样才能自动将Python安装到系统环境变量中；
  2. 安装完毕之后，可以在命令行中运行python，检查是否成功安装了python。

配置安卓环境

  1. 安装installer_r24.3.4-windows.exe，最好手动选择安装到C盘下的android目录
  2. 打开安装的目录，将android-25、android-23(react-native必须依赖这个)解压后，放到platforms文件夹下
  3. 解压platform-tools，放到platform-tools文件夹下
  4. 【这一步直接忽略即可！】tools文件夹不解压覆盖也行；解压tools，放到安装根目录中
  5. 解压build-tools_r23.0.1-windows.zip(react-native必须依赖这个)、build-tools_r23.0.2-windows.zip(weex必须依赖这个)和build-tools_r23.0.3-windows.zip，并将解压出来的文件夹，分别改名为版本号23.0.1、23.0.2和23.0.3；在安装目录中新建文件夹build-tools，并将改名为版本号之后的文件夹，放到新创建出来的build-tools文件夹下
  6. 在安装目录中，新建extras文件夹，在extras文件夹下新建android文件夹；解压m2responsitory文件夹和support文件夹，放到新建的extras -> android文件夹下
  7. 配置安装环境变量：在系统环境变量中新建ANDROID_HOME，值为android SDK Manager的安装路径C:\Users\liulongbin\AppData\Local\Android\android-sdk，紧接着，在Path中新增;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

ReactNative快速打包

  1. 安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：**不要使用cnpm！**cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

  1. Yarn、React Native的命令行工具（react-native-cli）

  • Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

    npm install -g yarn react-native-cli

  • 安装完yarn后同理也要设置镜像源：

    yarn config set registry https://registry.npm.taobao.org --global

    yarn config set disturl https://npm.taobao.org/dist --global

  1. 运行react-native init AwesomeProject创建React-Native项目
  2. 运行cd AwesomeProject切换到项目根目录中，运行adb devices来确保有设备连接到了电脑上
  3. 运行react-native run-android打包编译安卓项目，并部署到模拟器或开发机中
  4. 运行上一条命令之前，要确保有设备连接到了电脑上，可以运行adb devices查看当前接入的设备列表，打包好的文件，放到了android\app\build\outputs\apk目录下
  5. 入坑指南

问题1：开启悬浮框权限；

问题2：Could not get BatchedBridge, make sure your bundle is packaged correctly

解决方案：在终端中，进入到项目的根目录，执行下面这段命令行：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

运行之前，需要确保android/app/src/main/目录下有assets文件夹，如果没有，手动创建之~，再运行上面的命令；

问题3：could not connect to development server

解决方案：晃动手机，唤起设置属性窗口，点击“Dev settings”，再点击Debuug server host 出现设置ip地址窗口，填写Ip地址和端口号8081，例如192.168.1.111:8081

Weex快速打包

  1. 安装依赖:Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要最新稳定版的 Node.js 和 Weex CLi。
  2. 运行npm install -g weex-toolkit安装Weex 官方提供的 weex-toolkit 脚手架工具到全局环境中
  3. 运行weex create project-name初始化Weex项目
  4. 进入到项目的根目录中，打开cmd窗口，运行weex platform add android安装android模板，首次安装模板时，等待时间较长，建议fq安装模板
  5. 打开android studio中的安卓模拟器，或者将启用USB调试的真机连接到电脑上，运行weex run android，打包部署weex项目
  6. 部署完成，查看项目效果

总结重点

  1. 什么是前端移动App开发
  2. 市面上常见的App开发方式及优缺点
  3. 使用Hbuilder在线生成安卓应用
  4. 学会配置ReactNative开发环境
  5. 掌握ReactNative打包流程
uni-app学习笔记和新闻资讯app项目总结
qq_46336617的博客
06-22 891
随着移动应用开发的快速发展，跨平台开发成为了许多开发者的追求。在我最近的学习中，我有幸接触到了Uni-app这个跨平台应用开发框架，它为我打开了一扇全新的大门。本文将分享我在学习Uni-app的过程中的笔记和项目心得体会。一、uni-app是什么？Uni-app是一个基于Vue.js框架的跨平台应用开发框架，它可以同时开发iOS、Android和Web应用。使用Uni-app，我们只需要编写一套代码，即可在不同平台上运行应用，大大提高了开发效率和降低了维护成本。
《移动App性能评测与优化》笔记--APP性能测试之FPS\流畅度
那一年漫天雪的博客
04-26 1065
1、FPS 用FPS测试APP时遇到的问题： 1）为什么有时候FPS很低，但是我们却不觉得App卡顿？ 2）App停止操作之后，FPS还是一直在变化，这样的情况是否会影响FPS的准确度？ 系统获取FPS的原理是这样的：手机屏幕显示的内容是通过Android系统的SurfaceFLinger类，把当前系统里所有进程需要显示的信息合成一帧，然后提交到屏幕进行显示。FPS就是1s内Surface...
react-NowUI是一款基于React的移动端UI组件框架
08-14
NowUI 是一款基于 React 的移动端 UI 组件框架，涵盖了常见的各类 UI 组件以及部分 工具组件
React-day1
不一样的花朵的博客
04-10 304
移动App第1天 什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的：使用的是 OC、或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发 苹果和安卓平台上共有的软件是如何开发出来的：腾讯招两套开发人员【开发组】，手机京东 前端移动 App（Application）开发技术，去开发手机端的应用程序； 前端的混合移动App开发技术，并没有使用 苹果 或 安卓 官方推荐的 开发平台和开发方式，而是抛弃了 官方提供的方式，使用 前端的
零基础用react-native开发android app
weixin_34126557的博客
10-27 220
序 基于雨点儿网，分享react-native开发android app的方法。这篇博客旨在帮没有任何android或者ios开发经验的开发者体验一把当下热门的react-native。由于我之前也没有native app的开发经验，所以这篇文章中引用了很多我学习过程中碰到的简短有用的资料，方便大家少走些弯路。 我的开源项目托管在git...
React 开发一个移动端项目（1）
wbskb的博客
09-09 1484
react移动端项目（1）- react 常用技术栈、如何搭建一个 react 项目 、yarn 的基本使用、如何调整目录结构、Gitee/ Git 的基本使用
react移动端项目构建，react+react_vant+vite+axios+redux+sass
局外人LZ的博客
03-18 2348
本文只是大致讲了下react移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
云笔记App-Android-客户端-服务端-Mysql-实验报告-安装指导.zip
06-26
在这个云笔记App中，开发者可能使用了SQLite作为本地数据库来存储用户的笔记，同时通过网络接口（API）与服务端进行通信，实现数据的同步。 服务端的开发则可能使用IntelliJ IDEA，这是一个通用的Java开发环境，...
安卓课程设计----基于Android Studio开发的笔记APP.zip
02-25
"安卓课程设计----基于Android Studio开发的笔记APP.zip" 是一个与安卓应用开发相关的项目，其中包含了使用Android Studio开发的一款笔记应用程序的完整源代码和可能的项目报告。这个项目可能是针对学生或者对安卓...
创业计划书-APP移动应用-校园生活APP创业策划书——刘鑫
08-25
【创业计划书-APP移动应用-校园生活APP创业策划书——刘鑫】 在当今数字化时代，APP移动应用已经成为人们生活中不可或缺的一部分，特别是在校园环境中。刘鑫的这份创业策划书聚焦于开发一款专为大学生设计的校园...
react-Reactnews一个Reactjs写的新闻webapp和移动端
08-14
react-Reactnews一个Reactjs写的新闻webapp和移动端
reactH5:react 全家桶 实现react 移动端项目
05-29
React 移动端下拉刷新： 前提： 网上有很多针对vue封装的移动端UI组件库，但react的移动端UI组件库貌似只有Google的 material UI和阿里的 ant design mobile。阿里的下拉刷新又不符合项目的风格,只能 自己实现了。 采用better-scroll+react实现。 实现的效果 为什么要采用better-scroll better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心 是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又 扩展了一些 feature 以及做了一些性能优化。 另外 better-scroll 中已经提供了下拉刷新 上拉加载更多的方法，我要做的也是在其方法 内完善我要的效果 下拉刷新 pullDownRefresh选项，用来配置下拉刷新功
react移动端开发
最新发布
weixin_41978174的博客
08-11 616
React本身是一个用于构建用户界面的JavaScript库，它并不直接针对移动端或Web端，但由于其灵活性和高效性，被广泛应用于移动端开发中。特别是在结合React Native等框架时，React能够充分发挥其优势，为移动端应用提供接近原生的性能和体验。
使用react快速开发一个桌面应用（app）
接着奏乐接着舞的博客
03-31 6113
目录 1.前言： 2.原理总结 3.项目搭建 1.前言： 本文将会介绍使用react结合electron快速搭建一个桌面客户端。 2.原理总结 使用electron可以快速生成桌面客户端，而react可以开发我们想要的页面。那么如何将两者结合到一起呢？ react在开发时会默认起一个localhost:3000的本地服务，而electron可以读取本地文件或者url，我们只需要让electron读取react的local host：3000这个网址就可以了。 注意只有本地
react-app
weixin_40366919的博客
06-25 208
npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org –以上是安装淘宝镜像 npm install -g create-react-app create-react-app my-app cd my-app – my...
手机app开发可选技术——React Native
manerzi的博客
11-01 2580
手机app开发可选技术——React Native
ReactNative 开发Android App
小松鼠举栗子
05-23 4985
Android开发平台 谷歌在2007年发布Android 是一个开源的基于 Linux 的移动设备操作系统 支持的设备: phone… 语言: 开发语言是java , 后来因为甲骨文准备对android java收费, 又开始向Kotlin转移 IDE: 开发工具以前是eclipse+sdk, 后来谷歌退出了独立的IDE, Android Studio 打包: 使用签名打包生成.apk文件, 可作为app, 安装在android系统. 可用的平台框架 现在开发app主要有四种可.
如何使用React Native构建移动应用
m0_75198698的博客
05-04 348
使用 React Native，开发人员可以使用 JavaScript 和 React 编写跨平台应用程序，并利用现有的 React 生态系统，包括 Redux、React Router 和 Flux 等库。例如，您需要安装 Xcode（仅限 macOS）来构建和运行 iOS 应用程序，或者安装 Android Studio 来构建和运行 Android 应用程序。在 `myapp` 目录中，您将找到一个名为 `App.js` 的文件，其中包含应用程序的初始代码。其中，`myapp` 是您的项目名称。
React Native 开发系列第一篇（1）—— 创建一个app，并使用Andoird开启
weixin_46086458的博客
03-04 1657
搭建好RN必备环境之后要怎么创建一个RN项目？Android 能正常启动，但是ios 却启动不了？pod update更新总是卡壳？一文解答你创建 React Native项目并启动时会遇到的情况和问题。希望能给大家带来帮助，欢迎随时交流！
安卓笔记本APP实现笔记管理与搜索功能
本文档所介绍的“NotePad-master_基于安卓的笔记本APP”是一个专为安卓操作系统开发的笔记应用，旨在提供一个简洁、高效、易用的笔记记录环境，让用户能够随时随地捕捉灵感、记录信息、管理待办事项。 ### 标题知识...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值