醫院訂餐小程序

一。微信小程序的登陸態、身份驗證和敏感信息獲取

參考文章：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函數內部邏輯，下降了代碼之間的耦合度。