小程序学习之快递查询（一）

  　最近在学习小程序，本来打算用豆瓣得api接口做个电影的demo的，但是豆瓣的开放接口禁止了。于是用百度apistoro的接口做了个快递查询的简单的demo，暂时简单地实现了查询（不要在意功能，就为了简单地体验下小程序和发布博客）。话不多说，进入主题。

　　首先是项目目录,就一个简单的首页=w=

       

　　

　　app.js(apikey百度apistore的个人中心)

App({

　　getExpressInfo: function (nu, cb) {

　　wx.request({

　　　　url: 'https://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu=' + nu,

　　　　data: {

　　　　　　　　x: '',

　　　　　　　　y: ''

　　　　　　　},

　　　　　　header: {

　　　　　　'apikey': '************************'

　　　　　　},

　　　　　　success: function (res) {

　　　　　　// console.log(res.data)

　　　　　　cb(res.data)

　　　　　　}

　　　　})

　　}

})

　

　　index.wxml

<view class='container'>

　　<view class="search-container">

　　　　<input type="text" placeholder="请输入快递单号" bindinput="input"></input><icon bindtap="searchClickEvent" type="search" size="20"/>

　　</view>

　　<scroll-view scroll-y='true'>

　　　　<view class='info' wx:for="{{expressInfo.data}}" wx:key= "key">

　　　　{{item.context}} 【{{item.time}}】

　　　　</view>

　　</scroll-view>

</view>

 

 

　　index.wxss

/*搜索 */

.container .search-container {

　　position: relative;

　　display: flex;

　　justify-content: center;

　　align-items: center;

　　background-color: #ccc;

　　color: #FFF;

　　height: 80rpx;

　　padding: 10rpx 20rpx;

　　z-index: 100;

}　　

.container .search-container input {

　　background: #FFF;

　　color: #AAA;

　　padding: 5px 10rpx;

　　height: 40rpx;

　　width: 100%;

　　border-radius: 8rpx;

}

.container .search-container icon {

　　position: absolute;

　　z-index: 10;

　　top: 50%;

　　margin-top: -20rpx;

　　ight: 40rpx;

}

/*快递信息 */

.container .info{

　　font-size: 30rpx;

　　margin: 10rpx;

}

 

 

index.js

const app = getApp();

Page({

/**

* 页面的初始数据

*/

data: {

　　expressNu: null,

　　expressInfo: null

},

searchClickEvent: function () {

var pageVal = this;

app.getExpressInfo(this.data.expressNu, function (data) {

//806820160474 快递单测试单号

console.log(data)

pageVal.setData({ expressInfo: data })

})

},

input: function (e) {

// console.log(e.detail.value)

this.setData({ expressNu: e.detail.value })

}

})

 

 

　　这是demo的的界面

　　还有很多的功能没实现，随着后面的学习会不断完善这个demo。