微信小程序的網(wǎng)絡(luò)設(shè)置，及網(wǎng)絡(luò)請求：wx.request(OBJECT)

發(fā)表時間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：79

微信小程序要實(shí)現(xiàn)網(wǎng)絡(luò)請求，首先要對其進(jìn)行設(shè)置，下面以”微信web開發(fā)者工具V1.01.170913”為例

一：對于服務(wù)器網(wǎng)站沒有備案，或只需要做本地測試的用戶

在“微信web開發(fā)者工具”的“設(shè)置”->“項(xiàng)目設(shè)置”->“項(xiàng)目設(shè)置”中
選：不校驗(yàn)安全域名、TLS 版本以及 HTTPS 證書，如下圖

二：對已有備案的網(wǎng)站服務(wù)器用戶

因?yàn)樾〕绦蛑恢С謍ttps的域名,所以先要確保自己的網(wǎng)站服務(wù)器已安裝了SSL證書，至于怎樣安裝，可參考我之前的文章，如下：
一：https的簡單介紹及SSL證書的生成
二：https的SSL證書在服務(wù)器端的部署，基于tomcat,spring boot
三：讓服務(wù)器同時支持http、https，基于spring boot
四：https的SSL證書在Android端基于okhttp，Retrofit的使用

然后，通過下面兩步設(shè)置
1):在mp.weixin.qq.com中用自己的小程序帳號登錄，在”設(shè)置”->”開發(fā)設(shè)置”中填寫服務(wù)器域名，如下圖：

設(shè)置完后，在“微信web開發(fā)者工具”的“設(shè)置”->“項(xiàng)目設(shè)置”->“域名信息”中會看到剛在后臺的域名設(shè)置，如下圖：

2):在“微信web開發(fā)者工具”的“設(shè)置”->“項(xiàng)目設(shè)置”->“項(xiàng)目設(shè)置”中
不要選：不校驗(yàn)安全域名、TLS 版本以及 HTTPS 證書，如下圖

三：設(shè)置完成后，就開始代碼部分

先設(shè)置一個view用于顯示收到服務(wù)器應(yīng)答的數(shù)據(jù)
再設(shè)置一個button，用于點(diǎn)擊時調(diào)用”httpRequest()”發(fā)起對服務(wù)器的請求
pages\index\index.wxml 內(nèi)容如下：

<!--index.wxml-->
<view class="container">
  <!-- This is our View -->
  <view> Http Receive: {{response}} </view>
  <button bindtap="httpRequest"> http test </button>
</view>

pages\index\index.js內(nèi)容如下：

// This is our App Service.
// This is our data.
var helloData = {
  response: ‘‘
}
// Register a Page.
Page({
  data: helloData,

  httpRequest: function (e) { //對應(yīng)：<button bindtap="httpRequest"> http test </button>的button點(diǎn)擊
  var that=this  
    wx.request({
      url: ‘http://127.0.0.1/test‘, //僅為示例，要根據(jù)你實(shí)際的接口地址   
      data: {
        x: ‘a(chǎn)b‘,
        y: ‘cd‘
      },
      header: {
        ‘content-type‘: ‘a(chǎn)pplication/json‘ // 默認(rèn)值
      },

      success: function (res) {
        console.log(res.data)       
        that.setData({
          response: res.data //把接收到的服務(wù)器數(shù)據(jù)顯示到{{response}}中
        })
      }
    })
  }
})

上面代碼等同于訪問：