• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 微信開發之旅———Day6(遠程請求)

    之前講到了網絡api的使用,這里有自己服務器的同學可以使用spring boot自己寫一寫api然后部署到服務器上使用,沒有的同學可以跟我這里一起操作一下。

    ##一、新建一個項目
    需求:一個搜索框+一個搜索按鈕
    大家可以自己嘗試寫一下

    下面是我寫的(比較簡陋,只是為了講解api這一塊的使用,雖然文檔很容易懂,但是過程中還是會碰到不少問題,這里帶大家一起解決一下)

    <!--pages/test/test.wxml-->
    <input placeholder='請輸入搜索內容' bindinput='inputBtn' style='border:solid 1px black'/>
    <button bindtap='sousuo'>搜索</button>
    <text>{{ret}}</text>
    
    // pages/test/test.js
    Page({
    
      /**
       * 頁面的初始數據
       */
      data: {
        input:null,
        ret:"" 
      },
    
      inputBtn: function(e){
        this.setData({
          input:e.detail.value
        })
      },
      sousuo:function(){
        console.log(this.data.input);
      }
    })
    

    ##二、api使用
    首先做了最基本的需求,那么我們的搜索怎么來使用呢?
    因為我們沒有現成的api可以使用,那就去蹭一下別人的吧。這里給大家找了一個免費的測試接口供大家學習使用。

    淘寶商品搜索建議:

    url: http://suggest.taobao.com/sug
    
    get:
    * code   強制為utf-8
    * q   商品關鍵字
    * callback   強制為cb
    
    return:
    cb({
    "result":[
      ["衛衣女","14953757"],
      ["衛衣男","11459945"],
      ["衛衣男潮","20194993"],
      ["衛衣加厚加絨女","9774198"],
      ["衛衣女加絨","14761593"],
      ["衛衣女寬松","10757887"],
      ["衛衣女中長款","3707116"],
      ["衛衣男連帽","16890363"],
      ["衛衣連衣裙","870723"],
      ["衛衣女連帽","13681857"]
    ]
    })
    
    示例:
    http://suggest.taobao.com/sug?code=utf-8&q=衛衣&callback=cb
    

    這里大概解釋一下url地址吧。
    URL的結構:
    基本URL包含模式(或稱協議)、服務器名稱(或IP地址)、路徑和文件名,如“協議://授權/路徑?查詢”。完整的、帶有授權部分的普通統一資源標志符語法看上去如下:協議://用戶名:密碼@子域名.域名.頂級域名:端口號/目錄/文件名.文件后綴?參數=值#標志

    這里通過前一天的學習了解了wx.request今天來用一下
    上代碼:

    // pages/test/test.js
    Page({
    
      /**
       * 頁面的初始數據
       */
      data: {
        input:null,
        ret:""
      },
    
      inputBtn: function(e){
        this.setData({
          input:e.detail.value
        })
      },
      sousuo:function(){
        var that = this;
        var input = this.data.input;
        wx.request({
          url: 'http://suggest.taobao.com/sug',
          data:{
            code:'utf-8',
            q: input,
            callback:'cb'
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded; charset=utf-8'
          },
          success(res) {
            console.log(res.data);
            that.setData({
              ret:res.data
            })
          }
        })
      }
    })
    

    這里要注意的一點:

    • 對于 POST 方法且 header[‘content-type’] 為 application/json 的數據,會對數據進行 JSON 序列化
    • 對于 POST 方法且 header[‘content-type’] 為 application/x-www-form-urlencoded 的數據,會將數據轉換成 query string
      所以我這里使用了application/x-www-form-urlencoded,如果不使用的話,傳參的時候會出現數據(data)無法成功附著在url后面進而導致無法構成正確的請求的問題。簡單的說就是json格式的data無法直接拼接在url之后,所以會出現返回參數異常的情況。

    大家可以參照這個代碼去嘗試一下別的api。

    效果圖

    對了,這里要注意一下,因為我們沒注冊域名(上一節中有提到),所以需要打開不校驗域名這個功能,因為小程序對域名使用這塊把控比較嚴格,但是測試的話,就先關閉這里進行測試,更加方便一些,正式上線時需要去注冊域名(上一節的某個文檔中有講到)

    修改不校驗域名

    有興趣的同學還可以把結果整理一下,用更好看的方式打印出來,我這里就不做修改了~

    好了今天就到這里吧!

    上一篇:微信開發之旅———Day5(網絡API)
    下一篇:微信開發之旅———Day7(媒體api)

    版權聲明:本文為qq_40294512原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/qq_40294512/article/details/89363793

    智能推薦

    Verilog DAY6

    1 reg 寄存器 綜合成物理連線,鎖存器和觸發器 always,initial Wire 綜合成真實的物理連線 assign 阻塞賦值 = 用于組合邏輯 非阻塞賦值 <= 用于時序邏輯 Parameter 參數 define宏定義 起作用的范圍不同 (1)作用域不同。parameter作用于聲明的那個文件;define從編譯器讀到這條指令開始到編譯結束都有效,或者遇到undef命令使之失效...

    筆記day6

    引用數據類型有三種,數組,類,接口。 對于幾個基本變量有兩種操作方式:賦值和取值(也就是打印)。 下面的分析是自己定義了手機類然后測試類進行編譯運行的內存變化圖。 兩個類都需要運行,然后棧內存,堆內存,方法區。 Testphone.class先進內存(方法區的內存 )然后main進來;Phone.class進入方法區,然后是 color,brand,size屬性進入方法區; 程序運行的時候,mai...

    JAVA DAY6

    文章目錄 JAVA DAY6 面向對象和面向過程 舉例:洗衣服 類 如何使用類: 一個對象的內存圖 兩個對象的內存圖 成員變量和局部變量 private關鍵字 this關鍵字 封裝 構造方法 JAVA DAY6 面向對象和面向過程 面向過程:強調的是每一個功能的步驟 面向對象:強調的是對象,然后有對象去調用功能 面向對象的思想: 面向對象是基于面向過程的一種編程思想 面向對象的思想特點: 1.是一...

    day6

    cyclic 這個題直接模擬,先把k%一下防止過大 然后直接做就行了 book 這個題是最難的 其實是一個貪心,很簡單的貪心,但很難想 別人講也聽不懂,我就沒搞懂 因為已經讀過的書必須放到上面,所以搬后面的書時,必須搬之前看過的書 不如把你下一次要看的書放倒最前面,這樣就能搬最小代價的書了。 set 這是一個樹形dp題 很容易得出 一個父節點的方案數可以由子節點組合出來出,而子節點的方案數為,選子...

    Python Day6

    常用模塊 random random() 方法返回隨機生成的一個實數 import random print(random.randint(1,3)) #[1,3] 大于等于1且小于等于3之間的整數 print(random.randrange(1,3)) #[1,3) 大于等于1且小于3之間的整數 print(random.choice([1,'23',[4,5]])) #1或者23或者[4,5...

    猜你喜歡

    Oracle Day6

    本節內容     數據庫其他對象   1.視圖   2.索引   3.序列   4.同義詞   一、視圖     視圖:是一張虛擬的表,沒有存儲空間,是邏輯上的一張表,本身不包含數據。     通過它可以對表里面的數據進行查詢和修改。視圖基于的表稱為基表。    視圖的...

    MySQL day6

    分組函數 說明:分組函數往往用于實現將一組數據進行統計計算,最終得到一個值,又稱為聚合函數或統計函數 分組函數清單: sum(字段名) :求和 avg(字段名):求平均數 max(字段名):求最大值 min(字段名):求最小值 count(字段名):計算非空字段值的個數 #count的補充介紹 #1.統計結果集的行數,推薦使用count()* #2.搭配distinct實現去重的統計 分組查詢 語...

    Day6

    函數也是對象 結果: 內存分析: 變量的作用域(全局變量和局部變量) 全局變量: 在函數和類定義之外聲明的變量。作用域為定義的模塊,從定義位置開始直到模塊 結束。 全局變量降低了函數的通用性和可讀性。應盡量避免全局變量的使用。 全局變量一般做常量使用。 函數內要改變全局變量的值,使用 global 聲明一下 局部變量: 在函數體中(包含形式參數)聲明的變量。 局部變量的引用比全局變量快,優先考慮使...

    hive 導出數據之一列多行,轉為一行多列

    需求:提取數據 說明:原數據是一列多行,需要轉化為一行多列 待查詢表為:temp_05 待查詢數據為: 待查詢數據如圖: 需要提取的數據表頭如下: 預定日期 昨日價格 前天價格 2018-02-01 2018-02-02 2018-02-03 2018-02-04 可用提數 SQL 數據如圖: 以下為嘗試過程 數據如圖: 數據如圖: 數據如圖: 數據如圖:...

    asp.net做一個簡易的聊天室

    要求: 結果: 關鍵代碼: Default.aspx Default.aspx.cs Default2.aspx Default2.aspx.cs Default3.aspx Default3.aspx.cs Default4.aspx...

    精品国产乱码久久久久久蜜桃不卡