1. 程式人生 > >微信小程式開發:http請求

微信小程式開發:http請求

在微信小程式進行網路通訊,只能和指定的域名進行通訊,微信小程式包括四種類型的網路請求。

  • 普通HTTPS請求(wx.request)
  • 上傳檔案(wx.uploadFile)
  • 下載檔案(wx.downloadFile)
  • 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-typemultipart/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)
        }

    })

}

其中的urlheadersuccessfail以及complete和普通的http請求是一樣的。(微信小程式應用號交流群 563752274)
這裡有區別的引數是:

  • name檔案對應的key,伺服器端需要通過name引數獲取檔案
  • formData http請求中可以使用的其他引數

下載檔案

下載檔案的api為wx.downloadFile,該api會發起一個http get請求,並在下載成功之後返回檔案的臨時路徑,示例程式碼:

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)
        }
    })
}

其中的url,header,fail,completewx.uploadFile的引數使用是一致的,其中有區別的引數是:

  • type:下載資源的型別,用於客戶端自動識別,可以使用的引數image/audio/video
  • success:下載成功之後的回撥,以tempFilePath的引數返回檔案的臨時目錄:res={tempFilePath:'檔案路徑'}
    下載成功後的是臨時檔案,只會在程式本次執行期間可以使用,如果需要持久的儲存,需要呼叫方法wx.saveFile主動持久化檔案,例項程式碼:

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

    使用wx.saveFile儲存臨時檔案到本地,提供給小程式下次啟動時使用,其中的引數:

  • tempFilePath 需要被儲存檔案的路徑

  • success 儲存成功的回撥,返回儲存成功的路徑,使用res.savedFilePath可以獲取儲存成功的路徑
  • fail 失敗的回撥
  • complete結束的回撥

超時的設定

在微信小程式開發:MINA中已經提到了在app.js中設定networkTimeout可以設定四種類型網路訪問的超時時間:

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

這裡設定的超時時間對應著四種類型的網路請求。

相關推薦

程式開發:http請求

在微信小程式進行網路通訊,只能和指定的域名進行通訊,微信小程式包括四種類型的網路請求。 普通HTTPS請求(wx.request) 上傳檔案(wx.uploadFile) 下載檔案(wx.downloadFile) WebSocket通訊(wx.connectSocket) 這裡以介紹wx.request

程式開發POST請求

微信小程式開發POST請求 wx.request( { url: "http://op.juhe.cn/onebox/weather/query", header: { "Content-Type": "application/x-

程式開發http請求的session管理

作為一個開發JavaWeb應用的程式猿,都喜歡將使用者登入後的使用者資訊(比如說使用者id,使用者名稱稱)放入session中儲存,之後在業務邏輯的開發中需要用到使用者資訊的時候就可以輕鬆又方便的從session中取到值。最近在開發微信小程式的時候碰到一個問

程式開發中的http請求總結

在微信小程式進行網路通訊,只能和指定的域名進行通訊,微信小程式包括四種類型的網路請求。 普通HTTPS請求(wx.request) 上傳檔案(wx.uploadFile) 下載檔案(wx.downloadFile) WebSocket通訊(wx.connectSocket) 這裡以介紹wx.request

程式開發除錯階段不校驗請求域名

使用 wx.request、wx.connectSocket、wx.uploadFile、wx.downloadFile 等方法時,都會涉及到 URL,微信小程式是不允許隨便訪問 URL 的,需要在小程式的“設定”->“開發設定”中,把域名配置進去。 但是在開發環境下

程式開發之get請和post請求的兩種用法

我們在開發微信小程式,需要進行資料請求,這裡只有get和post兩種.get請求,如下圖 但是呢,在很多情況下光只有get請求是不行的,還必須要有post請求,那麼post請求怎麼寫呢,如下圖 這

程式開發之網路請求(POST請求)

微信小程式開發中網路請求必不可少.GET.POST請求是最常用的.GET請求 POST請求的時候有好幾個坑.我已經為大家填好了. <img src="https://img-blog.csd

程式開發之資料請求載入

開發中不可避免會與後臺進行多條、多次的資料傳遞,那我們該如何來將這部分的資料載入進行公共方法進行呼叫呢,下面就直接上程式碼啦~ loadList: function (event) { if

程式開發之網路請求(GET請求)

微信小程式開發中網路請求必不可少,今天說說最簡單的請求.後續會嘗試上傳下載,Socket這些. 1.一個微信小程式,同時只能有5個網路請求連線。 這個規定應該是微信為了保證使用者體驗制定的,畢竟是小程

程式程式開發除錯階段不校驗請求域名

https://blog.csdn.net/qq_30519365/article/details/78026879使用 wx.request、wx.connectSocket、wx.uploadFile、wx.downloadFile 等方法時,都會涉及到 URL,微信小程

程式開發基礎篇(四)之請求、上傳、下載

針對前幾篇的基本的瞭解,然後我們首先要先學習和了解它的基本語法,我主要從API官網上學習,然後總結在這篇部落格中。供自己後期檢視。以備不時之需。因為自己也是初學者,很多的都是按照API來學習講解。 按照API的順序,我先學習網路的模組 一、請求:wx.request(OB

程式開發--豆瓣圖書介面

由於微信小程式訪問豆瓣圖書介面的API被關閉, 所有從小程式端發起的訪問請求都會被拒絕, 403,禁止通訊。 其餘的資訊介面大都是http的,微信小程式中不允許訪問http, 我們通過中繼伺服器爬取並解析資料實現了一個可以在小程式中實現的圖書資訊查詢介面。 通過圖書的isbn 號碼查詢關於該圖書的各

程式開發 筆記

1.[wxss]設定帶透明度的rgb顏色:rgb(0,0,0,0.5); 2.小程式使用類似於iOS的NSNotification:(第三方:https://github.com/icindy/WxNotificationCenter) (1)在需要收發通知的頁面引入WxNotification

程式開發框架——WXSS(一)

    WXSS語言決定了小程式頁面的各個元素在視覺上的展示,WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。     width:用來設定元素'寬度' / height:用來設定元素'高度 '/

純正商業級應用-程式開發實戰已更完

第1章 導學與申請appkey 如何更好的學習本課程?如何申請開發者key?如何呼叫和測試介面? 1-1 微信小程式商業級實戰-課程導學。 1-2 優先自己開發 1-3 appkey的申請 1-4 課程維護說明 第2章 準備工作 開發前的準備工作以及第三方開發工具的選擇 2-1 流程與開發前準備 2

程式開發:二級、三級等多級聯動選單

二級級聯效果三級聯動效果 二級聯動和三級聯動的程式碼結構都是一樣,就看要怎麼設定。接下來上三級聯動的程式碼。 wxml <view class="picker-box"> <view class='skill-picker'&g

程式開發筆記5——元素隨著頁面滾動吸附在頂部的效果

現在很多app都有這樣的效果,某元素隨著頁面的滾動,吸附在頂部的效果。本文將介紹實現這種效果的兩種不同的方法。 先看一下效果圖: 使用IntersectionObserver 思路 上一篇部落格詳細介紹了IntersectionObserver的用法。這裡用來實現這種吸附的

程式開發筆記4—— IntersectionObserver 用法詳解

看微信文件時看到這個很有趣的api,但是官方的文件和例子關於這個api的介紹都是很讓人失望的,所以花了點時間瞭解了以下這個方法,做個記錄,供參考。 簡介 首先,我的理解是,這是一個觀察器(廢話),它用來監測目標物件與某個參照物的相交情況。什麼是相交情況?通俗的說,就是兩個區域有重

程式開發筆記2——自定義導航欄元件

本文主要是熟悉微信小程式自定義元件的開發,以一個常見的導航欄(Tabbar)需求為例。 官方文件:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 首先我們先看一

程式開發-引入阿里巴巴向量icon圖示庫

先在阿里巴巴圖示庫下載icon圖示並儲存到專案裡,然後下載到本地。此步驟的壓縮檔案命名為壓縮1檔案。 解壓下載檔案,開啟轉換網址https://transfonter.org/,點選 Add fonts按鈕將iconfont.ttf檔案上傳上去,按圖操作就好。此步驟的壓縮檔案命名為壓縮2檔