哈哈哈

A图8-14L程目求结构

添加“TabBar"按钮,只需在app.json文件中添加tabBar属性即可,代码如下

"tabBar": (

"color": "#dddddd' "selectedcolor": "#3cc51f"

"backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/index/index",

"iconPath": "../../images/facel.png",

"selectedIconPath": "../../images/face.png",

"text": "页面1"

"pagePath": "pages/logs/logs",

"iconPath": "../../images/wechat.png",

"selectedIconPath": "../../images/wechatHL.png",

"text": "页面2"

未选中状态按钮文字的颜色

选中状态按钮文字的颜色背景色

该数组元素表示TabBar当前按钮指向的了

未被选中时的按钮图像文伴职被选中时的按钮图像文件路

.图8-15

8.5小结

11 当前按钮指向的页面

"pagePath": "pages/page/page",

iconPath": "../../images/wechat.png",

'selectedIconPath": "../../images/wechatHL.png",

"text": "页面3"

11 当前按钮指向的页面

小程序中提供了使用的是腾讯地图，的地图应用已经足面,就必须要使用使用不同页面之所以建议拥有多

<scroll-view class="scroll-view_H" scroll-y="true" style="width:100%">

<view class="item-context">{{item.context}}</view>

</view>

</scroll-view>

快件在【沈阳总集散中心】已装车,准备发往【北京

义集股心1

2017-01-21 23:36:35

快件到达【沈阳总集散中心】

1101010.0

▲图19-2 查询结果

顺丰: https://open.sf-express.com/apitools/sdk.html申通: http://open.sto.cn

德邦: http://dop.deppon.com

19.2 设计UI

从图19-2查询结果可以看出,快递查询的UI分为上下两部分,上面可以选择快递公司和输入快递单号,下面是可以滚动的列表,用来显示快递状态。

其中,选择快递公司需要使用<picker组件,布局代码如下:

<picker class="picker-select" bindchange="bindExpressChange" value="((index}}" range

"{{express}}">

<view class="picker"> {{express [index]}}</view> </picker>

</view>

19.2 设计U

在这段布局代码中, picker-wrapper样式用于设置背景色和内容距边界的距离,样式代码如下:

.picker-wrapper background-color: FEE padding: 20px 30px 10px 20px;

spicker>组件的picker-select样式用于设置了<picker>组件的外观,代码如下:

picker-select ( width: 70%;

display: inline-block;

border: 1px solid #ddd;

background-color: #EFE;

border-radius: 2px;

与range属性绑定的express变量设置了目前支持的快递公司(后面会给出完整的实现代码),每一个快递公司用一个<view组件表示, (fexpresslindex1)显示了每一个快递公司的名字。单击<picker>组件后,会在屏幕下方弹出快递公司列表,如图19-3所示。用户可以选择快递单号对应的快递公司。

|oPhone 6 Plus

失递查询

当前选择

汉丰快速

358 25204236

o0さaたtたeue

看假情防t请P准s以ae人rat27039a

由于无法达入喜户地心工套处理中得3度

22922

请a忆进准自s公评e人i添电et (et

确定

ma状ea快aR丰快进nona

snea第19章快递查询

用于输入快递单号的U1布局就非常简单了,只需一个simput>和-button>组件即可,代码如下cview class-"input-wrapper"s

<input class="input-post" types"number" placeholder="请输入快递单号

bindinput-"bindChangeinput"1

<button class"btn-search" types"primary" plain bindtap="bindOnSearch

oadings"i (loading)"查询</button>c/views

sbutton>组件通过设置loading属性,实现在正在查询的过程中,按钮文字的前方会显示不断旋转的圆形进度条,以表示正在查询的过程中。查询完成后,进度条自动消失。

当成功查询到快递单后,会在下方显示可滚动的状态列表,如图19-2所示。这个滚动功能需要通过<scroll-view>容器组件完成,在该组件中,通过wx:for对data.data进行枚举, data对象中的data属性是服务端返回的JSON数组,里面包含了每一个状态的具体细节。用于显示每一个状态信息的是<view>以及里面的3个子<view>,布局代码如下:

<scroll-view class="scroll-view H" scroll-y-"true" style="width: 100%">

<view wx: for="( (data.datal}"wx:key="(t index )" wx:for-item-"iten" class"i{ !index ? 'express-items-active' : 'express-items' }}"

sview class="express-item">

<view class="iten-context">(item.context))</view> <view class="item-time">(item.time))</view> </view

</view> </scroll-view>

最后,还可使用如下的布局代码显示错误信息,如果data.data的长度为0,就认为是错误。例如,快递单号错误,或选错了快递公司。

cview wx:ifs" (data. data. length sme C

{(data. messagel

D)"

s/viewz

class="exoress-error">

完整的布,

cview class iew cla cview

cpicke

range="(te<v

</pick

/view> view cla <input " bindinpu <butto "((loading

</view>

<scroll

<view index ?'e

<vi

</v

</vie

</scrol cview w (idat

</view>

出现错误的U]效果如图19-4所示。

IPhone 6 Plu

快进查询

当前选择:

358125204236

圆通快遵

查询

快递公司参数异常:单号不存在或者已经过期

A图19.4 查询快递单出错

19.3编获取快送同步的bindobindExpress三方API的1完整的Javasvar util Page (tdata: t// ३expre政包裏,"5key:"huitongky当indext//

212

<picker class-"picker-select" bindchange="bindExpresschange" value-"((index))"Wlew class-"picker-tips">当前选择: </views

range="( (express)1"

<view class-"picker">(texpress tindex111</view> </pickers

</views

<view class"input-wrappet"x

<input class-"input-post" types"number" placeholders"请输入快递单号

" bindinput-"bindchangeinput"

<button classs"btn-search" type-"primaxy" plain bindtaps"bindOnSearch" loading=

"((1oading))">查询</button>

</view

<scroll-view class-"scroll-view_H" scroli-y="true" style="width: 100">

<view wx:for="((data.data))" wx:key="(t index ))" wx:for-item-"item" class="(( !

ex ? 'express-items-active' : 'express-items' ))">

sview class="express-item">

sview class="(( !index ? 'point-active' : 'point' )"/>

<view class="item-context">((item.context))</view> <view class="item-time">((item.time)}</view> </view

</view>

</scroll-view>

((data.message}} </view>

</view>

示不断

例

19.31编写业务逻辑代码

获取快递单信息的代码的逻辑比较简单,除了一些控制组件的代码(例如<input组件与变量同步的bindChangelnput方法,以及<picker>组件选择一个快递公司后,更新当前索引的bindExpressChange方法),最为主要的就是bindOnSearch方法,该方法通过wx.request方法请求第三方API的Url,然后获取响应数据,并与响应的变量同步(主要是data.data变量,一个数组变量)。

完整的JavaScript实现代码如下:

ar util = require (../../utils/util.js') Page (f

data: {

।

定义目前支持的快递公司

express: ['圆通快递,, ,申通快递,, '顺丰快递,, ,韵达快递,,德邦物流,, ,中通快递,,,百世快递,,,邮政包裹’，'EMS’,邮政国际了，

//定义快递公司对应的key

key: [ 'yuantong', 'shentong','shunfeng','yunda', 'debangwuliu', 'zhongtong',

'huitongkuaidi', 'youzhengguonei', 'ems', 'youzhengguoji' 1,

/ 当前选择的快递公司索引,从0开始index: 0,

1/ 快递单号

https://robot.leanapp.cn/api/express/

第19章快递查询

postId:

/返回与快速单号对应的快递单状态数据

data: [1,

/ 决定是否在按钮上显示正在装载动画,该属性为true,显示正在装载动画

loading: false

，

onload: function ()i

在

的数

所示

/ spicker>组件的值发生变化时调用该方法

bindExpressChange: function (e) var that this;

console.1og (that.data.keyle.detail.valuel);

that. setData (f index: e.detail. value

)

在<input>组件中输入内容时调用该方法

bindchangeInput: function (e)

this. setData(f

1);

postId: e.detail. value

单击"查询”按钮调用该方法

bindonSearch: function ()

var that = this;

,/ 获取要查询的快递单号

var postId = that.data.postId;

/ 获取当前选择的快递公司对应的key

var type = that.data.key[that.data.index];

f (!postId.length 11 !type.length) return,

// 显示正在装载动画

that. setData(f )；

oading: Ithat. data.loading

1/ 请求第三方API的Url

wx. request (1 url: 'https://robot.leanapp.cn/api/express/'+type+'/'+postId,

header: {

'Content-Type': 'application/json

success: function (res) console. log(res.data);

/ 如果成功返回数据,更新data变量,显示快递单状态数据

that, setData({

loading: !that.data. loading, data: res data

b);

console.error(res.data. data);

指

214

19.4 小结

在成功调用APT后,返回一个JSON类型的数据,其中有一个data属性,该属性是JSON类型最组,用于保存快递单的状态信息。通过Console可以看出这个JSON对象的完整状态,如图19.5雨示

R Console Souroes Network Storage ApData wend Sensor o7 top

D Preserve bog

shunteng

• Sun Feb 19 2017 12:38:01 GRT+08 (сST) 无AppID关联

14工具未检安安全填名,更多请参考文档: https:/mp weixn.gag.con/etug/xadoc/dev/apl/reteork-request.hest

vobject (message: "ok", nu: "358125284235", ischeck: "1", condition: "F8e", com: "shunfeng-) econ: "shunteng"

condition: "rae

data: Array (11

ve: object

context: “已签收(前台),感洲使用规丰,购待再次为您紧g

ttime: "217-01-23 12:87:39

locat ion: "nuil"

time: "2817-81-23 12:87:39"

proto: object

1: Object

context: "正在派送途中,请您准备等收(派件人:1健,电话:18513296452)"

ftine: "2017-01-23 e8:21:28

location: "nult

time: "2017-81-23 6: 21:28

--proto-: object 2: object

3: object

4: object

5: object

6: object

7: objec

8: object

9: obiect

1e: object length: 11 .proto Array te 1scheck: essaces "ak

: "358125204236

states: "g0

status: "29" terato : object

图19-5 第三方API返回的JSON对象

19.41小结

虽然需要发布的小程序明确要求wx.request方法访问的Url包含的域名必须在request访问域中指定,但为了测试方便,未指定ApplID的小程序可以通过wx.request方法访问任何的Url,这个Ur可以是http的,域名也可以不是request访问域指定的,只是这样就不能在手机上预览,更不能发布了。

215

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。