当前位置:   article > 正文

微信小程序--API_已知键名称为test01,试写出异步函数wx.removestorage()的成功回调函数,并使用

已知键名称为test01,试写出异步函数wx.removestorage()的成功回调函数,并使用

小程序API分类 

异步API:通常接受一个object类型参数 例如 wx:request({})

同步API:约定以Sync结尾 例如 wx:setStorageSync()

事件监听API:约定以on开头 例如 wx:onAppHide()

异步API

支持callback 或者 Promise 两种调用方式

1.当接口参数 Object 对象中不包含 success/fail/complete 时默认返回Promise

2.部分接口 如request , uploadFile 本身就有返回值,因此不支持Promise风格的调用方式,他们

的promisify 需要开发者自行封装

发起网络请求获取服务器的数据,需要使用 wx.request() 接口 API

网络请求

wx.request 请求的域名必须在微信公众平台进行配置,如果使用 wx.request 请求未配置的域名,
在控制台会有相应的报错。
跳过域名的校验的开发
1. 在微信开发者工具中,点击详情按钮,切换到本地详情,将 不校验合法域名、web-view (业务
域名)、TLS版本以及HTTPS证书 勾选上
2. 在真机上,需要点击胶囊区域的分析按钮,在弹框中选择 开发调试,重启小程序后即可
注意事项 : 这两种方式只适用于开发者工具、小程序的开发版和小 程序的体验版,项目上线前
必须在小程序管理平台进行合法域名的配置

界面交互-loading 提示框

小程序提供了一些用于界面交互的 API,例如: loading 提示框、消息提示框、模态对话框等 API

loading 提示框常配合网络请求来使用,用于增加用户体验,对应的 API 有两个:
1.wx.showLoading() 显示 loading 提示框
  1. wx.showLoading({
  2. //显示提示的内容,提示内容不易过长,不会自动换行,多出来的部分会自动隐藏
  3. title:''
  4. // 是否展示透明蒙层,放置触摸穿透(true,展示蒙层,不会点击再次触发)
  5. mask:'true',
  6. })

2.wx.hideLoading() 关闭 loading 提示框

可写在complete回调函数里

注:两者必须配对使用

界面交互-模态对话框-消息提示框

1. wx.showModal() :模态对话框,常用于询问用户是否执行一些操作

例如:询问用户是否退出登录、是否删除该商品

2. wx.showToast() :消息提示框,根据用户的某些操作来告知操作的结果

例如:退出成功给用户提示,提示删除成功等

  1. // 点击删除
  2. async handleDel () {
  3. // showModel 显示模态对话框
  4. const {confirm} = await wx.showModel({
  5. title:'提示',
  6. content:'是否删除该商品',
  7. })
  8. if(confirm) {
  9. // showToast 消息提示框
  10. wx.showToast({
  11. title:'删除成功'
  12. icon:'none',
  13. duration:2000
  14. })
  15. }else {
  16. wx.showToast({
  17. title:'取消删除'
  18. icon:'error',
  19. duration:2000
  20. })
  21. }
  22. }

本地存储

同步 

存储:wx.setStorageSync()

获取:wx.getStorageSync()

删除:wx.removeStorageSync()
清空:wx.clearStorageSync()
异步

存储:wx.setStorage()

获取:wx.getStorage()

删除:wx.removeStorage()
清空:wx.clearStorage()
  1. page({
  2. // 存储
  3. // 如果存储的是对象类型数据,不需要使用JSON.stringify 和 JSON.parse 进行转化
  4. setStorage () {
  5. wx.setStorageSync('本地存储中指定key','需要存储的数据value') // 同步
  6. wx.setStorage({key:'num',data:1}) // 异步
  7. wx.setStorage({key:'obj',data:{name:'jerry',age:18}) // 异步
  8. }
  9. // 获取
  10. getStorage () {
  11. const key = wx.getStorageSync('key') //同步
  12. console.log(key)
  13. const key = wx.getStorage({key:'num'}) // 异步
  14. }
  15. // 删除
  16. removeStorage () {
  17. // 从本地移除指定的key的数据和内容
  18. wx.removeStorageSync('key') //同步
  19. wx.removeStorage({key:'num'}) // 异步
  20. }
  21. // 清空
  22. clearStorage () {
  23. wx.clearStorageSync() //同步
  24. wx.removeStorage() // 异步
  25. }
  26. })

路由与通信

 1. 声明式导航

navigator 组件

绑定属性open-type 

navigate:保留当前页面,跳转到某个页面,但不能跳转到tabbar页面

redirect:关闭当前页面,跳转到某个页面,但不能跳转到tabbar页面

switchTab:跳转到tabbar页面。并关闭其他所有的非tabbar页面

reLaunch:关闭所有页面,跳转到某个页面

navigateBack:关闭当前页面,返回上一页面或多级页面

注:url 后可参数,参数与路径之间用?隔开,参数键与参数值用=相连,不同参数,用&分割

2. 编程式导航

使用小程序提供的 API  

wx.navigateTo ({}):保留当前页面,跳转到某个页面,但不能跳转到tabbar页面

wx.redirectTo ({}):关闭当前页面,跳转到某个页面,但不能跳转到tabbar页面

wx.switchTab({}):跳转到tabbar页面。路径后不能带参数

wx.reLaunch({}):关闭所有页面,跳转到某个页面

wx.navigateBack({}):关闭当前页面,返回上一页面或多级页面

注:url 后参数与路径之间用?隔开,参数键与参数值用=相连,不同参数,用&分割

例如: path?key=value&key2=value2 参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进
行接收

页面处理函数

上拉加载是小程序中常见的一种加载方式,当用户滑动页面到底部时,会自动加载更多的内容,以便用户继续浏览

小程序中实现上拉加载的方式

1. 在app.json 或者 page.json 在配置距离页面底部距离:onReachBottomDistance;默认 50px

2.在页面js中定义onReachBottom事件监听用户上拉加载

  1. .json 文件
  2. {
  3. "usingComponents": {},
  4. "onReachBottomDistance":50
  5. }
  6. .js 文件
  7. Page({
  8. // 监听用户加载
  9. onReachBottom(){
  10. // 上拉加载后具体操作
  11. ......
  12. }
  13. })

下拉刷新是小程序中常见的一种刷新方式,当用户下拉页面时,页面也会自动刷新,以便用户获取最新的内容

小程序中实现上拉加载更多的方式:

1.在app.json或者page.json中开启允许下拉,同时可以配置窗口、loading样式等

2.在页面.js中定义onPullDownRefresh事件监听用户下拉刷新

  1. .json 文件
  2. {
  3. "usingComponents": {},
  4. "onReachBottomDistance":50
  5. // 设置同意下拉刷新
  6. "enablePullDownfresh":true
  7. }
  8. .js 文件
  9. Page({
  10. // 监听用户下拉刷新
  11. onPullDownRefresh(){
  12. // 下拉刷新后具体操作
  13. ......
  14. // 在下拉刷新后 loading效果可能弹不回去
  15. if(条件判断){
  16. wx.stopPullDownRefresh()
  17. }
  18. }
  19. })

scroll-view 

使用 scroll-view 实现上拉加载更多和下拉刷新功能
  1. .wxml 页面
  2. <scroll-view
  3. scroll-y
  4. class="scroll-y"
  5. lower-threshold="100" // 上拉触发事件的条件
  6. bindscrolltolower="getMore" // 上拉触发绑定的监听事件
  7. enable-back-to-top // 回到顶部
  8. refresher-enabled // 开启下拉刷新
  9. refresher-default-style="black" // 刷新高亮点颜色
  10. bindrefresherrefresh="handleRefresh" // 绑定下拉刷新的监听事件
  11. refresher-triggered="{{isTriggered}}" // 刷新状态 是否允许弹回去 false是允许
  12. >
  13. <view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
  14. </scroll-view>
  15. .js 文件
  16. Page({
  17. data: {
  18. numList:[1,2,3],
  19. isTriggered:false
  20. },
  21. // 上拉触发事件
  22. getMore(){
  23. // 开启数据加载
  24. wx.showLoading({
  25. title: '数据加载中...',
  26. })
  27. setTimeout(()=>{
  28. // 获取数组的最后一项
  29. const lastNum = this.data.numList[this.data.numList.length - 1]
  30. // 定义需要追加的元素
  31. const newArr = [lastNum + 1,lastNum + 2 ,lastNum + 3]
  32. this.setData({
  33. numList:[...this.data.numList,...newArr]
  34. })
  35. wx.hideLoading()
  36. },1000)
  37. },
  38. // 下拉刷新
  39. handleRefresh(){
  40. wx.showToast({
  41. title: '下拉刷新...',
  42. })
  43. this.setData({
  44. numList:[1,2,3],
  45. isTriggered:false
  46. })
  47. }
  48. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Guff_9hys/article/detail/747635
推荐阅读
相关标签
  

闽ICP备14008679号