uniapp 如何快速找到typescript语言有哪些

uni-app

一、生命周期

应用的(常用)生命周期

注意：应用生命周期仅可在App.vue中监听，其他页面无效

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

页面的生命周期

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

组件的生命周期

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

函数名	说明	平台差异
beforeCreate	在实例初始化之后调用
created	在实例创建完成后被立即调用
beforeMount	在挂载开始之前被调用
mounted	挂载到实例上去之后被调用（这里并不能确定子组件被全部挂载，如果需要完全挂载之后在执行操作可以使用$nextTick）
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前	仅在H5平台支持
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子	仅在H5平台支持
beforeDestroy	实例销毁之前调用，在这实例仍然完全可用
destroyed	Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑，所有的事件监听都会被移除，所有的子实例也会被销毁

二、下拉刷新

通过onPullDownRefresh函数监听用户下拉刷新事件（写法：与onLoad等声明周期同级）

通过配置文件开启

1. 全局（根目录page.json文件）

{
    "globalStyle": {
        ..., // 省略
        "enablePullDownRefresh": true // 是否开启下拉刷新
    }
}

1. 页面（根目录page.json文件）

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "enablePullDownRefresh":true//开启下拉刷新
      }
    },
    ...
  ]
}

通过APi的形式

• uni.startPullDownRefresh(object)手动触发开始下拉刷新（触发之后与用户手动下拉刷新一致）
  object参数说明

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调（返回参数errMsg，字符串类型：接口调用结果）
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（成功失败都执行）

• uni.stopPullDownRefresh() 停止当前页面下拉刷新

三、上拉加载

通过onReachBottom监听上拉触底回调（页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。）

通过配置文件设置上拉触底距离

1. 全局（根目录page.json文件）

{
    "globalStyle": {
        ..., // 省略
        "onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离，单位只支持px
    }
}

1. 页面（根目录page.json文件）

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "onReachBottomDistance":50 // 页面上拉触底事件触发时距页面底部距离，单位只支持px
      }
    },
    ...
  ]
}

四、数据缓存

1. uni.setStorage(Object)异步设置缓存
2. uni.setStorageSync(key, data)同步设置缓存
3. uni.getStorage(Object)异步获取缓存
4. uni.getStorageSync(key)同步获取缓存
5. uni.removeStorage(Object)异步删除缓存
6. uni.removeStorageSync(key)同步删除缓存
   Object参数如下：

参数名	类型	必填	说明
key	String	是	本地缓存中的指定的key
success	Function	是	成功的回调
fail	Function	否	失败的回调
complete	Function	否	成功或失败都会执行这个回调
data	Any	是(设置缓存才需要)	需要存储的内容，只支持原生类型，及能够通过JSON.stringfiy序列化的对象

五、条件注释实现跨端兼容

语法：

• ifdef: if defined 正向条件，也就是说在xx平台下生效
• ifndef: if not defined 反向条件，在xx平台不生效；即除了xx平台，其他平台都生效
• ebduf: 条件结束
• %PLATFORM%：平台名称

%PLATFORM%：取值如下：

值	平台
APP-PLUS	5+App
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	头条小程序
MP-QQ	QQ小程序
MP	微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序

<!-- 使用方式 -->

<template>
	<!-- #ifdef H5 -->
	<view>我只会在H5显示</view>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<view>我只会在微信小程序显示</view>
	<!-- #endif -->
</template>

<script>
	export default {
    	// ...,
        onLoad () {
            // #ifdef H5
            console.log('我只会在H5显示')
            // #endif
            
            // #ifdef MP-WEIXIN
            console.log('我只会在微信小程序显示')
            // #endif
        }
    }
</script>

<style>
/* #ifdef H5 */
    view {
        color: red;
    }
 /* #endif */
/* #ifdef MP-WEIXIN */
    view {
        color: green;
    }
 /* #endif */
</style>

六、导航

• 组件形式跳转
  navigator组件跳转（功能类似a标签）
  注意：跳转tabbar，必须设置open-type="switchTab"

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："…/first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

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+

• 编程式跳转

1. 利用navigateTo进行导航跳转
   保留当前页面，跳转到应用内的某一个页面，可以使用uni.navigateBack返回到原页面

//在起始页面跳转到test.vue页面并传递参数
  uni.navigateTo({
      url: '/pages/about/about'
  });

1. 通过switchTab跳转到tabbar页面
   跳转到tabbar页面

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

1. 利用redirectTo进行导航跳转
   关闭当前页面，跳转到应用内的某个页面

uni.redirectTo({
    url: '/pages/detail/detail'
})

1. 利用reLaunch进行导航跳转
   关闭所有页面，打开到应用内的某个页面

uni.redirectTo({
    url: '/pages/detail/detail'
})

1. 利用navigateTo进行返回上一页

uni.navigateTo({
	delta: 1, // 返回的页面数，如果当前数字大于现有的页面数，则返回首页
})