Introduction à la fonction de requête de livraison express développée par l'applet WeChat

Cet article présente principalement les informations pertinentes sur la mise en œuvre de la fonction de demande de livraison express dans le développement de l'applet WeChat. Ici, la fonction de demande de livraison express dans l'applet WeChat est implémentée. Les amis dans le besoin peuvent se référer à

<.>Fonctions de demande express de l'applet WeChat :

exigences du produit,

préparation de l'API,

écriture de code.

Étape 1 : Exigences du produit, nous devons implémenter une fonction comme indiqué ci-dessous. Entrez le numéro de livraison express dans la zone de texte, cliquez sur Requête et les informations express dont nous avons besoin apparaîtront ci-dessous.

Étape 2 : Préparation

On trouve d'abord une interface API express via http://apistore.baidu. com / Nous pouvons voir beaucoup d'API. Trouvons une requête express

et nous pouvons voir l'adresse de l'interface et certains paramètres. Une fois que vous êtes prêt, commencez le travail de codage...

Étape 3 : Travail de codage

Nous créons un nouveau fichier Express, puis préparons le fichier par défaut Terminé

Nous changeons maintenant notre tête de navigation dans app.js en une couleur de fond verte

Définir le nom de la navigation dans index.json : "Express Query"

Dans index.wxml, supprimez le code par défaut et mettez dans une de nos zones de saisie de texte, un bouton de requête

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

Ensuite, nous devons ajouter un style à la zone de texte et au bouton : définir

dans index.wxss >

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

Jusqu'à présent, notre mise en page est prête comme indiqué ci-dessous :

Ensuite, nous devons appeler. Nous avons préparé l'interface de requête api express à l'avance. Nous devons d'abord configurer une méthode de requête réseau getExpressInfo dans app.js et définir deux paramètres, un paramètre express et une méthode de retour.

Utilisez le wx.request fourni par le document pour lancer une requête réseau url : chemin d'adresse, qui contient plusieurs paramètres muti=0 pour renvoyer plusieurs lignes de données complètes, order=desc classés par heure du nouveau à l'ancien , com Le nom du coursier (nom de la société de messagerie), nu numéro de commande du coursier, en-tête : la valeur du paramètre demandé apikey est l'apikey de notre propre compte Baidu (vous pouvez vous connecter à votre propre compte Baidu et le consulter dans le centre personnel)

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

Avec une telle méthode de requête, nous devons ajouter un événement de clic à notre bouton de requête : bindtap="btnClick", ajoutez la requête dans l'événement index.js, appelez la méthode de requête écrite getExpressInfo via l'application. Avant cela, nous devons obtenir le numéro de commande express saisi dans la zone de texte

Lier un événement bindinput à la zone de texte. ,

Obtenez le numéro de suivi express saisi. Définissez deux variables dans les données : objet : la valeur de la zone de saisie et les informations du coursier à afficher.

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {}, 
  einputinfo:null,//输入框值
  expressInfo:null //快递信息
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../todos/todos'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  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})
  })
 }
})

Enfin, nous devons afficher les informations express interrogées dans index.wxml et utiliser vx:for pour boucler le tableau.

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

  

   
{{item.context}}
   
{{item.time}}
 
  
 

Le style des informations de messagerie affichées dans la dernière étape des paramètres :

/**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}

À ce stade, l'intégralité de notre requête est terminée...

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde. étude. Plus de contenu connexe Veuillez faire attention au site Web chinois PHP !

Recommandations associées :

À propos de la mise en œuvre de la barre de navigation supérieure dans le mini-programme WeChat

Vidéo de mise en œuvre vidéo dans le mini programme WeChat Introduction aux fonctions de lecture et de barrage

L'applet WeChat réalise l'effet des onglets de la barre de navigation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!