此文档是从 [【Uni-App从入门到实战-杭州校园造黑马程序员]]](https://www.bilibili.com/video/BV1BJ411W7pX)

文章目录

• • • 基本部分：
    • • • uni-app介绍 [官方网页](https://uniapp.dcloud.io/resource)
        • 环境搭建
        • 利用HbuilderX初始化项目
        • 运行项目
        • 介绍项目目录和文件角色。
      • 全局配置和页面配置
      • • 通过globalStyle全局配置
        • 创建新的message页面
        • 通过pages要配置页面，请执行以下操作
        • 配置tabbar
        • condition启动模式配置
      • 组件的基本用法
      • • text文本组件的用法
        • • 001 - text 组件的属性
          • 002 - 代码案例
        • view查看容器组件的使用
        • • 001 - 组件的属性
          • 002 - 代码案例
        • button按钮组件的使用
        • • 001 - 组件的属性
          • 002 - 案例代码
        • image组件的使用
        • • image
      • uni-app中的样式
      • uni-app中的数据绑定
      • • 插补表达式的使用
        • v-bind动态绑定属性
        • v-for的使用
      • uni中的事件
      • • 事件绑定
        • 事件传参
      • uni生命周期
      • • 应用生命周期
        • 页面生命周期
      • 下拉刷新
      • • 打开下拉菜单刷新
        • • 通过配置文件打开
          • 通过API开启
        • 监听下拉菜单刷新
        • 关闭下拉菜单刷新
      • 上拉加载
      • 网络请求
      • 数据缓存
      • • uni.setStorage
        • uni.setStorageSync
        • uni.getStorage
        • uni.getStorageSync
        • uni.removeStorage
        • uni.removeStorageSync
      • 上传图片、预览图片
      • • 上传图片
        • 预览图片
      • 条件注释支持跨段兼容性。
      • • 组件条件注解
        • api条件注解
      • uni导航跳入
      • • 利用navigator进行跳转
        • 使用程序化导航进行跳转。
        • 导航跳转通道参数
      • uni-app在中创建组件
      • • 组件生命周期函数
      • 组件的通信
      • • 父组件将值传递给子组件。
        • 子组件将值传递给父组件。
        • 兄弟组件通信
      • uni-ui的使用

基本部分：

• 环境搭建
• 页面外观配置
• 数据绑定
• uni-app生命周期
• 组件的使用
• uni-app中国式学习
• 在uni-app使用字体图标并在中打开scss
• 条件注释是跨端兼容的。
• uni中的事件
• 导航跳转
• 组件创建和通讯，及组件生命周期
• uni-app中使用uni-ui库

项目：黑马商城项目

uni-app介绍 官方网页

uni-app 是一种用处 Vue.js 为所有前端应用程序开发一个框架，开发人员编写一组可以发布的代码iOS、Android、H5，以及各种小程序(微信/支付宝/百度/头条/QQ/DingTalk)和其他平台。

即使不是横跨终点， uni-app 对于小程序开发，它也是一个更好的框架。

具有vue而微信的Applet开发经验，可以快速上手uni-app

为什么要学习？uni-app？

与开发人员相比，学习的成本降低了，因为只有学习uni-app在此之后，您可以开发iOS、Android、H5以及各种小程序的应用，无需学习开发其他应用的框架，相比公司大大降低了开发成本。

环境搭建

安装编辑器HbuilderX 下载地址

HBuilderX是一种常见的前端开发工具，但是。 uni-app 做了特殊的加固处理。

下载App开发版本，开箱即用

安装微信开发人员工具 下载地址

利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建

• 选择uni-app,填写项目名称，即项目创建的目录。

运行项目

单击菜单栏中的运行以运行到浏览器，然后选择要运行的浏览器。

在微信开发工具中运行：进入hello-uniapp项目中，单击工具栏上的即可运行。 -> 运行到小程序模拟器 -> 微信开发工具可以在微信开发工具中体验uni-app

在微信开发工具中运行：进入hello-uniapp项目中，单击工具栏上的即可运行。 -> 跑向电话或模拟器。 -> 选择有模式的手机

注意：

• 如果是第一次使用，您需要先配置小程序。ide才能成功运行。
• 设置中设置了微信开发工具，服务端口打开。

介绍项目目录和文件角色。

pages.json 该文件用于 uni-app 全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 该文件是应用程序的配置文件，用于指定应用程序的名称、图标、权限等。

App.vue 它是我们的后续组件，所有页面都在 App.vue 下进行切换的，是页面入口文件，可以调用应用生命周期函数。

main.js 是我们的项目入口文件，主要作用是初始化 vue 实例并使用所需的插件。

uni.scss 该文件的目的是促进对应用程序样式的全面控制。例如，按钮颜色、边框样式、 uni.scss 文件中预置了一个批次。scss可变预设。

unpackage 它是打包目录，其中包含每个平台的打包文件。

pages 所有页面都存储在目录中。

static 静态资源目录，如图片等。

components 组件存储目录

为了实现多终端兼容，综合考虑编译速度、运行性能等因素， uni-app 双方商定了以下开发规范：

• 页面文件如下 Vue 单文件组件 (SFC) 规范
• 组件标签接近小程序规范，如中所述 uni-app 组件规范
• 接口功能(JS API)接近微信小程序规范，但前缀 wx 替换为 uni ，详见 uni-app接口规范
• 数据绑定和事件处理是相同的。 Vue.js 规范，同时补充App及页面生命周期
• 为了兼容多端操作，建议使用flex为发展布局

全局配置和页面配置

通过globalStyle全局配置

用于设置状态栏、导航栏、标题、窗口背景颜色等。 详细文档

属性

类型

默认值

描述

navigationBarBackgroundColor

HexColor

F7F7F7

导航栏背景颜色(相同的状态栏背景颜色)

navigationBarTextStyle

String

white

仅支持导航栏标题颜色和状态栏前景颜色 black/white

navigationBarTitleText

String

导航栏标题文本内容

backgroundColor

HexColor

ffffff

窗口的背景色

backgroundTextStyle

String

dark

下拉 loading 样式，仅支持。 dark / light

enablePullDownRefresh

Boolean

false

是否打开下拉菜单刷新，详见 页面生命周期 。

onReachBottomDistance

Number

50

触发上拉寻底事件时离页面底部的距离，系统仅支持px，详见 页面生命周期

创建新的message页面

右键pages新建message目录，在message在目录中右键单击新建.vue文件,并选择基本模板

通过pages要配置页面，请执行以下操作

属性

类型

默认值

描述

path

String

配置页面路径

style

Object

配置页面窗口性能、配置项引用 pageStyle

pages数组中的第一项表示应用程序启动页。

"pages": [ 、
        {
            "path":"pages/message/message"
        },
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ]

通过style修改页面标题和导航栏的背景颜色，并设置h5独特的下拉式刷新风格

"pages": [ //pages数组中的第一项代表应用程序启动页面，请参阅：https://uniapp.dcloud.io/collocation/pages
        {
            "path":"pages/message/message",
            "style": {
                "navigationBarBackgroundColor": "#007AFF",
                "navigationBarTextStyle": "white",
                "enablePullDownRefresh": true,
                "disableScroll": true,
                "h5": {
                    "pullToRefresh": {
                        "color": "#007AFF"
                    }
                }
            }
        }
    ]

配置tabbar

如果应用程序是多个 tab 应用，可以实现 tabBar 配置项指定 tab 柱的性能，以及 tab 切换时显示的对应页面。

Tips

• 当设置 position 为 top 将不会显示。 icon
• tabBar 中的 list 是只能使用最低配置配置的阵列2个、最多5个 tab，tab 按数组顺序排序。

物业说明：

属性

类型

必填

默认值

描述

对平台差异的描述

color

HexColor

是

tab 默认颜色上的文本

selectedColor

HexColor

是

tab 文本处于选中状态时的颜色

backgroundColor

HexColor

是

tab 的背景色

borderStyle

String

否

black

tabbar 仅支持上边框的颜色。 black/white

App 2.3.4+ 支持其他颜色值

list

Array

是

tab 查看列表 list 属性描述，最少2个、最多5个 tab

position

String

否

bottom

可选值 bottom、top

top 只重视微信小程序支持

其中 list 接收数组，则数组中的每一项都是具有以下属性值的对象：

属性

类型

必填

说明

pagePath

String

是

页面路径，必须位于。 pages 中先定义

text

String

是

tab 在按钮文本上，在 5+APP 和 H5 平台不是必需的。例如，没有单词的单词可以放在中间。+号图标

iconPath

String

否

图片路径，icon 大小限制为40kb，建议的大小为 81px * 81px，当 postion 为 top 此参数无效，不支持网络图片，不支持字体图标。

selectedIconPath

String

否

图片路径当被选中时，icon 大小限制为40kb，建议的大小为 81px * 81px ，当 postion 为 top 此参数无效。

案例代码：

"tabBar": {
        "list": [
            {
                "text": "首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/tabs/home.png",
                "selectedIconPath":"static/tabs/home-active.png"
            },
            {
                "text": "信息",
                "pagePath":"pages/message/message",
                "iconPath":"static/tabs/message.png",
                "selectedIconPath":"static/tabs/message-active.png"
            },
            {
                "text": "我们",
                "pagePath":"pages/contact/contact",
                "iconPath":"static/tabs/contact.png",
                "selectedIconPath":"static/tabs/contact-active.png"
            }
        ]
    }

condition启动模式配置

启动模式配置仅在开发期间生效，用于模拟直接转到页面的场景。例如，在转发小程序后，用户点击打开的页面。

物业说明：

属性

类型

是否必填

描述

current

Number

是

当前活动模式，list节点索引值

list

Array

是

启动模式列表

list说明：

属性

类型

是否必填

描述

name

String

是

启动模式名称

path

String

是

起始页面路径

query

String

否

启动参数可以在页面上找到。 onLoad 在函数中获取

组件的基本用法

uni-app为开发者提供了丰富的基本组件，开发者可以像构建块一样，组合各种组件拼接自己的应用程序。

uni-app中的组件，如 HTML 中的 div 、 p 、 span 与标签相同的角色用于构建页面的基础结构。

text文本组件的用法

001 - text 组件的属性

属性

类型

默认值

必填

说明

selectable

boolean

false

否

文本是否为可选

space

string

.

否

显示连续空格，可选参数： ensp 、 emsp 、 nbsp

decode

boolean

false

否

是否解码

• text 该元件相当于导线内标签，显示在同一条线上。
• 长按不能选择文本节点以外的其他节点

002 - 代码案例

  
  来了老弟



  
  
    来了  老弟
  
  
    来了  老弟
  
  
    来了  老弟
  



  skyblue



  
    < > & '    

view查看容器组件的使用

View 查看容器、 类似于 HTML 中的 div

001 - 组件的属性

002 - 代码案例

button按钮组件的使用

001 - 组件的属性

属性名

类型

默认值

说明

size

String

default

按钮的大小

type

String

default

按钮的样式类型

plain

Boolean

false

按钮是否被掏空并且背景颜色是否透明

disabled

Boolean

false

是否按钮

loading

Boolean

false

这个名字带来了 loading t图标

• button 组件默认排他行，设置。 size 为 mini 当您可以连续显示多个时。

002 - 案例代码

前端

前端

前端

image组件的使用

image

图片。

属性名

类型

默认值

说明

对平台差异的描述

src

String

图片资源地址

mode

String

‘scaleToFill’

图片裁剪、缩放模式

Tips

• <image> 组件默认宽度 300px、高度 225px；
• src 仅相对路径、绝对路径支持 base64 码；
• 页面结构复杂，css在样式太多的情况下，使用 image 可能会导致样式缓慢生效，出现 《闪电侠》 情况，在这个时候设定的。 image{will-change: transform} ,这个问题是可以优化的。

uni-app中的样式

• rpx 即响应式px与屏幕宽度相适应的动态单元。至750以宽屏为基准，750rpx就是屏幕的宽度。更宽的屏幕，rpx 实际显示效果将等比例放大。

• 使用 @import 语句可以导入扩展样式表， @import 后跟需要导入的外部样式表的相对路径，使用 ; 指示语句的结尾

• 支持基本常用选择器class、id、element等

• 在 uni-app 不能用于 * 选择器。

• page 相当于 body 节点

• 定义在 App.vue 中的样式是作用于每个页面的全局样式。在……里面 pages 目录下 的 vue 文件中定义的样式是本地样式，它只作用于相应的页面，并将被覆盖。 App.vue 中的相同选择符。

• uni-app 支持使用字体图标，使用方式与普通相同 web 项目相同，需要注意以下几点：

  • 字体文件较少 40kb， uni-app 将自动将其转换为 base64 格式；

  • 字体文件大于或等于 40kb， 需要开发商转换，否则使用不生效；

  • 建议使用字体文件的引用路径。 ~@ 开头的绝对路径。

     @font-face {
         font-family: test1-icon;
         src: url(~@/static/iconfont.ttf);
     }

• 如何使用scss或者less

uni-app中的数据绑定

数据需要在页面中定义，我们以前的vue一次触摸相同的，直接进入data只需在中定义数据

export default {
  data () {
    return {
      msg: hello-uni
    }
  }
}

插补表达式的使用

• 使用内插表达式来呈现基本数据。

  {{msg}}

• 在插补表达式中使用三元运算

  {{ flag ? 我是真的:我是假的 }}

• 基本运算

  {{1+1}}

v-bind动态绑定属性

在data图片是在中定义的，我们希望将其呈现在页面上。

export default {
  data () {
    return {
      img: http://destiny001.gitee.io/image/monkey_02.jpg
    }
  }
}

利用v-bind进行渲染

它也可以缩写:

v-for的使用

data在中设置一个数组，并最终将该数组呈现到页面。

data () {
  return {
    arr: [
      { name: 刘能, age: 29 },
      { name: 赵四, age: 39 },
      { name: 宋小宝, age: 49 },
      { name: 小沈阳, age: 59 }
    ]
  }
}

利用v-for进行循环

名字：{{item.name}}---年龄：{{item.age}}

uni中的事件

事件绑定

在uni事件绑定和vue都是一样的，通过。v-on事件的绑定也可以缩写@

点我啊

事件函数在中定义methods中

methods: {
  tapHandle () {
    console.log(真的给我指一指)
  }
}

事件传参

• 默认情况下，如果没有传递任何参数，则Event函数的第一个形参是Event对象。

  // template
  点我啊
  // script
  methods: {
    tapHandle (e) {
      console.log(e)
    }
  }

• 如果将参数传递给事件函数，则相应的事件函数参数将接收传递的数据。

  // template
  点我啊
  // script
  methods: {
    tapHandle (num) {
      console.log(num)
    }
  }

• 如果您获得一个事件对象，您还希望传递参数。

  // template
  点我啊
  // script
  methods: {
    tapHandle (num,e) {
      console.log(num,e)
    }
  }

uni生命周期

应用生命周期

生命周期的概念：创建、运行和销毁对象的整个过程成为生命周期。

生命周期功能：生命周期的每个阶段都伴随着每个功能的触发，称为生命周期功能。

uni-app 支持以下应用生命周期功能：

函数名

说明

onLaunch

当 uni-app 初始化完成时触发(全局触发仅一次)

onShow

当 uni-app 启动，或从后台进入前台显示。

onHide

当 uni-app 从前台到背景

onError

当 uni-app 报告错误时触发

页面生命周期

uni-app 支持以下页面生命周期函数：

函数名

说明

对平台差异的描述

最低版本

onLoad

监听页面加载，其参数是在前一页上传递的数据，参数类型为Object(用于页面转移)，参考 示例

onShow

此时将显示监听页面。页面每次出现在屏幕上时都会被触发，包括从较低的页面点返回以显示当前页面。

onReady

监听页面的第一次呈现完成。

onHide

监听页面被隐藏。

onUnload

监控页面卸载

下拉刷新

打开下拉菜单刷新

在uni-app中有两种方式打开下拉菜单刷新

• 需要在 pages.json 在中，找到当前页面pages节点，并在 style 选项打开 enablePullDownRefresh
• 通过调用uni.startPullDownRefresh方法来打开下拉菜单刷新

通过配置文件打开

创建list演示页面

通过pages.json在文件中找到了当前页面pages节点，并在 style 选项打开 enablePullDownRefresh

{
  "path":"pages/list/list",
    "style":{
      "enablePullDownRefresh": true
    }
}

通过API开启

api文档

uni.startPullDownRefresh()

监听下拉菜单刷新

通过onPullDownRefresh可以收听下拉刷新操作

export default {
  data () {
    return {
      arr: [前端,java,ui,大数据]
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log(触发器下拉菜单刷新)
  }
}

关闭下拉菜单刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

上拉加载

通过在pages.json在文件中找到了当前页面pages节点下style中配置onReachBottomDistance您可以设置从底部到开始加载的距离，默认为50px

通过onReachBottom监视到最低行为

网络请求

在uni可以被调入uni.request方法来请求网络请求。

应该注意的是，网络在小程序中是相关的。 API 您需要先配置域名白名单才能使用。

发送get请求

发送post请求

数据缓存

uni.setStorage

官方文档

将数据存储在指定的本地缓存中。 key 在中，原件将被覆盖。 key 这是一个异步接口。

代码演示

uni.setStorageSync

将 data 存储在指定的本地缓存中。 key 在中，原件将被覆盖。 key 这是一个同步接口。

代码演示

uni.getStorage

从本地缓存中异步获取指定的。 key 相应的内容。

代码演示

uni.getStorageSync

从本地缓存同步获取指定的。 key 相应的内容。

代码演示

uni.removeStorage

从本地缓存中异步删除指定的 key。

代码演示

uni.removeStorageSync

从本地缓存中同步删除指定的。 key。

代码演示

上传图片、预览图片

上传图片

uni.chooseImage方法从当地相册中选择照片或使用相机拍照。

案例代码

预览图片

结构

如何预览图片

previewImg (current) {
  uni.previewImage({
    urls: this.imgArr,
    current
  })
}

条件注释支持跨段兼容性。

条件编译使用特殊注释进行标记。根据这些特别的评论，评论中的代码被编译成不同的平台。

写法：以 #ifdef 添加平台徽标 开头，以 #endif 结尾。

平台标识

值

平台

参考文档

APP-PLUS

5+App

HTML5+ 规范

H5

H5

MP-WEIXIN

微信小程序

微信小程序

MP-ALIPAY

支付宝小程序

支付宝小程序

MP-BAIDU

百度，Inc.小程序

百度，Inc.小程序

MP-TOUTIAO

Headline小程序

Headline小程序

MP-QQ

QQ小程序

（目前仅cli版支持）

MP

微信小程序/支付宝小程序/百度，Inc.小程序/Headline小程序/QQ小程序

组件条件注解

代码演示

  h5此时将显示该页面。




  将显示微信小程序




  app会显示

api条件注解

代码演示

onLoad () {
  //#ifdef MP-WEIXIN
  console.log(微信小程序)
  //#endif
  //#ifdef H5
  console.log(h5页面)
  //#endif
}

样式条件注解

代码演示

/* #ifdef H5 */
view{
  height: 100px;
  line-height: 100px;
  background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
  height: 100px;
  line-height: 100px;
  background: green;
}
/* #endif */

uni导航跳入

利用navigator进行跳转

navigator详细文档： 文档地址

跳转到普通页面

  跳转到关于页面

跳转到tabbar页面

  跳转到message页面

使用程序化导航进行跳转。

导航跳转文档

利用navigateTo实施导航跳跃

保留当前页面，跳转到应用程序中的页面，使用 uni.navigateBack 您可以返回到原始页面。

跳转到关于页面

通过navigateTo方法跳转到正常页面

goAbout () {
  uni.navigateTo({
    url: /pages/about/about,
  })
}

通过switchTab跳转到tabbar页面

跳转到tabbar页面

跳转到message页面

通过switchTab方法来跳转

goMessage () {
  uni.switchTab({
    url: /pages/message/message
  })
}

redirectTo进行跳转

关闭当前页面并跳转到应用程序中的页面。

跳转到message页面

goMessage () {
  uni.switchTab({
    url: /pages/message/message
  })
}

通过onUnload测试当前组件是否确实已卸载

onUnload () {
  console.log(已卸载组件)
}

导航跳转通道参数

在导航到下一页时，可以将相应的参数传递到下一页。页面接收参数可以通过onLoad接收的生命周期

传递参数的页。

goAbout () {
  uni.navigateTo({
    url: /pages/about/about?id=80,
  });
}

页面接收参数

uni-app在中创建组件

在uni-app在中，可以创建名为的后缀。vue文件，也就是说，要成功创建组件，其他组件可以传递该组件。impot进口的方式，在山口。components注册就足够了

• 创建login组件，在component中创建login目录，然后创建一个新的login.vue文件

• 在其他组件中导入组件并注册它。

  import login from "@/components/test/test.vue"

• 注册组件

  components: {test}

• 使用组件

组件生命周期函数

beforeCreate

在实例初始化后调用。 详见

created

在创建实例后立即调用。 详见

beforeMount

在装载开始前调用。 详见

mounted

在实例上挂载后调用。 详见 注意：不能确定所有的子组件都安装在这里。如果您需要完全挂载子组件，可以在执行操作后使用它们。 $nextTick Vue官方文档

beforeUpdate

在数据更新时调用，发生在虚拟 DOM 在修补之前。 详见

仅H5平台支持

updated

由于数据更改而实现虚拟 DOM 重新呈现和修补，之后调用挂钩。 详见

仅H5平台支持

beforeDestroy

在销毁实例之前调用。在此步骤中，该实例仍然完全可用。 详见

destroyed

Vue 实例销毁后调用。通话结束后，Vue 实例指示的所有内容都被解除绑定，所有事件侦听器都被移除，并且所有子实例都被销毁。 详见

组件的通信

父组件将值传递给子组件。

通过props以接受从组件外部传递到内部的值。

其他组件正在使用中。login该值在组件为

子组件将值传递给父组件。

通过$emit触发事件以传递参数

父组件定义自定义事件并接收参数。

兄弟组件通信

uni-ui的使用

uni-ui文档

1、进入Grid宫格组件

2、使用HBuilderX导入组件

3、导入组件

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"

4，已注册组件

components: {uniGrid,uniGridItem}

5，使用组件

  
    文本
  
  
    文本
  
  
    文本