跳至主要內容

12.6 基础API 🎉

刘春龙...大约 5 分钟UNIAPPWEB前端uniapp

12.6 基础API 🎉

提示

本章节只讲解部分常用的API,更多API请参考https://uniapp.dcloud.net.cn/api/open in new window

路由(页面跳转) 💎

路由管理页面之间的跳转

  • uni.navigateTo(OBJECT)
  • uni.redirectTo(OBJECT)
  • uni.reLaunch(OBJECT)
  • uni.switchTab(OBJECT)

uni.navigateTo 👻

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

uni.navigateTo({
  url:"/pages/list/list"
})

uni.redirectTo 👻

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

uni.redirectTo({
  url:"/pages/list/list"
})

uni.reLaunch 👻

关闭所有页面,打开到应用内的某个页面

uni.reLaunch({
  url:"/pages/list/list"
})

uni.switchTab 👻

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

uni.switchTab({
  url:"/pages/list/list"
})

轻松一刻 🎧

音乐
音乐

视频教程 🎥

至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服open in new window进行相关咨询。

路由传参(页面通讯) 💎

在项目中,页面与页面之间必然会需要传递数据,接下里我们说一说传递数据的方案

路由跳转传递参数 👻

//传递
uni.navigateTo({
  url:"/pages/list/list?name=itbaizhan"
})

//接收
onLoad((options)=>{
   console.log(options.name)
})

组件之间传递参数 👻

  • 父传子

  • 子传父

提示

关于组件之间的通讯,请参考Vue组件通讯

轻松一刻 🎧

音乐
音乐

视频教程 🎥

至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服open in new window进行相关咨询。

组件通讯 💎

在uni-app中,组件通讯遵循Vue的规则

跨组件通讯

注意

在组件中,不可以使用onLoad()函数,在页面中才可以使用。

这里说的是非子父级关系的组件通讯,而是兄弟组件之间的数据传递

发送数据组件

sendWorldHandler(){
  uni.$emit('msg',{
       msg:'兄弟之间',
   })
}

获取数据组件

uni.$on('msg', function(data) {
  console.log(data.msg);
})

轻松一刻 🎧

音乐
音乐

视频教程 🎥

至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服open in new window进行相关咨询。

数据缓存_同步 💎

本地存储也是实际项目中必备的接口,一些用户信息、数据信息等需要存储到本地

同步数据缓存

  • uni.setStorageSync(KEY,DATA)
  • uni.getStorageSync(KEY)
  • uni.getStorageInfoSync()
  • uni.removeStorageSync(KEY)
  • uni.clearStorageSync()

uni.setStorageSync 👻

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

try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

uni.getStorageSync 👻

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

try {
    const value = uni.getStorageSync('storage_key');
    if (value) {
        console.log(value);
    }
} catch (e) {
    // error
}

uni.getStorageInfoSync 👻

同步获取当前 storage 的相关信息

try {
    const res = uni.getStorageInfoSync();
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
} catch (e) {
    // error
}

uni.removeStorageSync 👻

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

try {
    uni.removeStorageSync('storage_key');
} catch (e) {
    // error
}

uni.clearStorageSync 👻

同步清理本地数据缓存

try {
    uni.clearStorageSync();
} catch (e) {
    // error
}

轻松一刻 🎧

音乐
音乐

视频教程 🎥

至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服open in new window进行相关咨询。

数据缓存_异步 💎

本地存储也是实际项目中必备的接口,一些用户信息、数据信息等需要存储到本地

异步数据缓存

  • uni.setStorage(OBJECT)
  • uni.getStorage(OBJECT)
  • uni.getStorageInfo(OBJECT)
  • uni.removeStorage(OBJECT)
  • uni.clearStorage()

uni.setStorage 👻

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

uni.setStorage({
  key: 'storage_key',
  data: 'hello',
  success: function() {
    console.log('success');
   }
});

uni.getStorage 👻

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

uni.getStorage({
  key: 'storage_key',
  success: function (res) {
    console.log(res.data);
   }
});

uni.getStorageInfo 👻

异步获取当前 storage 的相关信息

uni.getStorageInfo({
  success: function (res) {
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
   }
});

uni.removeStorage 👻

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

uni.removeStorage({
  key: 'storage_key',
  success: function (res) {
    console.log('success');
   }
});

uni.clearStorage 👻

清理本地数据缓存

uni.clearStorage()

轻松一刻 🎧

音乐
音乐

视频教程 🎥

至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服open in new window进行相关咨询。

网络请求 💎

发起网络请求:uni.request(OBJECT)

参数说明

参数名类型必填默认值说明
urlString开发者服务器接口地址
dataObject/String/ArrayBuffer请求的参数
headerObject设置请求的 header,header 中不能设置 Referer。
methodStringGET请求方式
timeoutNumber60000超时时间,单位 ms
successFunction收到开发者服务器成功返回的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明

参数名类型必填默认值说明
urlString开发者服务器接口地址
dataObject/String/ArrayBuffer请求的参数
headerObject设置请求的 header,header 中不能设置 Referer。
methodStringGET请求方式
timeoutNumber60000超时时间,单位 ms
successFunction收到开发者服务器成功返回的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

GET请求 👻

uni.request({
  url: "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
  success(res) {
    console.log(res.data)
   }
})

POST请求 👻

uni.request({
  url: "http://iwenwiki.com/api/blueberrypai/login.php",
  data: {
    user_id: "iwen@qq.com",
    password: "iwen123",
    verification_code: "crfvw"
   },
  method: "POST",
  header: {
    'Content-type': 'application/x-www-form-urlencoded'
   },
  success(res) {
    console.log(res.data)
   }
})

轻松一刻 🎧

音乐
音乐

视频教程 🎥

至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服open in new window进行相关咨询。

上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7