uni-app API

onShareAppMessage

  • 生命周期中的分享，自带原生分享

onShareTimeline

  • 自定义分享

onReachBottom

  • 下滑到页面底部触发，一般用于继续获取数据

setNavigationBarTitle

  • 设置标签页标题

navigateBack

  • 关闭当前页面，返回上一页面或多级页

showToast

  • 轻提示

navigateTo

  • 跳转到应用内的某个页面，保留原有页面

setStorage

  • 将数据存储到本地中，会覆盖原有相同key（异步操作）

canvasToTempFilePath

  • 把当前区域指定内容 导出生成指定图片大小，并返回文件路径

saveImageToPhotosAlbum

  • 将图片存储到本地相册

getImageInfo

  • 获取图片信息
  • src success fail complete

uni.getUpdateManager

  • 本API返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。
  • updateManager

|方法|参数|说明|
|–|–|–|–|
|onCheckForUpdate| callback| 当向小程序后台请求完新版本信息，会进行回调|
|onUpdateReady| callback |当新版本下载完成，会进行回调|
|onUpdateFailed |callback |当新版本下载失败，会进行回调|
|applyUpdate | 当新版本下载完成，调用该方法会强制当前小程序应用上新版本并重启|

  • onCheckForUpdate
    • 返回属性 hasUpdate (是否有新版本)

uni.showNavigationBarLoading

  • 开启导航栏loading

uni.hideNavigationBarLoading

  • 停止导航栏loading

uni.showLoading

  • 展示 loading 框 。 可配置遮罩层、提示内容、回调函数。

uni.hideLoading

  • 停止 loading

uni.getSystemInfo

  • 获取用户信息
  • https://uniapp.dcloud.io/api/system/info?id=getsysteminfo

uni.getNetworkType

  • 获取网络类型
  • https://uniapp.dcloud.io/api/system/network?id=getnetworktype

uni.setClipboardData

  • 设置系统剪贴板的内容。
  • data:需要设置的内容

requestPayment

  • 支付
  • provider 服务提供商
  • orderInfo 订单数据
  • timeStamp 时间戳 （微信小程序必填）
  • nonceStr 随机字符串 （微信小程序必填）
  • package 下单接口返回的 prepay_id 值
  • signType 签名算法
  • paySign 签名

makePhoneCall

  • 拨打电话
    uni.getUpdateManager
  • 本API返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。
  • updateManager
    |方法| 参数 |说明|
    |–|–|–|–|
    |onCheckForUpdate| callback| 当向小程序后台请求完新版本信息，会进行回调|
    |onUpdateReady| callback |当新版本下载完成，会进行回调|
    |onUpdateFailed |callback |当新版本下载失败，会进行回调|
    |applyUpdate | 当新版本下载完成，调用该方法会强制当前小程序应用上新版本并重启|
  • onCheckForUpdate
    • 返回属性 hasUpdate (是否有新版本)

uni.showNavigationBarLoading

  • 开启导航栏loading
    uni.hideNavigationBarLoading
  • 停止导航栏loading

uni.showLoading

  • 展示 loading 框 。 可配置遮罩层、提示内容、回调函数。
    uni.hideLoading
  • 停止 loading
    uni.getSystemInfo
  • 获取用户信息
  • https://uniapp.dcloud.io/api/system/info?id=getsysteminfo
    uni.getNetworkType
  • 获取网络类型
  • https://uniapp.dcloud.io/api/system/network?id=getnetworktype
  • 返回 none 显示无网络，跳转到自定义的 无网络 页面。提示用户刷新，重新调用 uni.getNetworkType ,如果返回的值不等于none 就调用 uni.navigateBack({ delta: 1}) 回到上一层
    App.vue
  • 生命周期
    • onLaunch
      • 应用启动时,只会执行一次
    • onShow
      • 当应用切换到前台的时候
    • onHidden
      • 当应用切换到后台的时候
    • onUniNViewMessage
      • 对 nvue 页面发送的数据进行监听
    • onUnhandledRejection
      • 对未处理的 Promise 拒绝事件监听函数（就是调用 Promise 的时候，未对Promise的reject状态进行处理，就会调用这个方法）
    • onPageNotFound
      • 页面不存在监听函数 （当访问应用不存在的路由的时候，跳转到指定页面）
    • onThemeChange
      • 监听系统主题变化
  • 设置全局变量 globalData
  • 设置全局样式 @import ./scs/sd.css
多媒体处理

chooseImage

uploadFile

previewImage

网络

downloadFile

  • 文件下载
  • https://uniapp.dcloud.io/api/request/network-file?id=downloadfile
  • 参数 url 、 header 、 timeout 、 success 、 fail 、 complete
  • success 、 fail 、 complete 三者顺便写上一个参数 返回 downloadTask 对象
  • downloadTask 调用一些方法 监听下载进度
  • abort 中断下载任务
  • onProgressUpdate 监听下载进度变化
    • progress 下载百分比
    • totalBytesWritten 已经下载的数据长度
    • totalBytesExpectedToWrite 预计需要下载的数据总长度
节点操作

createSelectorQuery

  • 描述 ：返回一个SelectorQuery节点对象，可以使用此对象的方法对节点进行一些操作
  • 返回值：一个SelectorQuery节点对象
  • 注意事项 ：
    1. 需要在 mounted 生命周期后进行调用 os:是因为之前html模板还未挂载到页面上?
    2. 自定义组件编译模式（默认模式），需要使用到 selectorQuery.in 方法
  • https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery

selectorQuery

  • 查询节点信息的对象
  • 方法
    selectorQuery.in(component)
    描述：将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。
    参数：component
    返回值：一个 SelectorQuery 对象实例
    注意事项：支付宝小程序不支持in(component)，使用无效果

selectorQuery.select(selector)

  • 描述：在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
  • 参数：selector
    1. ID选择器：#the-id
    2. class选择器（可以连续指定多个）：.a-class.another-class
    3. 子元素选择器：.the-parent > .the-child
    4. 后代选择器：.the-ancestor .the-descendant
    5. 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
    6. 多选择器的并集：#a-node, .some-other-nodes
  • 返回值： 第一个匹配的节点（ NodesRef 对象实例）

selectorQuery.selectAll(selector)

  • 描述：在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
  • 参数：同上 selector
  • 返回值：匹配的所有节点（ NodesRef 对象实例）

selectorQuery.selectViewport(selector)

  • 描述：选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例。
  • 参数：同上 selector
  • 返回值：第一个匹配的节点（NodesRef 对象实例）

selectorQuery.exec(selector)

  • 描述：选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例。（请求应该是指前面选择获取元素的方法，看下面示例）
  • 参数：同上 selector
  • 返回值：第一个匹配的节点（ NodesRef 对象实例）
  this.$nextTick(() => {
    	  // 自定义組件模式下要使用in(this)
         const query = uni.createSelectorQuery().in(this); 
         query.select('.xx1').fields({ size: true})
         query.select('.xx2').fields({ size: true})
         query.select('.xx3').fields({ size: true})
         query.exec((data) => {
           console.log(data)
         });
       })

NodesRef

  • 描述：用于获取节点信息的对象
  • 方法：
    • nodesRef.fields(object,callback)
      • 描述 ：获取节点的相关信息
      • 参数 ： 1. 节点相关信息配置 2. 回调函数
      • callback 返回参数：
字段名 类型 默认值 必填 说明 平台差异说明
id Boolean false 否 是否返回节点 id
dataset Boolean false 否 是否返回节点 dataset App、微信小程序、H5
rect Boolean false 否 是否返回节点布局位置（left right top bottom）
size Boolean false 否 是否返回节点尺寸（width height）
scrollOffset Boolean false 否 是否返回节点的 scrollLeft scrollTop，节点必须是 scroll-view 或者 viewport
properties Array＜string＞ [] 否 指定属性名列表，返回节点对应属性名的当前属性值（只能获得组件文档中标注的常规属性值，id class style 和事件绑定的属性值不可获取） 仅 App 和微信小程序支持
computedStyle Array＜string＞ [] 否 指定样式名列表，返回节点对应样式名的当前值 仅 App 和微信小程序支持
context Boolean false 否 是否返回节点对应的 Context 对象 仅 App 和微信小程序支持
  • nodesRef.boundingClientRect(callback)
  • 描述： 添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery
  • 参数 ：回调函数
  • callback 返回参数：

|属性| 类型| 说明|
|–|–|–|–|
|id| String| 节点的 ID|
|dataset |Object |节点的 dataset|
|left |Number| 节点的左边界坐标|
|right| Number| 节点的右边界坐标|
|top |Number |节点的上边界坐标|
|bottom| Number| 节点的下边界坐标|
|width| Number| 节点的宽度|
|height| Number| 节点的高度|

  • nodesRef.scrollOffset(callback)
  • 描述：添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport。返回 NodesRef 对应的 SelectorQuery
  • 参数：回调函数
  • callback 返回参数：

|属性| 类型| 说明|
|–|–|–|–|
|id |String| 节点的 ID|
|dataset |Object| 节点的 dataset|
|scrollLeft |Number| 节点的水平滚动位置|
|scrollTop| Number| 节点的竖直滚动位置|

  • nodesRef.context(callback)
  • 描述：添加节点的 Context 对象查询请求。支持 VideoContext、CanvasContext、和 MapContext等的获取。
  • 参数：回调函数
  • 注意事项
    1. 仅支持 App、H5（HBuilderX 2.4.7+） 、微信小程序 、QQ小程序
  • callback 返回参数：

|属性| 类型| 说明|
|–|–|–|–|
|context |Object |节点对应的 Context 对象|

  • nodesRef.node(callback)

  • canvas

    • uni.createCanvasContext(canvasId, this)
      • canvasId canvas-id或id（支付宝小程序是id、其他平台是canvas-id）
      • this : 自定义组件实例 this , 表示在这个自定义组件下查找拥有 canvas-id 的 ，如果省略，则不在任何自定义组件内查找
      • 返回值:CanvasContext
        • CanvasContext.drawImage 绘制图像到画布
        • CanvasContext.fillText 在画布上绘制被填充的文本
        • CanvasContext.setFontSize 设置字体的字号。
        • CanvasContext.draw 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
        • https://uniapp.dcloud.io/api/canvas/CanvasContext
页面跳转
  • navigateTo
    • 跳转到应用的某个页面，会保留当前页面
    • 可以使用 navigateBack，返回到当前页面
  • switchTab
    • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
多平台处理

处理自适应

  • 同时使用 vw/rpx效果极好

#ifdef / #endif

  • 仅在某平台存在
  • #ifdef APP-PLUS 仅出现在APP平台
  • #ifdef H5 || APP-PLUS H5 或 APP

#ifndef / #endif

  • 除某平台外
  • #ifndef H5平台,其它平台均存在的代码
需要区别 H5 和 app 的地方
  • 除了H5 平台的 图片路径需要填写绝对路径
  • 文件上传地址 涉及到地址的地方都需要 区别 H5 和 App
  • app 端调用一些接口 需要使用 plus
    • http://www.html5plus.org/doc/zh_cn/gallery.html
标签/组件

template/block

  • uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>,用来进行 列表渲染 和 条件渲染。
  • 他俩都只是一个包装元素,不会渲染到页面上
  • 由于<block/> 在不同的平台上存在一定的差异,推荐统一使用<template/>
plus
  • plus.runtime.openFile
    • 调用第三方程序打开指定的文件
    • 参数 filepath 打开文件的路径 options 打开文件参数 errorCB 打开文件失败的回调
  • plus.runtime.version
    • 获取应用的版本号
  • plus.runtime.getProperty
    • 获取指定APPID对应的应用信息
    • 参数 appid callback
  • plus.runtime.openURL
    • 调用第三方程序，打开指定URL
  • plus.os.name
    • 获取手机平台（Android、Ios）
  • uni.getClipboardData
    • 获取系统剪贴板内容
  • plus.runtime.version
    • 获取应用版本号
  • plus.gallery.save
    • 保存文件到系统相册中。 每次仅能保存一个文件，支持图片文件（jpg/jpeg、png、bmp等格式）和视频文件（3gp、mov等格式）。 若保存的文件类型当前系统不支持，则通过errorCB回调返回错误信息。

NVUE文件杂记

  • 在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染
  • css 部分样式 不支持
  • 不支持less scss
  • 不支持嵌套样式类
  • 不支持id样式
  • 不支持 overflow:hidden
  • 不支持 百分比 和 vw/vh 模式
  • 默认布局方式为 弹性盒模型 display:flex;
  • flex-direction:column; 默认 列排列
  • vue 页面可通过 uni.createMapContext(‘mapRef’, this) 获取地图实例
  • nvue 页面通过 refs 方式获取。this.$refs.mapRef。（但通过赋值方式获取会出现同异步问题）
  • 更多内容了解
# uni-app # 学习 # 微信小程序
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

Kaldi之父，IEEE Fellow，小米首席语音科学家Daniel Povey将出席2024全球机器学习技术大会并发表演讲！

avatar CSDN学习社区
cover

探索神经网络在商品销售和图像识别中的应用

avatar CSDN学习社区
cover

基于stm32F103的座面声控台灯

avatar CSDN学习社区