uni-app 学习笔记

已于 2022-09-02 08:48:26 修改
阅读量786 收藏 2
点赞数
分类专栏： 个人学习笔记 文章标签： 前端 javascript 微信小程序 uni-app
于 2022-08-29 13:20:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niuroufen5/article/details/126566161
版权

目录

# uni-app的基本使用

## uni-app介绍 [官方网页]

## 环境搭建

## 利用HbuilderX初始化项目

## 运行项目 

## 介绍项目目录和文件作用

# 全局配置和页面配置

## 通过globalStyle进行全局配置

## 创建新的message页面

## 配置tabbar

## condition启动模式配置

# 组件的基本使用【文档】

## text文本组件的用法【文档】

## view视图容器组件的用法【文档】

## button按钮组件的用法【文档】

## image组件的使用【文档】

# uni-app中的样式

# uni-app中的数据绑定

## 插值表达式的使用

## v-bind动态绑定属性

## v-for的使用

# uni中的事件

## 事件绑定

## 事件传参

# uni的生命周期

## 应用的生命周期

 ## 页面的生命周期

 # 下拉刷新 【文档】

## 开启下拉刷新

## 监听下拉刷新

## 关闭下拉刷新

# 上拉加载【文档】

# 网络请求【文档】

# 数据缓存【文档】

## uni.setStorage

## uni.setStorageSync

## uni.getStorage

## uni.getStorageSync

## uni.removeStorage

## uni.removeStorageSync

# 上传图片、预览图片【文档】

## 上传图片

## 预览图片

# 条件注释实现跨段兼容 【文档】

## 组件的条件注释

## api的条件注释

## 样式的条件注释

# uni中的导航跳转

## 利用navigator进行跳转 【文档】

## 利用编程式导航进行跳转【文档】

## 导航跳转传递参数

# uni-app中组件的创建

## 组件的生命周期函数

# 组件的通讯

## 父组件给子组件传值

## 子组件给父组件传值

## 兄弟组件通讯

#### uni-ui的使用【uni-ui文档】

# uni-app的基本使用

基础部分：

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

项目：黑马商城项目

## uni-app介绍 [官方网页]

`uni-app` 是一个使用  Vue.js (https://vuejs.org/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

即使不跨端，`uni-app`同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手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进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。下面列举几个重要的，其他见[详细文档]

属性类型默认值描述平台差异说明
navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色（同状态栏背景色）APP与H5为#F7F7F7，小程序平台请参考相应小程序文档
navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
navigationStyleStringdefault导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
backgroundColorHexColor#ffffff下拉显示出来的窗口的背景色微信小程序
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / light微信小程序
enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面生命周期。
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

## 创建新的message页面

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

<template>
    <view>
        这是信息页面
    </view>
</template>

<script>
</script>

<style>
</style>
  • 通过 pages.json 来配置页面
属性类型默认值描述
pathString配置页面路径
styleObject配置页面窗口表现，配置项参考下方 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 按数组的顺序排序。

** 属性说明 **

属性类型必填默认值描述平台差异说明
colorHexColor是tab 上的文字默认颜色
selectedColorHexColor是tab 上的文字选中时的颜色
backgroundColorHexColor是tab 的背景色
borderStyleString否blacktabbar 上边框的颜色，可选值 black/whiteApp 2.3.4+ 支持其他颜色值、H5 3.0.0+
blurEffectString否noneiOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明 (opens new window)）App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
listArray是tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
positionString否bottom可选值 bottom、toptop 值仅微信小程序支持

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性类型必填说明平台差异
pagePathString是页面路径，必须在 pages 中先定义
textString是tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPathString否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPathString否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效

案例代码：

"tabBar": {
		"color": "#A0522D",
		"selectedColor": "#B3EE3A",
		"backgroundColor": "#fff",
		"borderStyle": "white",
		"position": "top",
		"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启动模式配置

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

** 属性说明 **

属性类型是否必填描述
currentNumber是当前激活的模式，list节点的索引值
listArray是启动模式列表

** list说明 **

属性类型是否必填描述
nameString是启动模式名称
pathString是启动页面路径
queryString否启动参数，可在页面的 onLoad 函数里获得

 案例代码：

"condition": {
		"current": 0,
		"list": [
			{
				"name": "详情页",
				"path": "pages/detail/detail",
				"query": "id=80"
			}
		]
	}

# 组件的基本使用【文档】

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用

uni-app中的组件，就像 `HTML` 中的 `div` 、`p`、`span` 等标签的作用一样，用于搭建页面的基础结构

## text文本组件的用法【文档】

001 - text 组件的属性

属性名类型默认值说明平台差异说明
selectableBooleanfalse文本是否可选App、H5、快手小程序
user-selectBooleanfalse文本是否可选微信小程序
spaceString显示连续空格，可选参数：`ensp`、`emsp`、`nbsp`App、H5、微信小程序
decodeBooleanfalse是否解码App、H5、微信小程序
  • <text> 组件相当于行内标签、在同一行显示
  • <text> 组件内只支持嵌套 <text>
  • 除了文本节点以外的其他节点都无法长按选中
  • 支持 \n 方式换行。
  • 如果使用 <span> 组件编译时会被转换为 <text>。
  • decode 可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
  • 各个操作系统的空格标准并不一致。

002 - 代码案例

<view>
  <!-- 长按文本是否可选 -->
  <text selectable='true'>来了老弟</text>
</view>

<view>
  <!-- 显示连续空格的方式 -->
  <view>
    <text space='ensp'>来了  老弟</text>
  </view>
  <view>
    <text space='emsp'>来了  老弟</text>
  </view>
  <view>
    <text space='nbsp'>来了  老弟</text>
  </view>
</view>

<view>
  <text>skyblue</text>
</view>

<view>
  <!-- 是否解码 -->
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

## view视图容器组件的用法【文档】

View 视图容器， 类似于 HTML 中的 div

001 - 组件的属性

属性名类型默认值说明
hover-classStringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-timeNumber50按住后多久出现点击态，单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒

002 - 代码案例

<view class="box2" hover-class="box2_active">
  <view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>

  </view>
</view>

## button按钮组件的用法【文档】

001 - 组件的属性

属性名类型默认值说明生效时机平台差异说明
sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
  • size 有效值
值说明
default默认大小
mini小尺寸，`button` 组件默认独占一行，设置 `size` 为 `mini` 时可以在一行显示多个
  • type 有效值
值说明
primary微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式
default白色
warn红色
  • form-type 有效值
值说明
submit提交表单
reset重置表单

002 - 案例代码

<button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>

## image组件的使用【文档】

属性名类型默认值说明平台差异说明
srcString图片资源地址
modeString'scaleToFill'图片裁剪、缩放的模式

mode 有效值：

mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

模式值说明
缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变
缩放heightFix高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
裁剪top不缩放图片，只显示图片的顶部区域
裁剪bottom不缩放图片，只显示图片的底部区域
裁剪center不缩放图片，只显示图片的中间区域
裁剪left不缩放图片，只显示图片的左边区域
裁剪right不缩放图片，只显示图片的右边区域
裁剪top left不缩放图片，只显示图片的左上边区域
裁剪top right不缩放图片，只显示图片的右上边区域
裁剪bottom left不缩放图片，只显示图片的左下边区域
裁剪bottom right不缩放图片，只显示图片的右下边区域

** 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` 项目相同，需要注意以下几点：
  1.  字体文件小于 40kb，`uni-app` 会自动将其转化为 base64 格式；
  2.  字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
  3.   字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }
  • 如何使用scss
  1. 需要在 HBuilderX 里面安装 scss 插件
  2. 使用时需要在 style 节点上加上 lang="scss"

# uni-app中的数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

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

## 插值表达式的使用

  • 利用插值表达式渲染基本数据
  <view>{{msg}}</view>
  • 在插值表达式中使用三元运算
  <view>{{ flag ? '我是真的':'我是假的' }}</view>
  • 基本运算
  <view>{{1+1}}</view>

## v-bind动态绑定属性

在data中定义了一张图片，我们希望把这张图片渲染到页面上

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

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成:

<image :src="img"></image>

## v-for的使用

data中定以一个数组，最终将数组渲染到页面上

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

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>

# uni中的事件

## 事件绑定

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {
  tapHandle () {
    console.log('真的点我了')
  }
}

## 事件传参

  • 默认如果没有传递参数，事件函数第一个形参为事件对象
 // template
  <button @click="tapHandle">点我啊</button>
  // script
  methods: {
    tapHandle (e) {
      console.log(e)
    }
  }
  • 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据
  // template
  <button @click="tapHandle(1)">点我啊</button>
  // script
  methods: {
    tapHandle (num) {
      console.log(num)
    }
  }
  • 如果获取事件对象也想传递参数
  // template
  <button @click="tapHandle(1,$event)">点我啊</button>
  // script
  methods: {
    tapHandle (num,e) {
      console.log(num,e)
    }
  }

# uni的生命周期

## 应用的生命周期

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

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

`uni-app` 支持如下应用生命周期函数（用在App.vue中）：

函数名说明
onLaunch当uni-app 初始化完成时触发（全局只触发一次）
onShow当 uni-app 启动，或从后台进入前台显示
onHide当 uni-app 从前台进入后台
onError当 uni-app 报错时触发

案例代码 

export default {
	onLaunch: function() {
		console.log('App Launch')
	},
	onShow: function() {
		console.log('App Show')
	},
	onHide: function() {
		console.log('App Hide')
	},
	onError:function(err){
		console.log('出现异常了',err)
	}
}

 ## 页面的生命周期

`uni-app` 支持如下页面生命周期函数(用在pages 目录下 的 vue 文件中)：

函数名说明平台差异说明最低版本
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载

案例代码：

export default {
	onLoad(options) {
		console.log('页面加载了',options)
	},
	onShow() {
		console.log('页面显示了')
	},
	onReady(){
		console.log('页面初次渲染完成了')
	},
	onHide() {
		console.log('页面隐藏了')
	}
}

 # 下拉刷新 【文档】

## 开启下拉刷新

在uni-app中有两种方式开启下拉刷新

  1. 需要在 `pages.json` 里，找到的当前页面的pages节点，并在 `style` 选项中开启 `enablePullDownRefresh`
  2. 通过调用uni.startPullDownRefresh方法来开启下拉刷新

（1）通过配置文件pages.json开启

        创建list页面进行演示

<template>
    <view>
        杭州学科
        <view v-for="(item,index) in arr" :key="index">
            {{item}}
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                arr: ['前端','java','ui','大数据']
            }
        }
    }
</script>

<style>
</style>

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

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

2. 通过API开启【api文档】

uni.startPullDownRefresh()

## 监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

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

## 关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<template>
    <view>
        <button type="primary" @click="startPull">开启下拉刷新</button>
        杭州学科
        <view v-for="(item,index) in arr" :key="index">
            {{item}}
        </view>
    </view>
</template>
<script>
    export default {
        data () {
            return {
                arr: ['前端','java','ui','大数据']
            }
        },
        methods: {
            startPull () {
                uni.startPullDownRefresh()
            }
        },
        onPullDownRefresh () {
            this.arr = []
            setTimeout(()=> {
                this.arr = ['前端','java','ui','大数据']
                uni.stopPullDownRefresh()
            }, 1000);
        }
    }
</script>

# 上拉加载【文档】

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

通过onReachBottom监听到触底的行为

<template>
    <view>
        <button type="primary" @click="startPull">开启下拉刷新</button>
        杭州学科
        <view v-for="(item,index) in arr" :key="index">
            {{item}}
        </view>
    </view>
</template>
<script>
    export default {
        data () {
            return {
                arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
            }
        },
        onReachBottom () {
            console.log('触底了')
        }
    }
</script>

<style>
    view{
        height: 100px;
        line-height: 100px;
    }
</style>

# 网络请求【文档】

在uni中可以调用uni.request（object）方法进行请求网络请求

OBJECT 参数说明

参数名类型必填默认值说明平台差异说明
urlString是开发者服务器接口地址
dataObject/String/ArrayBuffer否请求的参数App 3.3.7 以下不支持 ArrayBuffer 类型
headerObject否设置请求的 header，header 中不能设置 Referer。App、H5端会自动带上cookie，且H5端不可手动修改
methodString否GET有效值详见下方说明
timeoutNumber否60000超时时间，单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
dataTypeString否json如果设为 json，会尝试对返回的数据做一次 JSON.parse
responseTypeString否text设置响应的数据类型。合法值：text、arraybuffer支付宝小程序不支持
sslVerifyBoolean否true验证 ssl 证书仅App安卓端支持（HBuilderX 2.3.3+），不支持离线打包
withCredentialsBoolean否false跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
firstIpv4Boolean否falseDNS解析时优先使用ipv4仅 App-Android 支持 (HBuilderX 2.8.0+)
successFunction否收到开发者服务器成功返回的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

** 发送get请求 **

<template>
    <view>
        <button @click="sendGet">发送请求</button>
    </view>
</template>
<script>
    export default {
        methods: {
            sendGet () {
                uni.request({
                    url: 'http://localhost:8082/api/getlunbo',
                    method: 'GET',
                    success(res) {
                        console.log(res)
                    }
                })
            }
        }
    }
</script>

** 发送post请求 **

# 数据缓存【文档】

## uni.setStorage

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

代码演示

<template>
    <view>
        <button type="primary" @click="setStor">存储数据</button>
    </view>
</template>

<script>
    export default {
        methods: {
            setStor () {
                uni.setStorage({
                     key: 'id',
                     data: 100,
                     success () {
                         console.log('存储成功')
                     }
                 })
            }
        }
    }
</script>

<style>
</style>

## uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口

代码演示

<template>
    <view>
        <button type="primary" @click="setStor">存储数据</button>
    </view>
</template>

<script>
    export default {
        methods: {
            setStor () {
                uni.setStorageSync('id',100)
            }
        }
    }
</script>

<style>
</style>

## uni.getStorage

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

代码演示

<template>
    <view>
        <button type="primary" @click="getStorage">获取数据</button>
    </view>
</template>
<script>
    export default {
        data () {
            return {
                id: ''
            }
        },
        methods: {
            getStorage () {
                uni.getStorage({
                    key: 'id',
                    success:  res=>{
                        this.id = res.data
                    }
                })
            }
        }
    }
</script>

## uni.getStorageSync

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

代码演示

<template>
    <view>
        <button type="primary" @click="getStorage">获取数据</button>
    </view>
</template>
<script>
    export default {
        methods: {
            getStorage () {
                const id = uni.getStorageSync('id')
                console.log(id)
            }
        }
    }
</script>

## uni.removeStorage

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

代码演示

<template>
    <view>
        <button type="primary" @click="removeStorage">删除数据</button>
    </view>
</template>
<script>
    export default {
        methods: {
            removeStorage () {
                uni.removeStorage({
                    key: 'id',
                    success: function () {
                        console.log('删除成功')
                    }
                })
            }
        }
    }
</script>

## uni.removeStorageSync

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

代码演示

<template>
    <view>
        <button type="primary" @click="removeStorage">删除数据</button>
    </view>
</template>
<script>
    export default {
        methods: {
            removeStorage () {
                uni.removeStorageSync('id')
            }
        }
    }
</script>

# 上传图片、预览图片【文档】

## 上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照

案例代码

<template>
    <view>
        <button @click="chooseImg" type="primary">上传图片</button>
        <view>
            <image v-for="item in imgArr" :src="item" :key="index"></image>
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                imgArr: []
            }
        },
        methods: {
            chooseImg () {
                uni.chooseImage({
                    count: 9,
                    success: res=>{
                        this.imgArr = res.tempFilePaths
                    }
                })
            }
        }
    }
</script>

## 预览图片

结构

<view>
    <image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>

预览图片的方法 uni.previewImage

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

# 条件注释实现跨段兼容 【文档】

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

** 写法 **   以  #ifdef  或  #ifndef  加平台标识 %PLATFORM% 开头，以  #endif  结尾。

条件编译写法说明

#ifdef APP-PLUS
需条件编译的代码
#endif

仅出现在 App 平台下的代码

#ifndef H5
需条件编译的代码
#endif

除了 H5 平台，其它平台均存在的代码

#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

在 H5 平台或微信小程序平台存在的代码（ 多平台同时编译，使用 || 来分隔平台名称，这里只有||，不可能出现&&，因为没有交集 )

%PLATFORM%平台标识

VUE3HBuilderX 3.2.0+ 详情(opens new window)
APP-PLUS5+App
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序

## 组件的条件注释

代码演示

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
  微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
  app会显示
</view>
<!-- #endif -->

## 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进行跳转 【文档】

跳转到普通页面

  • 该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。
<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>

跳转到tabbar页面

  • 跳转tabbar页面，必须设置open-type="switchTab"
<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳转到message页面</button>
</navigator>

open-type 有效值

值说明平台差异说明
navigate对应 uni.navigateTo 的功能
redirect对应 uni.redirectTo 的功能
switchTab对应 uni.switchTab 的功能
reLaunch对应 uni.reLaunch 的功能字节跳动小程序与飞书小程序不支持
navigateBack对应 uni.navigateBack 的功能
exit退出小程序，target="miniProgram"时生效微信2.1.0+、百度2.5.2+、QQ1.4.7+

## 利用编程式导航进行跳转【文档】

  • 利用  uni.navigateTo  进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用`uni.navigateBack`可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过 uni.navigateTo 方法进行跳转到普通页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}
  • 通过  uni.switchTab  跳转到tabbar页面

跳转到 tabbar 页面，并关闭其他所有非 tabBar 页面

注意：跳转到 tabBar 页面只能使用 switchTab 跳转

<button type="primary" @click="goMessage">跳转到message页面</button>

通过 uni.switchTab 方法进行跳转

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}
  • uni.redirectTo进行跳转

关闭当前页面，跳转到应用内的某个页面。

<!-- template -->
<button type="primary" @click="redirectDetail">跳转到detail页面</button>
<!-- js -->
redirectDetail() {
  uni.redirectTo({
    url: '/pages/detail/detail'
  })
}

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

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

## 导航跳转传递参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

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

接收参数的页面

<script>
    export default {
        onLoad (options) {
            console.log(options)
        }
    }
</script>

# uni-app中组件的创建

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

  • 创建login组件，在component中创建login目录，然后新建login.vue文件
<template>
      <view>
          这是一个自定义组件
      </view>
</template>

<script>
</script>

<style>
</style>
  • 在其他组件中导入该组件并注册
  import login from "@/components/test/test.vue"
  • 注册组件
  components: {test}
  • 使用组件
  <test></test>


## 组件的生命周期函数

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名说明平台差异说明最低版本
beforeCreate在实例初始化之前被调用。详见(opens new window)
created在实例创建完成后被立即调用。详见(opens new window)
beforeMount在挂载开始之前被调用。详见(opens new window)
mounted挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档(opens new window)
beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)仅H5平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)仅H5平台支持
beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)
destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

# 组件的通讯

## 父组件给子组件传值

通过props来接受外界传递到组件内部的值

<template>
    <view>
        这是一个自定义组件 {{msg}}
    </view>
</template>

<script>
    export default {
        props: ['msg']
    }
</script>

<style>
</style>

其他组件在使用login组件的时候传递值

<template>
    <view>
        <test :msg="msg"></test>
    </view>
</template>

<script>
    import test from "@/components/test/test.vue"
    export default {
        data () {
            return {
                msg: 'hello'
            }
        },
        
        components: {test}
    }
</script>

## 子组件给父组件传值

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

<template>
    <view>
        这是一个自定义组件 {{msg}}
        <button type="primary" @click="sendMsg">给父组件传值</button>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                status: '打篮球'
            }
        },
        props: {
            msg: {
                type: String,
                value: ''
            }
        },
        methods: {
            sendMsg () {
                this.$emit('myEvent',this.status)
            }
        }
    }
</script>

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

<template>
    <view>
        <test :msg="msg" @myEvent="getMsg"></test>
    </view>
</template>
<script>
    import test from "@/components/test/test.vue"
    export default {
        data () {
            return {
                msg: 'hello'
            }
        },
        methods: {
            getMsg (res) {
                console.log(res)
            }
        },
        
        components: {test}
    }
</script>

## 兄弟组件通讯

#### 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、使用组件

<uni-grid :column="3">
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
  <uni-grid-item>
    <text class="text">文本</text>
  </uni-grid-item>
</uni-grid>
牛肉粉面
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Uni-app 学习笔记
javaGHui的博客
02-05 1321
Uni-app 学习笔记
uni-app学习笔记
06-16
【uni-app学习笔记】 uni-app 是一个由ECharts团队开发的多端开发框架，它允许开发者使用一套代码来构建iOS、Android、H5、微信小程序、支付宝小程序等多个平台的应用。这个框架基于Vue.js，提供了丰富的组件和API...
uniapp tabBar app页面滚动闪屏的问题
cv1002420186的博客
05-29 504
我在做app的时候，调试tabBar页面滚动时莫名其妙的闪屏，其他页面不闪屏，可能跟新建的项目样式有关。如上代码，把blurEffect那行注释调，这样在app调试就不会闪屏了。在pages.json中。
uni-app学习笔记 移动应用开发——基于uni-app开发 基础部分 1.1 uni-app发展历程 && 1.2 uni-app开发环境配置 && 1.3 uni-app打包
谢谢你们的关注
08-26 1213
uni-app学习笔记 移动应用开发——基于uni-app开发 基础部分 1.1 uni-app发展历程 && 1.2 uni-app开发环境配置 && 1.3 uni-app打包
uni-app学习笔记和新闻资讯app项目总结
qq_46336617的博客
06-22 688
随着移动应用开发的快速发展，跨平台开发成为了许多开发者的追求。在我最近的学习中，我有幸接触到了Uni-app这个跨平台应用开发框架，它为我打开了一扇全新的大门。本文将分享我在学习Uni-app的过程中的笔记和项目心得体会。一、uni-app是什么？Uni-app是一个基于Vue.js框架的跨平台应用开发框架，它可以同时开发iOS、Android和Web应用。使用Uni-app，我们只需要编写一套代码，即可在不同平台上运行应用，大大提高了开发效率和降低了维护成本。
uni-app学习笔记(二)
weixin_50705168的博客
08-27 912
condition 启动配置 启动模式配置 仅开发期间生效 用于模拟直达页面的场景 如:小程序转发后 用户点击所打开的页面 属性说明: 属性 类型 是否必填 描述 current Number 是 当前激活的模式 list节点的索引值 list Array 是 启动模式列表 list说明: 属性 类型 是否必填 描述 name String 是 启动模式名称 path String 是 启动页面路径 query String 否 启动参数 可在这里 获取
uni-app学习笔记#1
sscpp__的博客
06-03 167
按照故障排查指南排查后仍然检测不到设备，打开手机开发者模式，把默认USB选项改成MIDI模式就能查找到设备了
uni-app 学习笔记（三）uni-app中的各种引用
qq_44648936的博客
04-12 5447
一、组件引用 组件的引用有三种办法 1、默认写法，即导入——注册——使用 2、vue3使用了新的语法糖，优化了步骤 3、uni-app继续优化为一步，引入easycom机制 但是这种优化是有条件的，页面直接使用，需要符合components/组件名称/组件名称.vue目录结构，这样才可以直接在页面中使用 举个栗子 新建components目录和test组件 <template> <view class="content"> <button type="p
uni-app学习笔记(完)
weixin_50705168的博客
08-28 993
uni-app中的数据绑定 在页面中需要定义数据 和我们之前的vue一模一样 直接在data中定义数据即可 export default{ data(){ return{ msg:'hello-uniapp' } } } 插值表达式的使用 使用插值表达式渲染基本数据 <view>{{msg}}}</view> 在插值表达式中使用三元运算 <view>{{flag ? '真的':'假的'}
uni-app学习笔记及感悟
snow_7769的博客
05-13 301
在学习uni-app中，我们需要用到HBuilderX、微信开发者工具 、vscode，一般用HBuilderX比较多。HBuilderX是为前端开发者服务的通用 IDE，或者称为编辑器；HBuilder是一个 web开发的 IDE，它支持HTML5。旧的 HBuilder是一个红色的标志，并且在2018年就已经不再更新了。带有绿色标志的 HBuilderX是新版本的选择；顶级的 AST文法解析技巧，语法提示准确，全面，一丝不苟，转到定义，重构，完善，为其它工具提供更好的 Vue支持。
HBuilderX,uni-app
10-01
HBuilderX 和 uni-app 多端开发框架 uni-app 是一个基于 Vue.js 的多端开发框架，允许开发者使用一套代码发布到多个平台，包括 iOS、Android、Web 和各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）。uni...
微信小程序+云开发+mpvue+uni-app跨平台-6天资料
12-22
5. **uni-app跨平台开发**：掌握uni-app的配置和使用，学习如何利用uni-App的API进行跨平台开发，了解如何处理不同平台的适配问题。 6. **实战项目**：通过实际开发案例，锻炼项目构建能力，从需求分析到UI设计，再...
vue随堂笔记.pdf
10-15
uni-app 是一个跨端框架，基于Vue.js 开发，可以一次编写，多端运行，覆盖包括H5、小程序、App等在内的多种平台，极大地提高了开发效率和代码复用性。 总的来说，Vue.js 和其相关的工具，如Vue CLI和Webpack，以及...
02-笔记.zip
03-10
1. "在线笔记-长期更新【推荐】.txt"：这可能是一个持续更新的在线学习笔记，被作者强烈推荐，内容可能包括了作者在学习过程中积累的知识点、技巧、问题解答等。由于是.txt格式，这是一份纯文本文件，易于阅读和编辑...
网站基本布局CSS
m0_46608027的博客
07-24 781
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
Web安全:Web体系架构存在的安全问题和解决方室
程序员-张师傅
07-24 1484
Web体系架构在提供丰富功能和高效服务的同时，也面临着诸多安全问题。这些问题可能涉及数据泄露、服务中断、系统被控制等多个方面，对企业和个人造成不可估量的损失。
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 782
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
uni-app 局部刷新
08-11
在uni-app中，可以通过下拉刷新来实现局部刷新。你可以在页面的配置文件pages.json中找到当前页面的pages节点，并在style选项中开启enablePullDownRefresh来开启下拉刷新。另外，你也可以通过调用uni.startPullDownRefresh方法来手动触发下拉刷新操作。更多详细信息可以查看uni-app官网的配置项列表页面(https://uniapp.dcloud.net.cn/collocation/pages.html#配置项列表)。123 #### 引用[.reference_title] - *1* *2* [【uni-app教程】uni-app入门教程](https://blog.csdn.net/beiluoL/article/details/129264321)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *3* [基于vue的uni-app生态——学习笔记001](https://blog.csdn.net/qq_63690649/article/details/129516372)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值