网络请求

开发要求

• - 仅支持 https 请求
• - 必须将接口域名（不是IP地址）添加到信任列表|白名单
• - 如果提示：对应的服务器证书无效。。。需要服务器重新下载并配置SSL证书；生产环境，必须要配置新的SSL证书
• - 临时调试，可以选择取消校验

接口配置

• - 微信开发平台 → 开发
• - 开发时可以在微信开发工具 → 详情 → 项目配置中查看

• 受小程序体量限制，数据需要搭建本地静态资源服务器保存或使用云存储
• 微信小程序使用 wx.request() 发起网络请求；还可以使用 Axios
• 请求方式很多，默认是 GET；使用较多的还有 POST
• 微信小程序支持 回调函数 callback 和 Promise 两种方式
• 本地静态资源服务器使用，请访问 静态资源服务器、动态资源服务器

GET

• 获取 大树小站 积分榜数据

wx.request({
    url: 'https://glpla.github.io/utils/data/data2024/rank202402.json',
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

• 获取 大树小站 美食列表数据

wx.request({
    url: 'https://glpla.github.io/utils/data/goods.json',
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

• 分页获取数据，数据来自 node.js 服务器或 JSON-Server 服务器

. 使用 ? 和 & 直接拼接分页参数

wx.request({
    url: this.data.baseUrl + '/goods/page?page=' + this.page + '&pageSize=' + this.pageSize,
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

. 使用 data 配置项指定分页参数

wx.request({
    url: this.data.baseUrl + '/goods/page',
    data: {
        page: this.page,
        pageSize: this.pageSize
    },
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

• 使用猫眼API获取信息并渲染到页面

wx.request({
    url:'https://m.maoyan.com/ajax/movieOnInfoList',
    success:(res:any)=>{
        console.log(res.data);
        this.setData({
            list:res.data.movieList
        })
    }
})

POST

• 数据提交到服务器；应显式的指定方式 method 和数据 data
• 案例：留言、问卷、注册

wx.request({
    url: 'http://127.0.0.1:3000/users',
    method:'POST',
    data:this.data.user,
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})