• 技術概述
• 技術詳述
• 技術使用中遇到的問題
• 總結
• 參考文獻或部落格

技術概述

專案開發過程中，我主要是負責小程式前端開發，主要工作是介面樣式的設計和介面呼叫的實現。因為我負責的那部分介面邏輯較為簡單，因此沒有特別困難的技術難點。我就將一些開發過程中碰到的某些坑寫一下。主要是：小程式父子控制元件bindtap事件衝突問題，如何讓view填滿剩餘可用的高度。

技術詳述

1. 在父控制元件和子控制元件都用bindtap繫結事件，且為不同的事件時，父子控制元件的點選事件會衝突。因此可以將子控制元件的繫結改用catchtapcatchtap='childClick' hover-stop-propagation='true'
   ，而父控制元件仍然使用bindtap進行事件繫結bindtap='parentClick'。
2. 當在樣式美化時，需要使用到邊框或者陰影時，如果view中內容較多，則會自動生成頁面滾動輪，設定view的margin和邊框後即可正常顯示。但是，在view中內容不多，不足以鋪滿剩餘高度或者生成滾輪是，view就不會鋪滿全屏。而且使用者的機型各不相同，螢幕尺寸也不同，固定高度的view很難滿足要求。因此可以採用動態獲取該機型螢幕的總高度，減去已佔用的高度，即可得到剩餘高度的大小。這部分我是參考下面給出的部落格，雖然他是要scroll-view，但是view的具體實現也是一樣的。
   下面是流程圖
   
   具體程式碼實現：

calDetailsHeight(){
    let that = this;
    wx.getSystemInfo({
      success: function(res) {
          that.setData({
              windowHeight: res.windowHeight/(res.windowWidth /750)
          });
      }
    });
    console.log(that.data.windowHeight)
    let detialsHeight = that.data.windowHeight - that.data.slidesHeight - that.data.bottomCardHeight - that.data.marginHeight;
    that.setData({
      detailsCardHeight : detialsHeight
    })
    console.log(that.data.detailsCardHeight)
  },
 

技術使用中遇到的問題

• 遇到的問題就是父子控制元件都有點選事件時，容易誤點，需要將子控制元件的點選範圍設定的大一點。
• 還有就是在beta衝刺時，使用vue框架，多個vue檔案的樣式會串掉的問題。可以使用<style scoped>解決，設成私有化的樣式。

總結

我遇到的問題大部分都可以直接通過百度解決，邏輯也並不複雜，因此，這篇部落格比較的簡單。我就在下面列出我參考的比較多的或者認為比較有用的部落格吧。

參考文獻或部落格

小程式實踐（十三）：父子控制元件點選事件衝突
微信小程式 scroll-view 填滿剩餘可用高度
一篇文章弄懂flex佈局
vue 3.x 環境搭建及專案建立
vue 引入 阿里巴巴向量圖的步驟
Vue 爬坑之路（三）—— 使用 vue-router 跳轉頁面