简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > Applet WeChat > Développement de mini-programmes > le corps du texte

Développement de mini-programmes 'Requête express'

Y2J
Libérer： 2017-05-06 10:49:36
original
6260 Les gens l'ont consulté



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

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

Récemment, les mini-programmes WeChat battent leur plein, avec toutes sortes de sujets d'actualité. Juste à temps pour rattraper cet engouement, je vais publiez d'abord la documentation technique du mini programme ces jours-ci, je l'ai lu encore et encore et j'ai écrit un cas à la main basé sur le tutoriel. Aujourd'hui, j'ai écrit une petite démo pour une requête express, qui est grossièrement divisée en trois étapesExigences du produit, préparation de l'API et écriture du 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îtra ci-dessous

Deuxième étape : préparer

Nous trouvons d'abord une interface API express Nous pouvons voir de nombreuses API via apistore.baidu.com/ Trouvons une requête express

<.>

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 le fichier par défaut est prêt

Nous changeons maintenant notre en-tête

Navigation en une couleur verte dans app.js La couleur d'arrière-plan de

définit le nom de la navigation dans index.json : "Express Query"

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

<!--index.wxml--><view class="container">
   <input placeholder="请输入快递单号" bindinput="input" />
   <button type="primary" bindtap="btnClick"> 查询 </button> </view>
Copier après la connexion
Ensuite, nous devons donner la zone de texte et ajouter un style à le bouton : Définissez 

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}
Copier après la connexion
dans index.wxss. Jusqu'à présent, notre mise en page est prête comme indiqué :

Ensuite, nous Nous devons appeler l'interface de requête api express que nous avons préparée à 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 renvoyée.

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: &#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
  }
Copier après la connexion
Avec une telle

méthode de requête, nous devons ajouter un événement cliqué à 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 coursier saisi. Définissez deux

variables dans les données : objet , une pour la valeur de la zone de saisie et une pour les informations du coursier à afficher. 

//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})
    })
  }
})
Copier après la connexion
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}}
    •
Copier après la connexion
La dernière étape consiste à définir le style des informations express affichées : 

/**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}
Copier après la connexion
À ce stade, toute notre requête est terminée...

[Recommandations associées]

1.

Téléchargement du code source du mini-programme WeChat

2

Démo du mini-programme WeChat : Yangtao<.>

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!

Étiquettes associées：
小程序开发，快递查询
source：php.cn
Article précédent：Configuration IDE pour le développement de petits programmes Article suivant：Développement de mini-programmes de fonctions de petit annuaire téléphonique
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Les clés étrangères Laravel ne produisent pas les résultats attendus Je développe une application Web Laravel9 avec deux tables (utilisateurs et commentaires) ...
Depuis 2024-03-31 16:45:38
0
1
383
Largeur de la fenêtre CSS React.js Je développe un site Web réactif en utilisant React. Pour le style, j'utilise des feuilles...
Depuis 2024-03-31 16:31:23
0
1
386
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！