uni-app

uni-app官网

一、快速上手

1、通过hbuilderX可视化界面

1.1、 hbuilderX下载
1.2、下载完成之后创建、运行uni-app

• 点击工具栏的文件》新建》项目

  
  
  image.png

• 选择uni-app类型，输入工程名，选择模板，点击创建，即可创建成功
  

  image.png

• 在微信开发者工具里面运行。进行所创建的项目，点击工具栏运行》运行到小程序模拟器》微信开发者工具，即可在微信开发者工具里面体验uni-app
  

  image.png
  
  首次使用需要配置小程序ide的相关路径，才可运行成功。
  uni-app默认把项目编译到根目录的unpackage目录。
  
  image.png

• 
  在微信开发者工具导入项目时发现报：请选择含app.json / project.config.json的目录
  

  image.png
  
  目录显示如下：
  image.png
  
  解决：选择含app.js文件，如图：
  
  image.png

2、通过vue-cli命令行

• 环境安装

 // 全局安装vue-cli
npm install -g @vue/cli 

• 创建uni-app

// 使用正式版（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project

// 使用alpha版（对应HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

• 运行、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM%可取值如下：

值	平台
app-plus	app平台生成打包资源（仅支持npm run build:app-plus，也就是App平台运行调试不支持cli方式，需在HBuilderX中运行调试）
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-qq	qq 小程序
mp-360	360 小程序
quickapp-webview	快应用通用
quickapp-webview-union	快应用联盟
quickapp-webview-huawei	快应用华为

二、框架

1、目录结构

image.png

2、生命周期

• 应用生命周期：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline）

• 页面生命周期

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面上拉触底事件的处理函数
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、字节跳动小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	5+ App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈（暂时只支持 CLI 创建的项目）	微信小程序	使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline
onAddToFavorites	监听用户点击右上角收藏（暂时只支持 CLI 创建的项目）	微信小程序	使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline

3、路由

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、使用组件
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件 、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件

4、运行环境判断

• 开发环境和运行环境可以通过process.env.NODE_ENV来判断。一般用于连接测试服务器或生产服务器的动态切换。

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

• 判断平台
  -- 编译期判断

// 编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码
// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif
// 如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。

-- 运行期编译
运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用uni.getSystemInfoSync().platform判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

5、页面样式与布局

• 尺寸单位（屏幕像素=px，响应式px=rpx）
  uni-app宽度计算公式为：750 * 元素在设计稿中的宽度 / 设计稿基准宽度
• 样式导入(@import "../../common/uni.css";)
• 内联样式（支持使用 style、class 属性来控制组件的样式）
• 支持的选择器（.class #id element ::after ::before）
• 全局样式和局部样式
  定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。（nvue页面暂不支持全局样式）
• css变量

CSS变量	描述	App	小程序	H5
--status-bar-height	系统状态栏高度	系统状态栏高度、nvue注意见下	25px	0
--window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
--window-bottom	内容区域距离底部的距离	0

• 固定值

组件	描述	App	H5
NavigationBar	导航栏	44px	44px
TabBar	底部选项卡	HBuilderX 2.3.4之前为56px，2.3.4起和H5调为一致，统一为 50px。但可以自主更改高度）	50px

• flex布局
  • Flex 布局是什么？
    Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
  • 基本概念
    采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
    
    image
    
    容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
  • 容器的属性
    flex-direction决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
// row（默认值）：主轴为水平方向，起点在左端。
// row-reverse：主轴为水平方向，起点在右端。
// column：主轴为垂直方向，起点在上沿。
// column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap默认情况下，项目都排在一条线（又称"轴线"）上

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
// nowrap（默认）：不换行。
// wrap：换行，第一行在上方。
// wrap-reverse：换行，第一行在下方。

flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow:  || ;
}

justify-content定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
// flex-start（默认值）：左对齐
// flex-end：右对齐
// center： 居中
// space-between：两端对齐，项目之间的间隔都相等。
// space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
// flex-start：交叉轴的起点对齐。
// flex-end：交叉轴的终点对齐。
// center：交叉轴的中点对齐。
// baseline: 项目的第一行文字的基线对齐。
// stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
// flex-start：与交叉轴的起点对齐。
// flex-end：与交叉轴的终点对齐。
// center：与交叉轴的中点对齐。
// space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
// space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
// stretch（默认值）：轴线占满整个交叉轴。

• 项目的属性
  order定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item {
  order: ;
}

flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: ; /* default 0 */
}

flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: ; /* default 1 */
}

flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis:  | auto; /* default auto */
}

flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• 背景图片
  • 支持在css里设置背景图片
  • 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径

 .test2 {
     background-image: url('~@/static/logo.png');
 }

• 字体图标（字体图标，使用方式与普通 web 项目相同）

6、小程序组件支持

• 使用方法

// 在pages.json 对应页面的 style -> usingComponents 引入组件：
{
    "pages": [
        {
            "path": "index/index",
            "style": {
                "usingComponents": {
                    // #ifdef APP-PLUS || MP-WEIXIN || MP-QQ
                     "custom": "/wxcomponents/custom/index"
                    // #endif
                    // #ifdef MP-BAIDU
                     "custom": "/swancomponents/custom/index"
                    // #endif
                    // #ifdef MP-ALIPAY
                     "custom": "/mycomponents/custom/index"
                    // #endif
                }
            }
        }
    ]
}

// 在页面中使用