🔗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.setStorageSync | wx.setStorage |
| 从本地缓存中同步获取指定 key 的内容 | wx.getStorageSync | wx.getStorage |
| 从本地缓存中移除指定 key | wx.removeStorageSync | wx.removeStorage |
| 清空本地数据缓存 | wx.clearStorageSync | wx.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官方文档
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 表示不使用默认样式- r
efresher-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>
