一、介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
一套代码编到14个平台
目录
┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录，详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ └─android Android原生资源目录 详见
├─hybrid App端存放本地html文件的目录，详见
├─wxcomponents 存放小程序组件的目录，详见
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss 这里是uni-app内置的常用样式变量
二、推荐编译器HbuilderX
H5在内置浏览器内查看
小程序用微信小程序开发工具查看
手机端安卓模拟器/真机
三、创建
四、运行多端
H5
直接在内置浏览器中运行
小程序
01 打开开发工具的服务端口
02 HBuilderx配置 微信开发工具的地址
03 配置微信小程序id.
04 运行到微信小程序
app
01 打开模拟器或者手机
02 配置模拟器的端口
夜神模拟器端口号：62001
海马模拟器端口号：26944
逍遥模拟器端口号：21503
MuMu模拟器端口号：7555
天天模拟器端口号：6555
03 运行到模拟器
hbuilder可能需要下载对应的插件
运行到安卓模拟器，有视图差别
五、配置项
关于每一个的属性可以到https://uniapp.dcloud.net.cn/collocation/pages.html参考
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"rpxCalcMaxDeviceWidth": 960,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件",
"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"^uni-(.*)": "@/components/uni-$1.vue"
}
},
"topWindow": {
"path": "responsive/top-window.vue",
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue",
"style": {
"width": "300px"
}
},
"rightWindow": {
"path": "responsive/right-window.vue",
"style": {
"width": "300px"
},
"matchMedia": {
"minWidth": 768
}
}
}
六、标签
其实跟小程序挺像的
div 改成 view
span、font 改成 text
a 改成 navigator
img 改成 image
HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。
七、组件
scroll-view 可区域滚动视图容器
swiper 可滑动区域视图容器
icon 图标
rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
progress 进度条
slider 滑块指示器等
八、uni-app的生命周期
集合了vue与小程序的生命周期
vue
Vue的生命周期
创建
beforeCreate
created
可以使用this，没有dom
作用：
1. 初始数据
2. 注册监听事件
3. 开启定时器
4. ajax请求
挂载
beforeMount
mounted
可以操作dom（节点）
作用：
1. 操作dom
2. ajax请求
更新
beforeUpdate
updated
卸载
beforeDestroy
作用：
1. 移除事件监听
2. 移除停止定时器
destroyed
app
小程序的生命周期
onLoad
加载
能够获取页面的参数
开启ajax，定时器，事件监听
像vue的created
onShow
显示
播放媒体
onReady准备
获取节点信息
像vue的mounted
onHide 后台运行
停止播放媒体
onUnload 卸载
停止事件监听与定时器
小程序的全局方法
onPullDownRefresh
下拉刷新
onReachBottom()
触底更新
onShareAppMessage
右上角分享
onPageScroll
页面滚动
onShareTimeline
分享到朋友圈
app的全局方法
onBackPress
手机的返回键被点击
onNavigationBarButtonTap
导航栏按钮被点击
路由传参
传递 url:path?name=12313&age=18
接收
onLoad(option){}
option的值{name:“12313”,age:18}
路由api
uni.navigateTo({url})
跳转
uni.redirectTo({url})
重定向
uni.navigateBack()
返回
uni.switchTab()
底部栏切换
uni.reLaunch()
重启
获取当前页面
getApp
01 在App.vue
定义globalData:{num:100}
02 要使用的页面获取app
var app = getApp()
03获取globalData的值
onShow(){
this.num = app.globalData.num
}
04 更新globalData值
addNum(){
app.globalData.num++;
this.num = app.globalData.num
}
获取页面栈
getCurrentPages
var page = getCurrentPages();
获取当前的页面栈，是一个数组（1-5）
uni.navigateBack({delta:page.length})
page[page.length-1] 获取当前页面的信息
（不要去修改）
条件编译
条件编译
目的:不同的平台展示不同特性与功能
模板条件编译
格式
<!-- #ifdef H5 -->
内容
<!-- #endif -->
条件
APP
App端
H5
网页
MP
小程序
MP-WEIXIN
微信小程序
css条件编译
/* #ifdef APP */
.active{color:red}
/* #endif */
js条件编译
// #ifdef APP-PLUS
uni.showModal({
title:"你好App用户"
})
// #endif
条件配置
pages.json
“style”:{
"h5":{
"titleNView":{
"titleText":"我是H5"
}
},
"app-plus": {
"titleNView":false //隐藏导航栏
}
}
// #ifdef MP-WEIXIN || APP
{
"path":"pages/condition/we",
"style":{
"navigationBarTitleText": "小程序专有页面"
}
},
// #endif
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
