烈豹球迷 發表於 2020-3-23 23:18:00

微信小程序开发中的http请求总结

<p>在微信小程序进行网络通信，只能和指定的域名进行通信，微信小程序包括四种类型的网络请求。</p>
<ul>
<li>普通HTTPS请求(wx.request)</li>
<li>上传文件(wx.uploadFile)</li>
<li>下载文件(wx.downloadFile)</li>
<li>WebSocket通信(wx.connectSocket)</li>
</ul>
<p>这里以介绍<code>wx.request</code>,<code>wx.uploadFile</code>,<code>wx.dowloadFile</code>三种网络请求为主</p>
<h4 data-id="heading-0">设置域名</h4>
<p>要微信小程序进行网络通信，必须先设置域名，不然会出现错误:</p>
<blockquote>
<h5 data-id="heading-1">URL 域名不合法，请在 mp 后台配置后重试</h5>
</blockquote>
<p>需要在微信公众平台的小程序中设置域名。<br>在微信小程序的设置界面可以看到设置选项：</p>
<div><img src="https://user-gold-cdn.xitu.io/2016/11/29/6ae29780e61402cacb5c34e8f4a2e166?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="800" data-height="600"></div>
<p>选择<code>开发设置</code>：</p>
<div><img class="lazyload inited loaded" alt="" width="496" height="185" data-src="https://user-gold-cdn.xitu.io/2016/11/29/aee08076a738520dcd1d8ff091926c9e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="800" data-height="600"><br>
<p>开发设置</p>


</div>
<p><br>可以看到服务器设置:</p>
<div><img class="lazyload inited loaded" alt="" width="795" height="250" data-src="https://user-gold-cdn.xitu.io/2016/11/29/f8657cec10e03452a573aee48eb72f41?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="800" data-height="600"><br>
<p>服务器设置</p>


</div>
<p><br>在这里可以设置对应四种网络访问的域名，每一种类型的网络请求需要设置一个域名，注意如果在这里设置域名为<code>https://example.com/api/</code>,那么<code>https://example.com/api</code>是无法调用的，必须加上后面<code>/</code>。</p>
<h4 data-id="heading-2">http请求</h4>
<p>使用<code>wx.request</code>可以发起一个http请求，一个微信小程序被限制为同时只有5个网络请求。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> queryRequest(data){   
    wx.request({
      url:</span>"https://example.com/api/"<span style="color: rgba(0, 0, 0, 1)">,
      data:data,
      header:{
         </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "Content-Type":"application/json"</span>
<span style="color: rgba(0, 0, 0, 1)">      },
      success:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(res){
            console.log(res.data)
      },
      fail:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(err){
            console.log(err)
      }

    })

}</span></pre>
</div>
<p>&nbsp;</p>
<p>上面的代码会发送一个http get请求，然后打印出返回的结果。其中的参数也比较容易理解。</p>
<ul>
<li><code>url</code>&nbsp;服务器的url地址</li>
<li><code>data</code>&nbsp;请求的参数可以采用String&nbsp;<code>data:"xxx=xxx&amp;xxx=xxx"</code>的形式或者Object&nbsp;<code>data:{"userId":1}</code>的形式</li>
<li><code>header</code>&nbsp;设置请求的header</li>
<li><code>success</code>&nbsp;接口成功的回调</li>
<li><code>fail</code>&nbsp;接口失败的回调</li>
</ul>
<p>另外还有两个参数没有在代码里:</p>
<ul>
<li><code>method</code>&nbsp;http的方法,默认为GET请求</li>
<li><code>complete</code>&nbsp;调用接口结束之后的回调，无论成功或者失败该接口都会被调用</li>
</ul>
<h4 data-id="heading-3">上传文件</h4>
<p>上传文件的api为<code>wx.uploadFile</code>，该api会发起一个<code>http post</code>请求，其中的<code>Content-type</code>为<code>multipart/form-data</code>。服务器端需要按照该<code>Content-type</code>类型接收文件,示例代码：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> uploadFile(file,data) {
    wx.uploadFile({
      url: </span>'http://example.com/upload'<span style="color: rgba(0, 0, 0, 1)">,
      filePath: file,
      name: </span>'file'<span style="color: rgba(0, 0, 0, 1)">,
      formData:data,
      success:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(res){
            console.log(res.data)
      },
      fail:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(err){
            console.log(err)
      }

    })

}</span></pre>
</div>
<p>&nbsp;</p>
<p>其中的<code>url</code>，<code>header</code>，<code>success</code>，<code>fail</code>以及<code>complete</code>和普通的http请求是一样的。<br>这里有区别的参数是:</p>
<ul>
<li><code>name</code>文件对应的key，服务器端需要通过<code>name</code>参数获取文件</li>
<li><code>formData</code>&nbsp;http请求中可以使用的其他参数</li>


</ul>
<h4 data-id="heading-4">下载文件</h4>
<p>下载文件的api为<code>wx.downloadFile</code>,该api会发起一个http get请求，并在下载成功之后返回文件的临时路径，示例代码：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> downloadFile(url,typ,success){
    wx.downloadFile({
      url:url,
      type:typ,
      success:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(res){
            </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(success){
                success(res.tempFilePath)
            }
      },
      fail:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(err){
            console.log(err)
      }
    })
}</span></pre>
</div>
<p>&nbsp;</p>
<p>其中的<code>url</code>,<code>header</code>,<code>fail</code>,<code>complete</code>和<code>wx.uploadFile</code>的参数使用是一致的，其中有区别的参数是:</p>
<ul>
<li><code>type</code>:下载资源的类型，用于客户端自动识别，可以使用的参数<code>image/audio/video</code></li>
<li>
<p><code>success</code>：下载成功之后的回调，以<code>tempFilePath</code>的参数返回文件的临时目录：<code>res={tempFilePath:'文件路径'}</code><br>下载成功后的是临时文件，只会在程序本次运行期间可以使用，如果需要持久的保存，需要调用方法<code>wx.saveFile</code>主动持久化文件，实例代码:</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">function svaeFile(tempFile,success){
wx.saveFile({
      tempFilePath:tempFile,
      success:function(res){
          var svaedFile=res.savedFilePath
          if(success){
            success(svaeFile)
          }
      }
})
}
</pre>
</div>
<p>　　</p>
<p>使用<code>wx.saveFile</code>保存临时文件到本地，提供给小程序下次启动时使用，其中的参数：</p>
</li>
<li>
<p><code>tempFilePath</code>&nbsp;需要被保存文件的路径</p>
</li>
<li><code>success</code>&nbsp;保存成功的回调，返回保存成功的路径，使用<code>res.savedFilePath</code>可以获取保存成功的路径</li>
<li><code>fail</code>&nbsp;失败的回调</li>
<li><code>complete</code>结束的回调</li>
</ul>
<h4 data-id="heading-5">超时的设置</h4>
<pre><code>app.js中调整设置：<br><br></code></pre>
<div class="cnblogs_code">
<pre>"networkTimeout"<span style="color: rgba(0, 0, 0, 1)">:{
   </span>"request": 10000<span style="color: rgba(0, 0, 0, 1)">,
   </span>"connectSocket": 10000<span style="color: rgba(0, 0, 0, 1)">,
   </span>"uploadFile": 10000<span style="color: rgba(0, 0, 0, 1)">,
   </span>"downloadFile": 10000<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p>这里设置的超时时间对应着四种类型的网络请求。</p>
<p>&nbsp;</p>
<p>以下是我的小作品和开发入门文章，希望对你有帮助。</p>
<p><img alt="" width="171" height="171" data-src="https://img2020.cnblogs.com/blog/482766/202003/482766-20200324142148827-1221971296.png"><img src="https://img2020.cnblogs.com/blog/482766/202003/482766-20200324142255174-1553262758.png"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;天气小程序实战</p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/RobinGao/p/12556078.html
頁: [1]
查看完整版本: 微信小程序开发中的http请求总结