API（官网：developers.weixin.qq.com/miniprogram…） 三大类API：事件监听类API(以on开头，监听事件触发)、同步API(以sync结尾)、异步API（如wx.request）
一、界面交互API
wx.showToast({})轻提示
wx.showToast({
title: '删除成功!',//提示的内容
icon: 'success',//图标
duration: 2000,//提示的延迟时间
})
wx.showModal({})弹框
wx.showModal({
title: '提示',//标题
content: '提示的内容',//内容
success(res) {//成功的回调函数
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
},
})
wx.showLoading({})加载中。需主动调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
title: '加载中',// 显示加载中
})
setTimeout(function () {
wx.hideLoading() // 隐藏加载中
}, 2000)
二、数据缓存API
wx.setStorageSync(string key, any data)同步保存
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
wx.setStorageSync('USER', { name: 'jack', passwordd: 123 })
const user = wx.getStorageSync('USER')
console.log('user ', user)
wx.setStorage(string key, any data)异步保存
wx.setStorage({
key: 'list',
data: [{ name: 'rose' }],
encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
success(res) {
wx.getStorage({
key: 'list',
encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
success(res) {
console.log(res.data)
},
})
},
})
三、网络数据请求（小程序中不存在跨域问题）
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制:
1、只能请求 HTTPS 类型的接口
2、必须将接口的域名添加到信任列表中
后台配置request合法域名：
登录自己的微信小程序管理后台->左侧列表点击”开发“->右侧面板选择”开发设置“->找到”服务器域名“->点击”修改“，修改request合法域名->点击”保存并提交“（域名只支持https协议；不能使用IP地址或localhost；必须经过ICP备案（后端）；服务器域名一个月内最多可申请5次修改）
微信开发者工具配置request合法域名：
打开微信开发者工具->点击右上角”详情“->选择”项目配置“->设置”request合法域名“（配置成功后，才能请求该域名下所有的接口）
如何跳过request合法域名校验：(仅在开发与调试阶段使用)
在实际开发中，如果后端只提供了http协议的接口，暂未提供https协议的接口
打开微信开发者工具->点击右上角”详情“->选择”本地设置“->勾选”不校验合法域名...“选项
四、网络API
wx.request({})发起GET/POST数据请求
wx.request({
url:'https://10.7.163.165:8089/api/shop',//请求的接口地址
method:'GET',//请求的方式GET/POST
data:{},//发送到服务器的数据
success:(res)=>{//请求成功的回调
console.log(res)
this.setData({list})
}
})
五、网络请求封装：
1. utils工具文件夹中创建一个request.js文件，用于封装网络请求
request.js文件
/**
* 封装网络请求
* {
* url:''
* method:'get',
* data:,
* }
*/
const baseUrl = 'https://10.7.163.165:8089'
export const axiosInstance = options => {
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + options.url,
method: options.method,
data: options.data,
success: res => {
resolve(res.data)
},
fail: error => {
reject(error)
}
})
})
}
2. utils同级目录创建一个api文件夹，api文件夹下创建js文件，用于封装项目中所有用到的请求接口
js文件
import { axiosInstance } from '../utils/request.js'
/**
* 商品列表
*/
export const RequestGoodsList = ()=>{
return axiosInstance({
url:'/api/shop',
method:'get',
data:{},
})
}
3. 页面中使用，页面js文件中引入接口，调用即可
import {RequestGoodsList } from "../../api/goods.js";
Page({
/**
* 页面的初始数据
*/
data: {
list: [], // 商品列表
},
onLoad() {
this.getGoodsList()
},
/**
* 获取商品列表接口
*/
async getGoodsList() {
const data = await RequestGoodsList()
const {resultCode,resultInfo} = data
if(resultCode === 1){
const list = resultInfo.list
this.setData({list})
}
},
})
