移动App
分类
- 原生app(原生的安卓和ios)
- webapp(在手机的浏览器上运行的app)
- 混合app(原生app+webapp，主流App）
技术
原生app
- 安卓: 安卓语言(底层是基于java语言),
- ios: object-c(oc)和swift
优点:
- 用户体验非常好
- 能够调用所有的原生系统的功能
- 有些功能是不需要网络也可以使用的
缺点:
- 开发成本非常高，必须请一个专门的安卓开发和ios开发
- 打包出来的app体积都很大
webapp
- vue
- react
- angular
- 原生js
优点:
- 开发成本小,本质就是在做网页
- 打包的体积可以优化了
缺点:
- 用户体验不好
- 必须有网络
混合app
- react-native(rn): facebook(跨安卓和ios)
- weex: 阿里(跨安卓和ios)
- uni-app: dcloud
优点：
- 开发成本小，一个前端人员就可以完成整个app的开发
- 对于前端人员来说，上手成本小
- 用户体验虽然达不到原生app,但是已经能够接近了
缺点：
- 必须掌握现在主流的混合app开发技术
- 现在苹果的app store对混合app的审查比较严
跨平台
跨哪些平台呢？
安卓、ios、web端(h5端)、各个小程序
H5端
移动端网页
- pc端可以用手机模式访问
- webapp
- 原生app当中套入h5的网页
HBuilder X
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
下载App开发版，可开箱即用。
如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。
插件市场
uView
uni-app
特点
能跨8个平台,只需要写一套代码,可以分别编译到不同的平台
语法
vue + 微信小程序
标签全是微信小程序的标签
所有的api和系统提供的组件,基本和小程序的api、组件一致
系统提供的组件是有平台兼容性的,有些平台是不兼容这个组件
大部分api只需要把微信小程序调用的`wx`换成`uni`
生命周期: 路由组件使用小程序的生命周期,一般组件使用vue的生命周期
赋值: vue的语法
指令全是vue的指令
组件文件都是`.vue`
vuex
创建的项目是默认安装了vuex,我们只需要配置和引入，在main.js当中引入
import store from './store/index.js';
Vue.prototype.$store = store;
const app = new Vue({
...App,
store
})
emit、on、off 页面通信
// 主要用于返回上一页传参
uni.$emit('handler', '数据'); // 发送数据
uni.navigateBack(); // 关闭当前页面，返回上一个页面
onShow() {
uni.$on('handler',(res)=>{
console.log(res);
uni.$off('handler');// 清除监听
})
}
打包
H5
- manifest.json
- h5配置
- 路由模式 => hash
- 运行的基础路径都是以//包裹的内容，基本上就是名称
- 发行 => 网站-h5手机版
- 有域名就填写自己的域名,如果没有域名就不填写
- 只需要填写名称
- unpackage - dist - h5就是我们打包出来的源码文件
- 这个文件夹的名字一定要和前面填写的基础路径的名字要一致
- windows, 我们需要安装一个本地服务器,推荐phpStudy
- mac是自带本地服务器, /Library/WebServer/Documents
- 接口必须是做了跨域处理
微信小程序
- 我们的接口必须是https协议的
- 必须在微信公众平台配置接口路径
- 微信公众平台 - 开发 - 开发设置 - 服务器域名
- 直接在微信开发者工具右上角点击上传
- 在微信公众平台 - 管理 - 版本管理
App
- 正式的安卓和ios版本都需要证书,安卓有免费的证书,ios是需要付费的
- 当前只能发布安卓版,我们就利用uni-app提供的免费证书
- 发行- 原生app云打包(就是dcloud帮我们打包,我们不需要做任何操作)
