简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > WeChat-Applet > Mini-Programmentwicklung > Hauptteil

Mini-Programmentwicklung „Express Query'

Y2J
Freigeben： 2017-05-06 10:49:36
Original
6261 Leute haben es durchsucht



最近微信小程序是炒的如火如荼，各种热门， 正好赶上这个热潮，这几天先把小程序技术文档看了个遍，结合教程手写了一个案例。今天写了一个快递查询的小demo,大致分为三步

产品需求，准备api,代码编写。

In letzter Zeit sind die WeChat-Miniprogramme mit allen möglichen heißen Themen in vollem Gange. Gerade rechtzeitig, um dieser Begeisterung nachzukommen, werde ich das tun Heutzutage habe ich zuerst die technische Dokumentation des Miniprogramms veröffentlicht und einen Fall von Hand geschrieben, der auf dem Tutorial basiert. Heute habe ich eine kleine Demo für Express-Abfrage geschrieben, die grob in drei Schritte unterteilt istProduktanforderungen, API vorbereiten und Code schreiben.


Schritt 1: Produktanforderungen, wir müssen eine Funktion wie unten gezeigt implementieren, die Express-Liefernummer in das Textfeld eingeben, auf Abfrage klicken und die Express-Informationen angeben, die wir benötigen wird unten angezeigt

Schritt zwei: Vorbereiten

Wir finden zuerst eine Express-API Schnittstelle Wir können viele APIs über apistore.baidu.com/ finden. Lassen Sie uns eine Express-Abfrage finden

Wir können die Schnittstellenadresse und einige Parameter sehen. Sobald Sie bereit sind, beginnen Sie mit der Codierungsarbeit...

Schritt 3: Codierungsarbeit

Wir erstellen eine Neue Express-Datei, und dann ist die Standarddatei fertig

Wir ändern jetzt unseren Header Navigation in app.js in eine grüne Farbe. Die Hintergrundfarbe von

legt den Namen der Navigation in index.json fest: „Express Query“

Löschen Sie in index.wxml den Standardcode und fügen Sie eines unserer Texteingabefelder und eine Abfrage--Schaltfläche ein

<!--index.wxml--><view class="container">
   <input placeholder="请输入快递单号" bindinput="input" />
   <button type="primary" bindtap="btnClick"> 查询 </button> </view>
Nach dem Login kopieren

Als nächstes müssen wir dem Textfeld einen Stil hinzufügen den Button: 

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}
Nach dem Login kopieren

in index.wxss setzen. Bisher ist unser Layout wie abgebildet fertig:

Als nächstes gehen wir Wir müssen zunächst die von uns vorbereitete API-Express-Abfrageschnittstelle in app.js einrichten und zwei Parameter festlegen, einen Express-Parameter und einen zurückgegebenen.

Verwenden Sie die vom Dokument bereitgestellte wx.request, um eine Netzwerkanforderungs-URL zu initiieren: Adresspfad, der mehrere Parameter muti=0 enthält, um mehrere Zeilen mit vollständigen Daten zurückzugeben, order=desc, geordnet nach Zeit von neu nach alt , com Der Name des Kuriers (Name des Kurierunternehmens), die Bestellnummer des Kuriers, Header: Der Wert des angeforderten Parameters apikey ist der apikey unseres eigenen Baidu-Kontos (Sie können sich bei Ihrem eigenen Baidu-Konto anmelden und es anzeigen im persönlichen Zentrum) 

//设置一个发起网络请求的方法
  getExpressInfo:function(nu,cb){
    wx.request({
      url: &#39;http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&com=zhongtong&nu=&#39;+nu,  
      data: {
        x: &#39;&#39; ,
        y: &#39;&#39;
      },
      header: {          &#39;apikey&#39;: &#39;247d486b40d7c8da473a9a794f900508&#39;
      },
      success: function(res) {        //console.log(res.data)        cb(res.data);
      }
    })
  },
  globalData:{
    userInfo:null
  }
Nach dem Login kopieren

Mit einer solchen Anfragemethode müssen wir ein angeklicktes Ereignis zu unserer Abfrageschaltfläche hinzufügen: bindtap="btnClick", Fügen Sie die Abfrage in index.js hinzu und rufen Sie die schriftliche Anforderungsmethode getExpressInfo über die App auf. Zuvor müssen wir die Express-Bestellnummer in das Textfeld eingeben.

Binden Sie ein bindinput-Ereignis an das Textfeld ,

Holen Sie sich die eingegebene Kuriernummer. Definieren Sie zwei Variablen im data: Objekt , eine für den Wert des Eingabefelds und eine für die anzuzeigenden Kurierinformationen. 

//index.js//获取应用实例var app = getApp()
Page({
  data: {
    motto: &#39;Hello World&#39;,
    userInfo: {}, 
    einputinfo:null,//输入框值
    expressInfo:null //快递信息  },  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: &#39;../todos/todos&#39;
    })
  },
  onLoad: function () {
    console.log(&#39;onLoad&#39;)    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){      //更新数据      that.setData({
        userInfo:userInfo
      })
    })
  },  //快递输入框事件
  input:function(e){     this.setData({einputinfo:e.detail.value});
  },  //查询事件
  btnClick:function(){ 
    var thisexpress=this;  
    app.getExpressInfo(this.data.einputinfo,function(data){
        console.log(data);
        thisexpress.setData({expressInfo:data})
    })
  }
})
Nach dem Login kopieren

Schließlich müssen wir die abgefragten Express-Informationen in index.wxml anzeigen und vx:for verwenden, um das Array in einer Schleife zu durchlaufen. 

<!--index.wxml--><view class="container">
   <input placeholder="请输入快递单号" bindinput="input" />
   <button type="primary" bindtap="btnClick"> 查询 </button> </view>
    
    
      
  • {{item.context}}
    • 
      
  • {{item.time}}
    •
Nach dem Login kopieren

Der letzte Schritt besteht darin, den Stil der angezeigten Express-Informationen festzulegen: 

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}
 .expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;}  
 .expressinfo li{display:block}
Nach dem Login kopieren

An diesem Punkt ist unsere gesamte Abfrage abgeschlossen...

[Verwandte Empfehlungen]

1. WeChat-Miniprogramm-Quellcode-Download

2. WeChat-Miniprogramm-Demo: Yangtao

Das obige ist der detaillierte Inhalt vonMini-Programmentwicklung „Express Query'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
小程序开发，快递查询
Quelle：php.cn
Vorheriger Artikel：IDE-Konfiguration für die Entwicklung kleiner Programme Nächster Artikel：Miniprogrammentwicklung kleiner Telefonbuchfunktionen
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Laravel-Fremdschlüssel geben nicht die erwarteten Ergebnisse aus Ich entwickle eine Laravel9-Webanwendung mit zwei Tabellen (Benutzer und Rückmeldungen), d...
Aus 2024-03-31 16:45:38
0
1
383
React.js CSS-Fensterbreite Ich entwickle eine responsive Website mit React. Für das Styling verwende ich CSS-Styleshe...
Aus 2024-03-31 16:31:23
0
1
386
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！