uni-app总结

作用

跨端（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 */

配置中

单独配置
“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) 状态栏的高度