欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 旅游 > 微信小程序学习(六):常用原生 API

微信小程序学习(六):常用原生 API

2025/7/11 16:09:56 来源:https://blog.csdn.net/john1516/article/details/139813458  浏览:    关键词:微信小程序学习(六):常用原生 API

在这里插入图片描述
🔗API官方文档

1、网络请求

wx.request({// 接口地址,仅为示例,并非真实的接口地址url: 'example.php',// 请求的参数data: { x: '' },// 请求方式 GET|POST|PUT|DELETEmethod: 'GET',success (res) {console.log(res.data)},fail(err) {console.log(err)}
})

wx.request() 请求的域名需要在小程序管理平台进行配置,如果小程序正式版使用wx.request请求未配置的域名,在控制台会有相应的报错。

2、界面交互

2.1 loading 提示框

wx.showLoading({title: '提示内容', // 提示的内容mask: true, // 是否显示透明蒙层,防止触摸穿透success() {}, // 接口调用成功的回调函数fail() {} // 接口调用失败的回调函数
})wx.hideLoading()

🔗showLoading官方文档 🔗hideLoading官方文档

2.2 模态对话框

wx.showModal() 模态对话框也是在项目中频繁使用的一个小程序 API,通常用于向用户询问是否执行一些操作,例如:点击退出登录,显示模态对话框,询问用户是否真的需要退出等等

wx.showModal({title: '提示', // 提示的标题content: '您确定执行该操作吗?', // 提示的内容confirmColor: '#f3514f',// 接口调用结束的回调函数(调用成功、失败都会执行)success({ confirm }) {confirm && consle.log('点击了确定')}
})

🔗showModal官方文档

2.3 消息提示框

wx.showToast():消息提示框用来根据用户的某些操作来告知操作的结果,如退出成功给用户提示,提示删除成功等

wx.showToast({title: '标题', // 提示的内容duration: 2000, // 提示的延迟时间mask: true, // 是否显示透明蒙层,防止触摸穿透icon: 'success', // 	图标success() {}, // 接口调用成功的回调函数fail() {} // 接口调用失败的回调函数
})

🔗showToast官方文档

3、本地存储

作用同步 API异步 API
将数据存储在本地缓存中指定的 key 中wx.setStorageSyncwx.setStorage
从本地缓存中同步获取指定 key 的内容wx.getStorageSyncwx.getStorage
从本地缓存中移除指定 keywx.removeStorageSyncwx.removeStorage
清空本地数据缓存wx.clearStorageSyncwx.clearStorageSync
Page({// 将数据存储到本地setStorage () {wx.setStorage({key: 'num',data: 1})wx.setStorage({key: 'obj',data: { name: 'jerry', age: 18 }})},// 获取本地存储的数据async getStorage () {const { data } = await wx.getStorage({key: 'obj'})console.log(data)}// 删除本地存储的数据removeStorage () {wx.removeStorage({key: 'num'})},// 清空本地存储的全部数据clearStorage () {wx.clearStorage()}
})

🔗本地存储官方文档

4、路由与通信

在小程序中实现页面的跳转,有两种方式:

  • 声明式导航:navigator 组件
  • 编程式导航:使用小程序提供的 API
    • wx.navigateTo():保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面
    • wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
    • wx.switchTab():跳转到 tabBar 页面,路径后不能带参数
    • wx.reLaunch():关闭所有的页面,然后跳转到应用中某一个页面
    • wx.navigateBack():关闭当前页面,返回上一页面或多级页面
    • 路径后可以带参数,参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收
      • 参数与路径之间使用 ? 分隔
      • 参数键与参数值用 = 相连
      • 不同参数用 & 分隔
      • 例如 path?key=value&key2=value2

🔗路由API官方文档

4.1 小程序页面间通信

如果一个页面通过 wx.navigateTo 打开一个新页面,这两个页面间将建立一条数据通道

  • wx.navigateTosuccess 回调中通过 EventChannel 对象发射事件 被打开的页面可以通过。
    this.getOpenerEventChannel() 方法获得一个 EventChannel 对象,进行监听、发射事件。
  • wx.navigateTo 方法中可以定义 events 配置项接收被打开页面发射的事件 这两个 EventChannel 对象间可以使用 emiton 方法相互发送、监听事件。
    在这里插入图片描述

页面

Page({// 点击按钮触发的事件处理函数handler () {wx.navigateTo({url: '/pages/list/list',events: {// key:被打开页面通过 eventChannel 发射的事件// value:回调函数// 为事件添加一个监听器,获取到被打开页面传递给当前页面的数据currentevent: (res) => {console.log(res)}},success (res) {// console.log(res)// 通过 success 回调函数的形参,可以获取 eventChannel 对象// eventChannel 对象给提供了 emit 方法,可以发射事件,同时携带参数res.eventChannel.emit('myevent', { name: 'tom' })}})}
})

被打开页面

Page({onLoad () {// 通过 this.getOpenerEventChannel() 可以获取 EventChannel 对象const EventChannel = this.getOpenerEventChannel()// 通过 EventChannel 提供的 on 方法监听页面发射的自定义事件EventChannel.on('myevent', (res) => {console.log(res)})// 通过 EventChannel 提供的 emit 方法也可以向上一级页面传递数据// 需要使用 emit 定义自定义事件,携带需要传递的数据EventChannel.emit('currentevent', { age: 10 })}
})

5、事件监听-上拉加载

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

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

  • app.json 或者 page.json 中配置距离页面底部距离:onReachBottomDistance,默认 50px
  • 页面.js 中定义 onReachBottom 事件监听用户上拉加载

6、事件监听-下拉刷新

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

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

  • app.json 或者 page.json 中开启允许下拉,同时可以配置 窗口loading 样式等
  • 页面.js 中定义 onPullDownRefresh 事件监听用户下拉刷新

7、scroll-view的上拉加载和下拉刷新

7.1 上拉加载

scroll-view属性:

  • bindscrolltolower:滚动到底部/右边时触发
  • lower-threshold:距底部/右边多远时,触发 scrolltolower 事件
  • enable-back-to-top:让滚动条返回顶部,iOS 点击顶部状态栏、安卓双击标题栏时,只支持竖向
<scroll-viewclass="scroll-y"scroll-ylower-threshold="100"bindscrolltolower="getMore"enable-back-to-top
><view wx:for="{{ arr }}" wx:key="*this">{{ item }}</view></scroll-view>

7.2 下拉刷新

scroll-view属性:

  • refresher-enabled:开启自定义下拉刷新
  • refresher-default-style:自定义下拉刷新默认样式支持设置 black | white | none, none 表示不使用默认样式
  • refresher-background:自定义下拉刷新区域背景颜色
  • bindrefresherrefresh:自定义下拉刷新状态回调
  • refresher-triggered:设置当前下拉刷新状态,(true 下拉刷新被触发,false 表示下拉刷新未被触发,用来关闭下拉效果)
<scroll-viewclass="scroll-y"scroll-ylower-threshold="100"bindscrolltolower="getMore"enable-back-to-toprefresher-enabledrefresher-default-style="black"refresher-background="#f7f7f8"refresher-triggeredbindrefresherrefresh="onrefresh"refresher-triggered="{{ triggered }}"
><view wx:for="{{ arr }}" wx:key="*this">{{ item }}</view></scroll-view>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词