作用
跨端(APP、各种小程序、H5)开发框架,总十个平台
特点
1、运用了vue语法
2、小程序的组件模式
3、通过uni-app统一各端api
4、编译出各端的源代码
目录结构
1、package.json 页面程序的目录的配置
2、main.js 程序的入口
3、App.js 根组件
4、static 静态资源目录
index/index.vue 首页
5、components 组件存放目录(不需要注册)
6、wxcomponnets 微信专用组件存放目录
运行编译环境准备
H5
App
1、下载app模拟器
2、配置端口
运行-运行到手机或模拟器-Android模拟器端口设置
3、运行
1.打开模拟器
2.运行-运行到手机或模拟器-运行项目xxx到xxx模拟器
微信
1、下载并安装微信开发工具
2、微信开发工具-设置-安全设置-服务器端口开启
3、HBuilderX-运行-运行到小程序模拟器-运行设置-小程序开发者工具路径
index.vue页面分析
template模板,script业务逻辑,style样式
常用组件
1、view 块元素
2、text行内元素
3、navigate 导航
条件编译
常用条件
#ifdef APP-PLUS
APP
#ifdef MP-WEIXIN
微信
#ifdef H5
H5网页
模板中
<!-- #ifdef APP-PLUS -->
<!-- #endif -->
样式中
/*#ifdef APP-PLUS */
/* #endif */
配置中
<!-- #ifdef APP-PLUS -->
<!-- #endif -->
单独配置
“h5”:{}
“App-plus”:{}
page.json
pages 页面配置
path:xxx/xxx 路径
style 样式(glovalStyle 配值一样)
globalStyle 全局配置
1、“navigationBarTextStyle”: “black”, 导航文字颜色
2、“navigationBarTitleText”: “uni-app”, 导航标题
3、“navigationBarBackgroundColor”:"#F8F8F8", 导航背景颜色
4、“backgroundColor”: “#F8F8F8” 页面背景颜色
内置组件
1、view 块
2、tex 文本
3、selectable 文字长安可选
4、image 图片
5、navigator 导航
6、swioer 幻灯片
7、swiper-item 幻灯片-一页
扩展组件
uni.request 网络请求
css
height:var(–status-bar-height) 状态栏的高度