WeChat アプレットの http リクエストを設定する手順について

この記事では、WeChat ミニ プログラムで http リクエストを行う方法の詳細な手順を紹介します。必要な友達が WeChat ミニ プログラムでネットワーク リクエストを学習するのに役立つと思います。

httpリクエストの紹介

HTTP (HyperText Transfer Protocol) は、コンピューターがネットワークを介して通信するための一連のルールです。コンピュータの専門家は、HTTP クライアント (Web ブラウザなど) が HTTP サーバー (Web サーバー) に情報やサービスを要求できるようにするために HTTP を設計しました。HTTP プロトコルの現在のバージョンは 1.1 であり、ステートレスとは Web を指します。ブラウザと Web サーバーの間に永続的な接続を確立する必要はありません。これは、クライアントがサーバーにリクエストを送信し、Web サーバーが応答を返すと、接続が閉じられ、接続に関する情報がサーバー上に保持されないことを意味します。 Information.HTTP はリクエスト/レスポンス モデルに従います。 Web ブラウザは Web サーバーにリクエストを送信し、Web サーバーはリクエストを処理して適切な応答を返します。すべての HTTP 接続は、リクエストと応答のセットとして構造化されています。

WeChat アプレットは http リクエストを設定します

WeChat アプレットのネットワーク通信は、指定されたドメイン名とのみ通信できます。WeChat アプレットには 4 種類のネットワーク リクエストが含まれます。

1. 通常の HTTPS リクエスト (wx.request) wx.request)

     2、上传文件(wx.uploadFile)

     3、下载文件(wx.downloadFile)

     4、WebSocket通信(wx.connectSocket)

这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主

设置域名

要微信小程序进行网络通信，必须先设置域名，不然会出现错误:

URL 域名不合法，请在 mp 后台配置后重试

需要在微信公众平台的小程序中设置域名。

在微信小程序的设置界面可以看到设置选项：

设置
选择开发设置：

开发设置

可以看到服务器设置:

服务器设置

在这里可以设置对应四种网络访问的域名，每一种类型的网络请求需要设置一个域名，注意如果在这里设置域名为https://example.com/api/,那么https://example.com/api是无法调用的，必须加上后面/。

http请求

使用wx.request可以发起一个http请求，一个微信小程序被限制为同时只有5个网络请求。

function queryRequest(data){ 
 wx.request({
 url:"https://example.com/api/",
 data:data,
 header:{
 // "Content-Type":"application/json"
 },
 success:function(res){
 console.log(res.data)
 },
 fail:function(err){
 console.log(err)
 }

 })

}

上面的代码会发送一个http get请求，然后打印出返回的结果。其中的参数也比较容易理解。

url 服务器的url地址

data 请求的参数可以采用String data:"xxx=xxx&xxx=xxx"的形式或者Object data:{"userId":1}的形式

header 设置请求的header

success 接口成功的回调

fail 接口失败的回调

另外还有两个参数没有在代码里:

method http的方法,默认为GET请求

complete 调用接口结束之后的回调，无论成功或者失败该接口都会被调用

上传文件

上传文件的api为wx.uploadFile，该api会发起一个http post请求，其中的Content-type为multipart/form-data。服务器端需要按照该Content-type类型接收文件,示例代码：

function uploadFile(file,data) {
 wx.uploadFile({
 url: 'http://example.com/upload',
 filePath: file,
 name: 'file',
 formData:data,
 success:function(res){
 console.log(res.data)
 },
 fail:function(err){
 console.log(err)
 }

 })

}

其中的url，header，success，fail以及complete和普通的http请求是一样的。

这里有区别的参数是:

name文件对应的key，服务器端需要通过name参数获取文件

formData http

function downloadFile(url,typ,success){
 wx.downloadFile({
 url:url,
 type:typ,
 success:function(res){
 if(success){
 success(res.tempFilePath)
 }
 },
 fail:function(err){
 console.log(err)
 }
 })
}

function svaeFile(tempFile,success){
 wx.saveFile({
 tempFilePath:tempFile,
 success:function(res){
 var svaedFile=res.savedFilePath
 if(success){
 success(svaeFile)
 }
 }
 })
}

function downloadFile(url,typ,success){
 wx.downloadFile({
 url:url,
 type:typ,
 success:function(res){
 if(success){
 success(res.tempFilePath)
 }
 },
 fail:function(err){
 console.log(err)
 }
 })
}

function svaeFile(tempFile,success){
 wx.saveFile({
 tempFilePath:tempFile,
 success:function(res){
 var svaedFile=res.savedFilePath
 if(success){
 success(svaeFile)
 }
 }
 })
}

"networkTimeout":{
 "request": 10000,
 "connectSocket": 10000,
 "uploadFile": 10000,
 "downloadFile": 10000
}