小程序 网络请求

请注意：小程序只支持https和wss（WebSocket，其具备ws协议与wss协议）协议的网络请求。但是允许开发者在开发环境下使用http请求，不过在最终上线时必须要修改为小程序支持的协议类型。

• 文档地址：
• https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

网络请求的相关设置

• 虽然小程序只支持https和wss协议的网络请求。但是允许开发者在开发环境下使用http请求。如果需要在开发环境下使用http协议进行开发测试并且不对域名合法性进行校验，请记得开启支持：

• 最终上线时，需要有https的接口服务，并且需要在小程序官方后台中设置接口域名（为了安全，添加域名白名单），设置路径：小程序管理后台 / 开发 / 开发设置 / 服务器域名。如果条件允许，建议尽量在开发时就使用符合要求的域名配置而不是等到上线的时候再返工。

如果使用的测试号，请在测试号管理页面添加白名单。

• 域名可以使用给定测试域名：
• https://api.i-lynn.cn
• https://mpapi.iynn.cn

发起网络请求

• 在小程序的wx对象中，其已经提供了网络请求方法。

• 语法：wx.request(请求参数的对象)

• 文档地址：

• https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

示例代码：

wx.request({
    url: 'test.php', //仅为示例，并非真实的接口地址
    data: {
        x: '',
        y: ''
    },
    method: "GET",
    header: {
        'content-type': 'application/json' // 默认值
    },
    success (res) {
        console.log(res.data)
    }
})

注：在发起请求之前，需要在app.json文件中设置request请求的超时时间以防止网络堵塞导致程序卡死，时间单位为毫秒：

"networkTimeout": {
 "request": 10000
}

wx.request()的方法返回的对象信息包含如下几个属性：

• cookies：返回的cookies
• data：响应体
• header：响应头
• statusCode：http状态码
• errMsg：错误信息

例如：点击按钮发送一个网络请求请求数据并循环渲染

• wxml代码

<!--pages/request/request.wxml-->
<text>pages/request/request.wxml</text>

<button type="primary" bindtap="send">发送请求</button>

<block wx:for="{{data}}" wx:key="index">
    <view>地区id：{{item.id}}，地区名：{{item.name}}</view>
</block>

• js代码

Page({

    /**
     * 页面的初始数据
     */
    data: {
        data: []
    },

    /**
     * 发送网络请求
     */
    send() {
        wx.request({
            // 请求地址
            url: 'https://api.i-lynn.cn/area',
            // 请求方式
            method: "GET",
            // 请求参数
            data: {
                id: 1
            },
            // 成功请求的回调
            success: (res) => {
                console.log(res);
                this.setData({
                    data: res.data
                })
            }
        })
    }
})

缓存

• 文档地址：

• https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html

• 小程序是有缓存的，但是它缓存没有过期时间，单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。如果缓存达到了上限，清除缓存，清除缓存机制：最久未被使用。

• 重要的数据不要放在小程序缓存中。

需要注意：获取缓存数据的方法wx.getStorage方法为异步方法，在获取的时候要么加.then进行处理，要么加async + await进行处理。（推荐：再或者就是在方法名后面加上Sync来使用其同步的方法）在小程序开发工具中默认是不允许使用async和await的，如有使用需求，请开启增强编译功能，如图：

例如：在wxml结构中设置2个按钮，分别用于设置和获取缓存的数据

<!-- 设置缓存 -->
<button type="primary" bindtap="setCache">设置</button>


<!-- 获取缓存 -->
<button type="primary" bindtap="getCache">获取</button>

随后编写事件处理程序：

// 同步设置缓存（对于已有的数据key可以覆盖，修改）
setCache: function () {
    wx.setStorageSync('classname', 'sz2101')
},

getCache: function () {
    console.log(wx.getStorageSync('classname'));
},