小程序实战

目录

小程序展示图 

 总结

---

 

小程序展示图 

首页展示图：

首页里面没什么难点，就是只是 在页面刚加载出来的时候发送网路请求获取数据，将数据展示在页面上，在这个过程中，最大的收获竟然是搜索框的位置

我之前是不知道position还有sticky这个属性的，是在这次的练习中才知道的【哭笑】 。

 点击“搜索”时的搜索页面展示图：

<view>
    <!-- 搜索区域 -->
    <view class="search-box">
      <uni-search-bar @input="input" :radius="100" cancelButton="none" bgColor="#ffffff"/>
    </view>
    <!-- 搜索推荐区 -->
    <view class="search-list" v-if="searchList.length !== 0">
      <view class="search-item" v-for="(item,i) in searchList" :key="i" @click="gotoGoodsDetail(item)">
        <text class="search-title">{{item.goods_name}}</text>
        <uni-icons type="right" size="16"></uni-icons>
      </view>
    </view>
    <!-- 历史记录区域 -->
    <view class="history-box" v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17" @click="clearhistories"></uni-icons>
      </view>
      <view class="history-list">
        <uni-tag :text="item" v-for="(item, i) in histories" :key="i" @click="gotoGoodsList(item)"></uni-tag>
      </view>
    </view>
  </view>

        搜索页面里最大的收获就是关于模糊查询和历史记录这两个让我记忆比较深刻，这两个的实现，是我之前没有做过的，我觉得在以后的开发过长中应该会受益良多。。。

分类页面展示图：

        在分类页面中就没有什么特别的，就是用两个scroll-view组件将数据展示在页面上，但在这个过程中明白了scroll-view使用的注意事项，加深了对scroll-view的使用印象。 

购物车展示图：

        一直都听人说，像这种购物软件或是小程序中，最难的是购物车，其实跟着学完之后，发现都是以下基础性的东西混合在一起（个人觉得逻辑性又是有点强的）；这一个页面中就包含了三个组件，比如地址、商品、结算。重点因该算是选中、不选中、全选与商品个数之间的关系，在加上每个商品的个数与价钱的对应关系。

我的展示图：

 

 总结

        这个小程序算是我的第一个在小程序项目中前后端分离的实战项目，之前做过的基本上都是数据写死的。而且这是用uni-app实现的这个过程不但进一步了解小程序的实现过程，还了解了uni-app开发。

        在这个小程序实战中，让我迷上了flex弹性布局，我觉得弹性布局真是太香了，在开发中使用真是······。