미니 프로그램 개발 "Express Query"

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

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

최근 WeChat 미니 프로그램이 온갖 뜨거운 주제로 활발히 활동하고 있습니다. 요즘에는 미니 프로그램의 기술 문서를 먼저 출판하고 반복해서 읽고 튜토리얼을 바탕으로 사례를 직접 작성했습니다. 오늘 저는 대략 세 단계로 나누어진 Express 쿼리에 대한 작은 데모를 작성했습니다.제품 요구 사항, API 준비 및 코드 작성.

1단계: 제품 요구 사항, 아래와 같이 기능을 구현해야 합니다. 텍스트 상자에 특급 배송 번호를 입력하고 쿼리를 클릭하면 필요한 특급 정보가 필요합니다. 아래에 표시됩니다

2단계: 준비

먼저 Express API인터페이스를 찾습니다. apistore.baidu.com/을 통해 다양한 API를 볼 수 있습니다.

인터페이스 주소와 일부 매개변수를 볼 수 있습니다. 준비가 되면 코딩 작업을 시작하세요...

3단계: 코딩 작업

우리는 새로운 Express 파일을 생성하면 기본 파일이 준비됩니다.

이제 app.js에서 Navigation 헤더를 녹색으로 변경합니다. 배경색은

은 index.json에서 탐색 이름을 설정합니다. "Express Query"

index.wxml에서 기본 코드를 삭제하고 텍스트 입력 상자 중 하나와 쿼리 버튼

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

다음으로 텍스트 상자와 버튼을 제공해야 합니다. 스타일 추가: Set index.wxss의

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

지금까지 다음과 같이 레이아웃이 준비되었습니다.

다음으로 API Express를 호출해야 합니다. 미리 준비한 쿼리 인터페이스 먼저 app.js에서 네트워크 요청 메소드 getExpressInfo를 설정하고 두 개의 매개변수(express 매개변수 하나와 반환 메소드 하나)를 설정해야 합니다.

문서에서 제공하는 wx.request를 사용하여 네트워크 요청 URL을 시작합니다. 주소 경로에는 여러 매개변수가 포함되어 있습니다. muti=0은 전체 데이터의 여러 행을 반환하고 order=desc는 새로운 것부터 오래된 것까지 시간별로 정렬됩니다. , com 택배사명(택배사명), nu 택배주문번호, 헤더 : 요청한 파라미터 값 apikey 는 당사 자체 바이두 계정의 apikey 입니다(자신의 바이두 계정에 로그인하여 보실 수 있습니다) 개인 센터에서)

//设置一个发起网络请求的方法
  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
  }

이러한 요청 방법을 사용하면 클릭한 이벤트를 쿼리 버튼에 추가해야 합니다: 바인딩tap="btnClick", index.js의 쿼리 이벤트, 작성된 요청 메소드 getExpressInfo가 앱을 통해 호출됩니다. 그 전에 텍스트 상자에 입력된 택배 번호를 가져와야 합니다.

텍스트 상자에 바인딩합니다. 🎜>

입력된 택배번호를 받아보세요. data:

객체 에 두 개의 변수 를 정의합니다. 하나는 입력 상자의 값이고 다른 하나는 표시할 택배사 정보입니다.

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

마지막으로 index.wxml에 쿼리된 표현 정보를 표시하고 vx:for를 사용하여 배열을 반복해야 합니다.

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

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

마지막 단계는 표시되는 특급 배송 정보의 스타일을 설정하는 것입니다.

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

이 시점에서 전체 쿼리가 완료되었습니다...

【관련 추천】

1.

위챗 미니 프로그램 소스코드 다운로드

위챗 미니 프로그램 데모: Yangtao

위 내용은 미니 프로그램 개발 "Express Query"의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!