H5练手项目-写一个菜鸟裹裹小程序

新手写小程序并不简单，菜鸟裹裹查看快递是很方便的，平常自己查看快递的时候都是在用。当我在微信端搜索菜鸟裹裹小程序时，却没有发现，于是便想自己动手仿app版写一个菜鸟裹裹的小程序，对其中的快递查询物流跟踪很有兴趣。

项目目录结构

使用的开发工具 VScode和微信开发者工具

平台提供：微信公众品台|小程序，在该品台注册账号获取AppId，使用AppId登入微信开发者工具，开启项目

使用的API文档: 微信小程序开发文档,
微信小程序开发教程手册文档_w3c详细介绍了微信各种工具的使用
Vant Weapp,提供了好多实用性的组件，我项目中搜索框使用了该组件库的搜索组件
weUI微信团队的基础样式库，

使用的接口： 快递鸟 接口 提供快递单号和公司编码可以查询快递的物流信息。
腾讯地图开放品台提供了关于使用地图，地图显示，标注/多边形绘制，路线显示这些功能的实现。

页面解构

如下图，总共四个页面

第一个主要页面

<view class="container">

  <van-search class="van-search" value="{
   { value }}" placeholder="请输入拼音缩写或中文" background="#ffffff" bindtap="searchAnother" />
   
  <image class="message" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/5.jpg?sign=62596b8fb882fafa4735a7bb02ec48cf&t=1542775874"></image>
  <view class="weui-tabbar">
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on">
      <icon>
        <image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/saoma.jpg?sign=22ecf7d2269084181e8ace24c1319b06&t=1542775996" alt="" class="weui-tabbar__icon"></image>
      </icon>
      <icon class="weui-tabbar__label" bindtap='scanCode'>扫一扫</icon>
    </icon>
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <icon>
        <image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/2.jpg?sign=2c956d50da50cdf22b74812d1cc51b12&t=1542776039" alt="" class="weui-tabbar__icon"></image>
      </icon>
      <icon class="weui-tabbar__label" >快递员上门</icon>
    </icon>
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <icon>
        <image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/3.jpg?sign=a9cbe061ac103a8e380f73f8c56cec2c&t=1542776057" alt="" class="weui-tabbar__icon"></image>
      </icon>
      <icon class="weui-tabbar__label">精灵书屋</icon>
    </icon>
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <icon>
        <image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/4.jpg?sign=da2382ecf07e72710947db853406d600&t=1542776076" alt="" class="weui-tabbar__icon"></image>
      </icon>
      <icon class="weui-tabbar__label">领裹酱</icon>
    </icon>
  </view>
  <swiper class="ad" indicator-dots='true' indicator-active-color='blue' autoplay='true'>
    <swiper-item wx:for="{
   {imageList}}" wx:key="index" wx:for-item="item">
      <image src="{
   {item.pic}}" mode="widthFix" bind:tap="tapImage" class='ad-img'></image>
    </swiper-item>
  </swiper>
  <view class='action'>
    <text class='action-text'>进行中</text>
    <image class='action-img' mode='aspectFill' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/ad2.jpg?sign=ae6b53f73ba106c5be937df83b016e07&t=1542776132'></image>
  </view>
  <loading hidden="{
   {isLoading}}"></loading>
<scroll-view class='scroll-view' scroll-y="true">
<view class='package-item'  wx:for="{
   {expressLists}}" wx:key="{
   {item.contentId}}"
 wx:for-item="item" data-contentId='{
   {item.text3}}' bindtap='toDetail'>
    
     <view class='item-wrapper'> 

      <text class='item-title'>{
   {item.text1}}</text>
      <image class='item-img' mode='aspectFill' src='{
   {item.image}}'></image>
      <view class="item-block">
        <text class='item-text1'>{
   {item.text2}}</text>
        <text class='item-text2'>{
   {item.text3}}</text>
        <text class='item-text3'>{
   {item.text4}}</text>
      </view>
      </view>
    </view>
<view class='package-item'>//最后一个广告项
    <view class='item-wrapper'>

     <text class='item-title'>有一个神秘包裹想你飞来</text>
      <image class='item-img' mode='aspectFill' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/6.jpg?sign=e713b1367255f2bd83f8098aaac630d4&t=1542776179'></image>
      <view class="item-block">
        <text class='item-text1'>已放入裹裹自提柜</text>
        <text class='item-text2'>菜鸟裹裹</text>
        <text class='item-text3'>神秘包裹已送至裹裹自提柜</text>
      </view>
    
    
    </view>
     
</view>
<text class='{
   {bottomshow== true? "bottomshow":"hide"}}' bindtap='watchMore'>查看全部</text>
  </scroll-view>
  
</view>

前端零基础-进阶-学习圈-731771211

让自己更优秀

第二个页面写起来很简单

<view class='largecontainer'>
  <view class='container'>
    <van-search class="search-top" value="{
   {value}}" placeholder="请输入运单号" use-action-slot bind:change="onChange" bind:search="onSearch">
      <view slot="action" bindtap="cancel">取消</view>
    </van-search>
    <view class='search-middle' bindtap='selectCompany'>