1 网络请求 – 原生
请求数据,保存数据
1 原生请求
Page({
data: {
allCities: {},
houselist: [],
currentPage: 1
},
async onLoad() {
// 1.网络请求基本使用
wx.request({
url: "http://codercba.com:1888/api/city/all",
success: (res) => {
//保存数据
const data = res.data.data
this.setData({ allCities: data })
},
fail: (err) => {
console.log("err:", err);
}
})
wx.request({
url: 'http://codercba.com:1888/api/home/houselist',
//post和get都通过data传递参数
data: {
page: 1
},
success: (res) => {
const data = res.data.data
this.setData({ houselist: data })
}
})
}
//数据使用
<view class="house-list">
<block wx:for="{{houselist}}" wx:key="{{item.data.houseId}}">
<view class="item">
<image src="{{item.data.image.url}}"></image>
<view class="title">{{item.data.houseName}}</view>
</view>
</block>
</view>
2 函数封装,以Promise返回数据
// 封装成函数,单独写一个js文件,导出
export function hyRequest(options) {
//返回一个Promise
return new Promise((resolve, reject) => {
wx.request({
...options,
success: (res) => {
resolve(res.data)
},
fail: reject
})
})
}
//使用
//导入封装好的js文件
import { hyRequest } from "../../service/index"
Page({
data: {
allCities: {},
houselist: [],
currentPage: 1
},
async onLoad() {
// 2.使用封装的函数,无参数
hyRequest({
url: "http://codercba.com:1888/api/city/all"
}).then(res => {
this.setData({ allCities: res.data })
})
// 有参数
hyRequest({
url: "http://codercba.com:1888/api/home/houselist",
data: {
page: 1
}
}).then(res => {
this.setData({ houselist: res.data })
})
3 Promise的语法糖封装await/async(推荐)
需要封装为单独的函数,不然不是异步的
//封装
async getCityData() {
const cityRes = await hyRequest({
url: "http://codercba.com:1888/api/city/all"
})
this.setData({ allCities: cityRes.data })
},
async getHouselistData() {
const houseRes = await hyRequest({
url: "http://codercba.com:1888/api/home/houselist",
data: { page: this.data.currentPage }
})
//数组追加数组数据,(加载更多)
const finalHouseList = [...this.data.houselist, ...houseRes.data]
this.setData({ houselist: finalHouseList })
// 思考: 为什么这里不需要setData?
this.data.currentPage++
},
//使用
Page({
data: {
allCities: {},
houselist: [],
currentPage: 1
},
async onLoad() {
this.getCityData()
this.getHouselistData()
2 网络请求-封装为类
(推荐,可配置不同基础URL的多个实例)
//封装为单独的js文件
// 封装成类 -> 实例
class HYRequest {
constructor(baseURL) {
this.baseURL = baseURL
}
request(options) {
const { url } = options
return new Promise((resolve, reject) => {
wx.request({
...options,
url: this.baseURL + url,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
console.log("err:", err);
}
})
})
}
get(options) {
return this.request({ ...options, method: "get" })
}
post(options) {
return this.request({ ...options, method: "post" })
}
}
//导出不同基础URL的类实例
export const hyReqInstance = new HYRequest("http://codercba.com:1888/api")
export const hyLoginReqInstance = new HYRequest("http://123.207.32.32:3000")
//使用
import { hyRequest, hyReqInstance } from "../../service/index"
Page({
data: {
allCities: {},
houselist: [],
currentPage: 1
},
async onLoad() {
//使用类的实例发送请求
hyReqInstance.get({
url: "/city/all"
}).then(res => {
//保存数据
this.setData({ allCities: res.data })
})
},
3 提示弹窗
Page({
// 1.仅提示
onShowToast() {
wx.showToast({
title: '购买失败!',
icon: "error",
duration: 5000,
mask: true,
success: (res) => {
console.log("res:", res);
},
fail: (err) => {
console.log("err:", err);
}
})
// wx.showLoading({
// title: "加载中ing"
// })
},
//是否选择
onShowModal() {
wx.showModal({
title: "确定购买吗?",
content: "确定购买的话, 请确定您的微信有钱!",
confirmColor: "#f00",
cancelColor: "#0f0",
success: (res) => {
if (res.cancel) {
console.log("用户点击取消");
} else if (res.confirm) {
console.log("用户点击了确定");
}
}
})
},
//多个选择
onShowAction() {
wx.showActionSheet({
itemList: ["衣服", "裤子", "鞋子"],
success: (res) => {
console.log(res.tapIndex);
},
fail: (err) => {
console.log("err:", err);
}
})
},
4 分享功能
// 2.分享功能,不写也能分享,有默认的内容
onShareAppMessage() {
return {
title: "旅途的内容",
path: "/pages/favor/favor",
imageUrl: "/assets/nhlt.jpg"
}
},
5 获取设备信息
// 1.获取手机的基本信息
wx.getSystemInfo({
success: (res) => {
console.log(res);
}
})
6 获取位置信息
//需要先在app.json中获取授权
"permission": {
"scope.userLocation": {
"desc": "需要获取您的位置信息"
}
},
//获取用户位置信息
wx.getLocation({
success: (res) => {
console.log("res:", res);
}
})
7 Storage存储
8 界面跳转的方式
携带数据跳转其他页面
页面返回 - navigateBack
文章来源：https://www.toymoban.com/news/detail-486479.html
9 反向页面跳转 - 数据传递
方式一:获取上一个界面的实例,直接修改数据
onBackTap() {
// 1.返回上级页面
wx.navigateBack()
// 获取到当前页面栈的所有页面
const pages = getCurrentPages()
//获取上一级页面
const prePage = pages[pages.length-2]
// 通过setData给上一个页面设置数据(message是上一个页面定义的数据)
prePage.setData({ message: "呵呵呵" })
方式二,渠道传递
文章来源地址https://www.toymoban.com/news/detail-486479.html
到了这里，关于【7 微信小程序学习 - 小程序的系统API调用,网络请求封装】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
