微信小程序-网络请求

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

Hope is a good thing, maybe the best of things. And no good thing ever dies.

本地开发的时候

从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信。

小程序模拟器会报错

Cannot send network request to localhost.

这里可以使用真机进行调试。

接口配置

使用 wx.request() 发起 HTTPS 网络请求

参考官方文档 developers.weixin.qq.com/miniprogram…

网络配置

官网说明 developers.weixin.qq.com/miniprogram…

服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置 

• 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
• 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；

• 可以配置端口，如 myserver.com:8080，但是配置后只能向 myserver.com:8080 发起请求。如果向 myserver.com、https://myserver.c… 等 URL 请求则会失败。
• 如果不配置端口。如 myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 myserver.com:443 请求则会失败。

• 域名必须经过 ICP 备案；
• 出于安全考虑， api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；

• 对于每个接口，分别可以配置最多 20 个域名

常见问题

HTTPS 证书

小程序必须使用 HTTPS/WSS 发起网络请求

详情见上面文档

使用wx.request()采坑

在某些网络请求的回调中，我们会使用到 this.setData()  ，这个里面就会涉及到 this 的指向问题

\

  onShow: function () {
    console.log('监听页面显示')

    // 写法 1
    const $this = this;
    wx.request({
      url: 'http://30.43.89.206:3000', //仅为示例，并非真实的接口地址
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log('res1', res)
        console.log('setData')
        $this.setData({
          apiInfo: res.data
        })
      }
    });

    // 写法 2
    wx.request({
      url: 'http://30.43.89.206:3000', //仅为示例，并非真实的接口地址
      data: {},
      header: {
        'content-type': 'application/json' // 默认值
      },
      // 使用箭头函数
      success: (res) => {
        console.log('res2', res)
        console.log('setData')
        this.setData({
          apiInfo: res.data
        })
      }
    });
  },

小程序支付是专门被定义使用在小程序中的支付产品。目前在小程序中能且只能使用小程序支付的方式来唤起微信支付

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏

欢迎关注我的微信公众号，一起交流技术，微信搜索 🔍 ：「 五十年以后 」