uni-app 框架信息

Posted on | In | Visitors:

uni-app 整合了 Vue.js、mpvue 等前端开源框架。同时，为保证微信小程序兼容，uni-app 还借鉴了微信小程序的组件规范。所以，uni-app 自成一脉，之前很多知识点需要重新梳理和归档。记性越来越差，真不知道哪一天就忘了自己。

开发规范

页面文件遵循 Vue 单文件组件 (SFC) 规范

页面文件为.vue后缀的文件。 .vue 文件是一个自定义的文件类型，每个 .vue 文件包含三种类型的顶级语言块 template、script 和 style

  • 每个 .vue 文件最多包含一个 template 块
  • 每个 .vue 文件最多包含一个 script 块
  • 一个 .vue 文件可以包含多个 style 标签

组件标签靠近微信小程序规范

  • uni-app的组件与微信小程序相同，也就是说熟悉微信小程序 wxml 的，在这里沿用 wxml 的写法即可。比如 view，navigator, text等
属性名 类型 描述 注解
id String 组件的唯一标示 保持整个页面唯一
class String 组件的样式类 在对应的 css 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否隐藏 所有组件默认是显示的
data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
@* EventHandler 组件的事件 详见各组件详细文档，事件绑定参

接口（JS API）参考了微信小程序，将前缀 wx 替换为 uni 即可

  • uni-app 对 API 进行了 Promise 封装，如无 success、fail、complete 参数，将以 Promise 返回数据。
    返回数据的第一个参数是错误对象，第二个参数是返回数据
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 默认方式
    uni.request({
        url: 'https://www.example.com/request',
        success: (res) => {
            console.log(res.data);
        }
    });

    // Promise
    uni.request({
            url: 'https://www.example.com/request'
        })
        .then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
            var [error, res]  = data;
            console.log(res.data);
        })

数据绑定 及 事件处理参考了 Vue.js 规范，但又参考了小程序页面的 生命周期 概念

为了多端兼容，建议 view 中一开始就使用flex布局进行开发。免得以后改的时候后悔…

生命周期

整个 uni-app 应用的生命周期

函数名 说明
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onUniNViewMessage 对 nvue 页面发送的数据进行监听

页面的生命周期

函数名 说明
nLoad 监听页面加载，页面间参数传递在这里，参数类型为Object
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom 页面上拉触底事件的处理函数
onTabItemTap 点击 tab 时触发，参数为Object
onShareAppMessage 用户点击右上角分享

路由

uni-app 路由全部交给 框架 统一管理，在pages.json 里配置每个路由页面的路径及样式即可，跟微信小程序一样。切记，不支持 Vue Router 的路由

路由跳转（跟微信小程序的方式一样）

  • 使用 navigator 组件跳转
    1
    2
    3
    <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
        <button type="default">跳转到新页面</button>
    </navigator>

调用API跳转

  • uni.navigateTo(OBJECT)
    保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
  • uni.redirectTo(OBJECT)
    关闭当前页面，跳转到应用内的某个页面
  • uni.reLaunch(OBJECT)
    关闭所有页面，打开到应用内的某个页面
  • uni.switchTab(OBJECT)
    跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • uni.navigateBack(OBJECT)
    关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

页面栈

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

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

页面样式与布局

尺寸单位

upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750 upx。 这也是微信小程序 iphone6,iphone7,iphone8的基准宽度（750 rpx）。开发中使用upx，可以做到多端统一。
动态绑定的 style 不支持直接使用 upx。uni.upx2px(Number) 转换为 px 后再赋值。

1
2
3
4
<!-- - 静态upx赋值生效 -->
<view class="test" style="width:200upx"></view>
<!-- - 动态绑定不生效 -->
<view class="test" :style="{width:winWidth + 'upx;'}"></view>

样式

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径

1
2
3
4
5
6
<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }
</style>

内联样式

  • 动态样式用 style
    静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，不要将静态的样式写进 style 中，会影响渲染速度。
    <view :style="{color:color}" />
  • 静态样式用 class：多个class之间用空格分隔
    <view class="normal_view" />

全局样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面。（与微信小程序中的app.wxss一样）

局部样式

在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并覆盖 App.vue 中相同名字的选择器。（与微信小程序中的 .wxss一样）

固定值

uni-app 中以下组件的高度是固定的，不可修改：
|组件|描述|5+App|H5|
|:—|:—|:—-|:—-|
|NavigationBar|导航栏|44px|44px|
|TabBar|底部选项卡|56px|50px|

背景图片

建议不要使用背景图片，会影响加载速度。建议不妨或者用css的纯色。若用，使用网络图片连接，否则以后更换累。

template 和 block 不是组建，只是一个包装元素，只接受控制属性，不会被渲染。如

1
2
<template v-if="test">
<block v-for="(item,index) in list" :key="index">

NPM支持

uni-app 支持使用npm安装第三方包。

初始化npm工程

若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程：
npm init -y

安装依赖

在项目根目录执行命令安装npm包：
npm install packageName --save

使用

安装完即可使用npm包，js中引入npm包：

import package from 'packageName'
const package = require('packageName')

注意事项

node_modules目录必须在项目根目录下。
支持安装mpvue组件，不支持直接使用vue组件和小程序自定义组件
支持安装js模块，安装的模块及其依赖的模块使用的API必须是uni-app已有的API（兼容小程序API），比如：支持高德地图微信小程序SDK，不支持jQuery。

总结

uni-app 语法 参考了 vue
uni-app 编译 参考了 vue
uni-app 组件 参考了 微信小程序
uni-app JsApi 参考了 微信小程序
uni-app 路由 参考了 微信小程序
uni-app 生命周期 在vue的基础上增加了 微信小程序

坚持原创技术分享，您的支持将鼓励我继续创作！