AitSchool

首页开发

Web H5 中的标签例如：div 等在小程序中并不适用。小程序中有自己规定的标签组件，详情请参照文档。

首页WXML

  1. 把上章节 index.html 中body内的结构拷贝到 index.wxml 中。例如：
<body>
    *
    *
    *
</body>

  1. 去掉body结束标签上发的 script 脚本引用。

  2. 把 body 标签替换成 view 标签并添加 class 值为 page-body 以便修改样式。

<!-- 之前 -->
<body></body>
<!-- 修改为 -->
<view class="view-container"></view>
  1. header、footer、nav、div、form、 h1 和 p 标签替换为 view 标签。例如：
<!-- 之前 -->
<header class="page-header"></header>
<!-- 修改为 -->
<view class="page-header"></view>
  1. 把 span 标签替换为 text 标签。错误提示的 span 可以删掉。
<!-- 之前 -->
<span class="user-nickName">张三</span>
<!-- 修改为 -->
<text class="user-nickName">张三</text>
  1. 把 a 标签替换为 navigator 标签，并修改 href 属性为 url 属性及调整其对应的地址。例如：
<!-- 之前 -->
<a href="./index.html">首页</a>
<a href="./history.html">历史</a>
<!-- 修改为 -->
<navigator url="/pages/index/index">首页</navigator>
<navigator url="/pages/history/history">历史</navigator>
  1. 修改 img 标签为 image 标签，并把头像文件存放在更目录下 images 文件夹之内。
<!-- 之前 -->
<img class="user-avatar" src="./avatar.png">
<!-- 修改为 -->
<image class="user-avatar" src="/images/avatar.png"></image>
  1. 修改 select 选择控件，替换为 pick 小程序组件。
<!-- 之前 -->
<select class="form-item-select" name="company">
    <option disabled selected value="0">请选择</option>
    <option value="ems">EMS</option>
    <option value="shunfeng">顺丰</option>
    <option value="yuantong">圆通</option>
    <option value="zhongtong">中通</option>
    <option value="shentong">申通</option>
    <option value="huitongkuaidi">汇通</option>
    <option value="yunda">韵达</option>
    <option value="debangwuliu">德邦</option>
</select>

<!-- 修改为 -->
<picker class="form-item-select">
    请选择
</picker>
  1. wxml 改造完代码小结
<view class="view-container">
    <view class="page-header">
        <view class="user-info">
            <image class="user-avatar" src="/images/avatar.png"></image>
            <text class="user-nickName">张三</text>
        </view>
        <view class="page-nav">
             <navigator url="/pages/index/index">首页</navigator>
             <navigator url="/pages/history/history">历史</navigator>
        </view>
    </view>
    <view class="page-body">
        <view class="form-section">
            <view class="container">
                <view class="h1">小猪快递查询</view>
                <view class="form-list">
                    <view class="form-item">
                        <picker class="form-item-select">
                            请选择
                        </picker>
                    </view>
                    <view class="form-item">
                        <input class="form-item-input" type="number" name="order" />
                    </view>
                    <view class="form-item">
                        <button id="submit">提交</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="page-footer">
        <view>Copyright  2018 扎克斯未来体验技术部出品</view>
    </view>
</view>

首页样式

  1. 全局样式

app.wxss

我们把需要全局使用的样式放置于 app.wxss 中，拷贝上章节 app.css 中全局使用的代码。

修改 html 和 body 选择器部分， html 替换为 page ，body 替换为 .view-container，如下所示：

page{
    height: 100%;
}

.view-container{
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
    color: #333;
}

.page-body{
    flex: 1;
}

.page-header{
    padding: 5px 10px;
    box-shadow: 2px 2px 2px #ccc;
}

.user-info{
    display: inline-block;
}

.user-info .user-avatar{
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border-radius: 50%;
}

.user-info .user-nickName{
    vertical-align: middle;
}

.page-nav{
    float: right;
    font-size: 16px;
    line-height: 40px;
}


.container{
    max-width: 750px;
    margin: 0 auto;
    padding: 30px;
}

.page-footer{
    font-size: 12px;
    line-height: 40px;
    text-align: center;
    color: #999;
    letter-spacing: .5px;
}
  1. 首页样式

/pages/index/index.wxss

把 app.css 中首页相关的样式拷贝到 index.wxss 中。

修改一下 detail-section 的 paddingTop 属性，让其不要距离顶部太远。

/* 首页表单模块 */
.form-section{
    padding-top: 120px;
}

/* 主标题 */
.form-section .h1{
    text-align: center;
    font-size: 32px;
}

/* 首页表单 */
.form-section .form-list{
    padding: 30px;
}

/* 首页表单-项 */
.form-section .form-item{
    position: relative;
    margin-bottom: 20px;
}

/* 首页-表单-选择输入*/
.form-section .form-item-select,.form-section .form-item-input{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    padding-left: 15px;
    border: 1px solid #e4e4e4;
}


/* 首页-表单-提交按钮 */
.form-section .form-item button{
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    border: 1px solid #e4e4e4;
}

首页交互

  1. 下拉选择组件 picker

之前在 web H5 的时候我们使用 select 控件，但是在小程序上这个控件并没有，替而代之的事 picker。从底部弹起的滚动选择器，更多信息请参照文档

index.wxml 中添加事件监听，及数据接收。

<picker class="form-item-select" bindchange="bindPickerChange" value="{{selectIndex}}" range="{{deliveryArr}}" range-key="name">
    {{deliveryData[selectIndex]}}
</picker>

其中 ：

  • bindchange 代表选择时候的回调函数
  • value 为当前选择的值
  • range 为数组数据
  • range-key 为当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

我们需要在 js 中data 添加相应 deliveryArr 的数据以给与 range 显示。

Page({
    data:{
        deliveryArr:[
            {
                id:0,
                name:'请选择'
            },
            {
                id:'jd',
                name:'京东'
            },
            {
                id:'ems',
                name:'EMS'
            },
            {
                id:'shunfeng',
                name:'顺丰'
            },
            {
                id:'yuantong',
                name:'圆通'
            },
            {
                id:'yunda',
                name:'韵达'
            },
        ],
        selectIndex:0,
    },
    bindPickerChange:function(e){
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            selectIndex: e.detail.value
        })
    }
})
  1. input 输入表单交互。需要绑定监听改变事件，然后事件获取到的值设置到 input 组件的显示中。
<input class="form-item-input" type="number" name="order" bindinput="bindOrderInput"  value="{{inputValue}}" />

Page({
    data:{
        ...,
        inputValue:''
    },
    ...,
    bindOrderInput:function(e){
        this.setData({
            inputValue: e.detail.value
        })
    }
})
  1. 提交按钮事件绑定。点击按钮获取快递公司和快递单号的值，如果没有弹错误提示，如果有的话拼接新的URL跳转。
<button type="primary" bindtap="submit">提交</button>

Page({
    ...,
    submit:function(e){
        let deliveryArr = this.data.deliveryArr;
        let selectIndex = this.data.selectIndex;
        let inputValue  = this.data.inputValue;

        if(!inputValue || selectIndex == 0){
            wx.showToast({
              title: '请选择快递公司及输入订单号！',
              duration: 2000,
              icon:'none'
            })
            return
        }

        let order_id = inputValue;
        let company  = deliveryArr[selectIndex].id;
        let url = `/pages/detail/detail?company=${company}&order_id=${order_id}`;
        wx.navigateTo({ url });
    }
})
  1. JS 代码小结
Page({
    data:{
        deliveryArr:[
            {
                id:0,
                name:'请选择快递公司'
            },
            {
                id:'jd',
                name:'京东'
            },
            {
                id:'ems',
                name:'EMS'
            },
            {
                id:'shunfeng',
                name:'顺丰'
            },
            {
                id:'yuantong',
                name:'圆通'
            },
            {
                id:'yunda',
                name:'韵达'
            },
        ],
        selectIndex:0,
        inputValue:''
    },
    bindPickerChange:function(e){
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            selectIndex: e.detail.value
        })
    },
    bindOrderInput:function(e){
        console.log('input 输入改变，携带值为', e.detail.value)
        this.setData({
            inputValue: e.detail.value
        })
    },
    submit:function(e){
        let deliveryArr = this.data.deliveryArr;
        let selectIndex = this.data.selectIndex;
        let inputValue  = this.data.inputValue;

        if(!inputValue || selectIndex == 0){
            wx.showToast({
              title: '请选择快递公司及输入订单号！',
              duration: 2000,
              icon:'none'
            })
            return
        }


        let order_id = inputValue;
        let company  = deliveryArr[selectIndex].id;
        let url = `/pages/detail/detail?company=${company}&order_id=${order_id}`;
        wx.navigateTo({ url });
    }
})

← 详情页开发 →