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

• 选择图片
• https://uniapp.dcloud.io/api/media/image?id=chooseimage

uploadFile

• 文件上传
• https://uniapp.dcloud.io/api/request/network-file

previewImage

• 预览图片
• https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject

网络

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)

  • https://uniapp.dcloud.io/api/ui/nodes-info

• 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。（但通过赋值方式获取会出现同异步问题）
• 更多内容了解