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--><view class="container"> <input placeholder="请输入快递单号" bindinput="input" /> <button type="primary" bindtap="btnClick"> 查询 </button> </view> 로그인 후 복사 /**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} 로그인 후 복사 위 내용은 미니 프로그램 개발 'Express Query'의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Laravel 외래 키가 예상 결과를 출력하지 않습니다.
나는 사용자 이름이라는 외래 키를 사용하여 결합된 두 개의 테이블(사용자 및 피드백)이 있는 Laravel9 웹 애플리케이션을 개발 중입니다. 사용자는 많은 피드...
에서 2024-03-31 16:45:38
0
1
383
React.js CSS 창 너비
저는 React를 사용하여 반응형 웹사이트를 개발하고 있습니다. 스타일링에는 CSS 스타일시트를 사용합니다. 응답 부분은 @media 쿼리를 사용하여 CSS로 구...
에서 2024-03-31 16:31:23
0
1
386
관련 주제
더>
|