小程序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 需要开发者自行封装
网络请求
跳过域名的校验的开发
界面交互-loading 提示框
小程序提供了一些用于界面交互的 API，例如： loading 提示框、消息提示框、模态对话框等 API
wx.showLoading({
//显示提示的内容,提示内容不易过长，不会自动换行，多出来的部分会自动隐藏
title：''，
// 是否展示透明蒙层，放置触摸穿透(true,展示蒙层，不会点击再次触发）
mask：'true',
})2.wx.hideLoading() 关闭 loading 提示框
可写在complete回调函数里
注：两者必须配对使用
界面交互-模态对话框-消息提示框
1. wx.showModal() ：模态对话框，常用于询问用户是否执行一些操作
例如：询问用户是否退出登录、是否删除该商品
2. wx.showToast() ：消息提示框，根据用户的某些操作来告知操作的结果
例如：退出成功给用户提示，提示删除成功等
// 点击删除
async handleDel () {
// showModel 显示模态对话框
const {confirm} = await wx.showModel({
title:'提示',
content:'是否删除该商品',
})
if(confirm) {
// showToast 消息提示框
wx.showToast({
title:'删除成功'
icon：'none',
duration:2000
})
}else {
wx.showToast({
title:'取消删除'
icon：'error',
duration:2000
})
}
}本地存储
同步
存储：wx.setStorageSync()
获取：wx.getStorageSync()
存储：wx.setStorage()
获取：wx.getStorage()
page({
// 存储
// 如果存储的是对象类型数据，不需要使用JSON.stringify 和 JSON.parse 进行转化
setStorage () {
wx.setStorageSync('本地存储中指定key','需要存储的数据value') // 同步
wx.setStorage({key:'num',data:1}) // 异步
wx.setStorage({key:'obj',data:{name:'jerry',age:18}) // 异步
}
// 获取
getStorage () {
const key = wx.getStorageSync('key') //同步
console.log(key)
const key = wx.getStorage({key:'num'}) // 异步
}
// 删除
removeStorage () {
// 从本地移除指定的key的数据和内容
wx.removeStorageSync('key') //同步
wx.removeStorage({key:'num'}) // 异步
}
// 清空
clearStorage () {
wx.clearStorageSync() //同步
wx.removeStorage() // 异步
}
})路由与通信
1. 声明式导航
绑定属性open-type
navigate：保留当前页面，跳转到某个页面，但不能跳转到tabbar页面
redirect：关闭当前页面，跳转到某个页面，但不能跳转到tabbar页面
switchTab：跳转到tabbar页面。并关闭其他所有的非tabbar页面
reLaunch：关闭所有页面，跳转到某个页面
navigateBack：关闭当前页面，返回上一页面或多级页面
注：url 后可参数，参数与路径之间用？隔开，参数键与参数值用=相连，不同参数，用&分割
2. 编程式导航
wx.navigateTo ({})：保留当前页面，跳转到某个页面，但不能跳转到tabbar页面
wx.redirectTo ({})：关闭当前页面，跳转到某个页面，但不能跳转到tabbar页面
wx.switchTab({})：跳转到tabbar页面。路径后不能带参数
wx.reLaunch({})：关闭所有页面，跳转到某个页面
wx.navigateBack({})：关闭当前页面，返回上一页面或多级页面
注：url 后参数与路径之间用？隔开，参数键与参数值用=相连，不同参数，用&分割
页面处理函数
上拉加载是小程序中常见的一种加载方式，当用户滑动页面到底部时，会自动加载更多的内容，以便用户继续浏览
小程序中实现上拉加载的方式
1. 在app.json 或者 page.json 在配置距离页面底部距离：onReachBottomDistance；默认 50px
2.在页面js中定义onReachBottom事件监听用户上拉加载
.json 文件
{
"usingComponents": {},
"onReachBottomDistance":50
}
.js 文件
Page({
// 监听用户加载
onReachBottom(){
// 上拉加载后具体操作
......
}
})下拉刷新是小程序中常见的一种刷新方式，当用户下拉页面时，页面也会自动刷新，以便用户获取最新的内容
小程序中实现上拉加载更多的方式：
1.在app.json或者page.json中开启允许下拉，同时可以配置窗口、loading样式等文章来源：https://www.toymoban.com/news/detail-859107.html
2.在页面.js中定义onPullDownRefresh事件监听用户下拉刷新文章来源地址https://www.toymoban.com/news/detail-859107.html
.json 文件
{
"usingComponents": {},
"onReachBottomDistance":50，
// 设置同意下拉刷新
"enablePullDownfresh":true
}
.js 文件
Page({
// 监听用户下拉刷新
onPullDownRefresh(){
// 下拉刷新后具体操作
......
// 在下拉刷新后 loading效果可能弹不回去
if（条件判断）{
wx.stopPullDownRefresh()
}
}
})scroll-view
.wxml 页面
<scroll-view
scroll-y
class="scroll-y"
lower-threshold="100" // 上拉触发事件的条件
bindscrolltolower="getMore" // 上拉触发绑定的监听事件
enable-back-to-top // 回到顶部
refresher-enabled // 开启下拉刷新
refresher-default-style="black" // 刷新高亮点颜色
bindrefresherrefresh="handleRefresh" // 绑定下拉刷新的监听事件
refresher-triggered="{{isTriggered}}" // 刷新状态 是否允许弹回去 false是允许
>
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
</scroll-view>
.js 文件
Page({
data: {
numList:[1,2,3],
isTriggered:false
},
// 上拉触发事件
getMore(){
// 开启数据加载
wx.showLoading({
title: '数据加载中...',
})
setTimeout(()=>{
// 获取数组的最后一项
const lastNum = this.data.numList[this.data.numList.length - 1]
// 定义需要追加的元素
const newArr = [lastNum + 1,lastNum + 2 ,lastNum + 3]
this.setData({
numList:[...this.data.numList,...newArr]
})
wx.hideLoading()
},1000)
},
// 下拉刷新
handleRefresh(){
wx.showToast({
title: '下拉刷新...',
})
this.setData({
numList:[1,2,3],
isTriggered:false
})
}
})
到了这里，关于微信小程序--API的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
