文章目录
微信小程序提供了很多 API,可以提高我们的开发效率,实际开发前建议阅读 微信小程序 - API,本文用几个简单的进行回顾,
找找感觉,文中的所有 Api 都是最基础的使用方式,目的是快速回顾,实际使用时一定要阅读文档
一、路由
1.1. wx.navigateTo
该 Api 用来页面跳转,使用 wx.navigateTo
跳转时要注意两个地方:
- 跳转后,原页面组件不会被销毁,而是被存入 <页面跳转历史栈> 中,
wx.redirectTo
则是销毁原页面组件 - 当项目中使用了微信小程序提供的 tabbar 导航栏时,
wx.navigateTo
不能跳转到 tabbar 使用的页面
示例:页面跳转
(1) 先创建两个页面
(2) Form 页面
在页面逻辑文件中,创建事件处理函数,并在函数内进行页面跳转
Page({
// 事件处理函数
handleTap() {
// 页面跳转
wx.navigateTo({
url: '../to/index',
})
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">跳转</button>
(3) To 页面
在页面布局文件中,随便加点内容
<view>这是跳转后的页面</view>
(4) 运行效果
1.2. wx.navigateBack
该 Api 用来回退页面,使用 wx.navigateBack
跳转时要保证 <页面跳转历史栈> 中有页面组件,页面回退后,触发
回退的页面组件会被销毁
示例:回退页面
(1) 先创建两个页面
(2) Form 页面
在页面逻辑文件中,创建事件处理函数,并在函数内进行页面跳转
Page({
// 事件处理函数
handleTap() {
// 页面跳转
wx.navigateTo({
url: '../to/index',
})
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">跳转</button>
(3) To 页面
在页面逻辑文件中,创建事件处理函数,并在函数内进行页面回退,delta
代表回退的页数
Page({
// 事件处理函数
handleTap() {
// 页面回退
wx.navigateBack({
delta: 1,
})
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">返回</button>
(4) 运行效果
二、弹窗
2.1. wx.showModal
该 Api 是一个确认框,让用户选择 <确认> 和 <取消>,然后我们可以获取用户的选择
示例:确认框
在页面逻辑文件中,创建事件处理函数,并在函数内弹出确认框
Page({
// 事件处理函数
handleTap() {
// 确认框
wx.showModal({
// 确认框内第一行文字
title: '提示',
// 确认框内第二行文字
content: '这是一个模态弹窗',
// 成功的回调
success(res) {
// 判断用户点击
if (res.confirm) {
// 点击了确认
console.log('用户点击确定')
} else if (res.cancel) {
// 点击了取消
console.log('用户点击取消')
}
}
})
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">弹出确认框</button>
效果:
2.2. wx.showToast
该 Api 是一个提示框,提示一会就消失
示例:提示框
在页面逻辑文件中,创建事件处理函数,并在函数内弹出提示框
Page({
// 事件处理函数
handleTap() {
// 提示框
wx.showToast({
// 提示框文字
title: '成功',
// 提示框图标,有成功、失败、警告等多种,详细请参考文档
icon: 'success',
// 弹出事件,毫秒单位
duration: 1000
})
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">弹出提示框</button>
效果:
2.3. wx.showLoading 和 wx.hideLoading
wx.showLoading
会弹出一个加载中的状态框,它不会自动消失,需要我们调用 wx.hideLoading
才能将其关闭
示例:加载中状态框
在页面逻辑文件中,创建事件处理函数,并在函数内弹出加载中状态框,然后在一秒后将其关闭
Page({
// 事件处理函数
handleTap() {
// 加载中状态框
wx.showLoading({
title: '加载中',
})
// 一秒后关闭 加载中状态框
setTimeout(() => {
wx.hideLoading()
}, 1000)
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">弹出加载中状态框</button>
效果:
三、缓存
3.1. wx.setStorageSync
该 Api 用来将数据存到缓存中,缓存具有隔离性,不同用户或不同小程序间不能互相读写,每个小程序的每个用户
在其终端内都会有最多 10MB 的存储空间,单个 key 存储不能超过 1MB,缓存数据不会自动清除,除非用户主动删
除或因存储空间原因被系统清理
示例:存入缓存
在页面逻辑文件中,创建事件处理函数,并在函数内 指定一个 Key 然后将数据存入缓存中
Page({
// 事件处理函数
handleTap() {
// 将数据存入缓存
wx.setStorageSync('user',{name:'ares5k', age:28})
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">存入缓存</button>
效果,通过控制台的 Storage 窗口可以看到缓存中的数据:
3.2. wx.getStorageSync
通过 Key 来获取缓存中的数据
示例:获取缓存数据
在页面逻辑文件中,创建事件处理函数,并在函数内通过 Key 获取缓存数据
Page({
// 事件处理函数
handleTap() {
// 通过Key获取缓存数据
const user = wx.getStorageSync('user')
console.log(user)
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">获取缓存数据</button>
效果,控制台中可以看到我们获取的缓存数据:
四、网络请求
wx.request
该 Api 用来发送网络请求,本例不会讨论如何让服务器地址成为微信小程序项目的合法地址,只是单纯的展示如何
发送网络请求
示例:Get 请求的最基础使用方式
在页面逻辑文件中,创建事件处理函数,并在函数内发送网络请求
Page({
// 事件处理函数
handleTap() {
// 用最基础的方式发送 GET 请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
success:function(res){
// 请求成功的回调
console.log(res.data)
}
})
}
})
在页面布局文件中,创建一个按钮,并绑定事件处理函数
<button bind:tap="handleTap">发送网络请求</button>
运行效果,控制台中成功打印了我们从服务器获取的数据: