医院订餐小程序

是洋芋呀
542 阅读3分钟

一。微信小程序的登录态、身份验证和敏感信息获取

参考文章：abigaleyu.co/2017/08/11/…

小程序介绍

小程序提供的功能

  • 商品展示，搜索以及排序功能
  • 购物车功能
  • 提交订单功能
  • 支付功能
  • 支付成功信息回显功能
  • 查看我的订单功能
  • 用户评价，以及查看自己的评价功能
  • 新增收获地址功能

项目说明

难点

1.刚开始接触小程序的时候，不知道何为组件， 何为template，也不知道如何拆分组件，所以项目目录采用的是一个页面对应一个目录，将页面的UI全写到了一个wxml中，但随着代码量的增多，慕然理解到了组件两个字的含义，所以就将代码进行了重写，将一些公用部分写成组件，并把页面划分为块状，不同的块状写入不同的子目录。 2.五角星的实现

<view class='container'>
    <view class="head-r">
      <image class="no-star" src="{{noStarUrl}}" data-num='1' catchtap="addStar" wx-if="{{activeNum<1}}"/>
      <image class="star" src="{{starUrl}}" wx-if="{{activeNum>0 &&activeNum<=5}}" data-num='1' catchtap="addStar"/>
      <image class="no-star" src="{{noStarUrl}}" data-num='2' catchtap="addStar" wx-if="{{activeNum<2}}"/>
      <image class="star" src="{{starUrl}}" wx-if="{{activeNum>1 && activeNum<=5}}" data-num='2' catchtap="addStar"/>
      <image class="no-star" src="{{noStarUrl}}" data-num='3' catchtap="addStar" wx-if="{{activeNum<3}}"/>
      <image class="star" src="{{starUrl}}" wx-if="{{activeNum>2&& activeNum<=5}}" data-num='3' catchtap="addStar"/>
      <image class="no-star" src="{{noStarUrl}}" data-num='4' catchtap="addStar" wx-if="{{activeNum<4}}"/>
      <image class="star" src="{{starUrl}}" data-num='4' wx-if="{{activeNum>3 && activeNum<=5}}" catchtap="addStar"/>
      <image class="no-star" src="{{noStarUrl}}" data-num='5' catchtap="addStar" wx-if="{{activeNum<5}}"/>
      <image class="star" src='{{starUrl}}' wx-if="{{activeNum==5}}" data-num='5' catchtap="addStar"/>
    </view>
    <view class='title'>
      <label class="praise" wx-if="{{activeNum==5}}">非常好</label>
      <label class="praise" wx-if="{{activeNum==4}}">好</label>
      <label class="praise" wx-if="{{activeNum==3}}">中等</label>
      <label class="praise" wx-if="{{activeNum==2}}">一般</label>
      <label class="praise" wx-if="{{activeNum==1}}">差</label> 
    </view>
</view>

data: {
  activeNum: 0,
  noStarUrl: 'http://common.static.sangeayi.cn/shop_wx/images/icon_star_border.png',
  starUrl: 'http://common.static.sangeayi.cn/shop_wx/images/icon_star_green.png'
},
addStar(event) {
  this.setData({
    activeNum: event.currentTarget.dataset.num
  })
}

image{
  width: 70rpx;
  height: 70rpx;
}
.head-r{
  width: 400rpx;
  display: flex;
  justify-content:space-between;
}
.container{
  display: flex;
}

3.排序（价格低的排在上面，当价格相同时，好评优先）

  • 项目中使用骨架屏来代替传统的菊花图，极大的提高了用户的感知体验。
  • 在项目中大量使用template模板，从而减少了重复代码，提升了开发效率。
  • 项目中遇到的最大问题是由于同步问题，无法拿到后端返回的数据，从而将逻辑实现写于success中，因此造成了success函数异常臃肿，代码阅读困难，耦合度高，排错困难。最 后通过Promise+async/await将后端返回的数据存到了全局，最后极大的简化了success函数内部逻辑，降低了代码之间的耦合度。
avatar
文章
阅读
粉丝