小程序項目入坑實踐

公司因爲小程序原開發需求變更，產品決定從新開始設計新的小程序，人員緊張，致使我接了這個坑~。原開發時準備使用 mpvue 來開發，前篇文章介紹了一些關於mpvue的寫法，後來在我將簡易框架搭建後，發現mpvue的組件分發支持不是很友好，因此棄用，仍是用原生來開發程序。

基本使用可能各大教程都已說的明明白白，這裏就不囉嗦，改篇主要是記錄下本人開發過程當中所遇到的一些問題。

不能使用 async await語法糖

小程序仍是不支持這類語法糖，本人解決辦法就是在使用該語法代碼中引用了regeneratorRuntime

引入圖片時，請先壓縮圖片，小程序大小限制2M多一點

儘可能少引用本地圖片，能放服務器的圖片仍是放在服務器上，畢竟程序大小有限制，本人在沒注意圖片壓縮時，上傳代碼忽然報了個程序代碼限制在2M內。

input輸入數字

通常項目可能都會碰到金額的輸入限制，這裏小程序input組件，可利用type = 'digit'，來控制輸入只能是數值和小數點。

textarea組件鍵盤遮擋問題

這個可能大部分均可預見，各機型對textarea組件輸入可能都有問題，本人開發碰見的是安卓機，尤爲是華爲，當聚焦輸入時鍵盤擋住輸入，並無如預期頁面向上滾動輸入，暫時的兼容解決辦法

在頁面的底部增長元素，當聚焦輸入時，給其高度，讓頁面滾動到鍵盤不可遮住的位置。

<!--控制textarea鍵盤遮擋  -->
<view style='height: {{pageScrollHeight}}px'></view>

當咱們使用組件的聚焦，失焦來處理後，發如今換行時都會觸發textarea的聚焦事件，因此咱們的具體代碼：

// Textarea 獲取鍵盤高度
  focusTextarea: function(e) {
    const _this = this;
    let height = e.detail.height; // 鍵盤高度
    _this.setData({
      pageScrollHeight: (height - 60)
    })
    this.pageScrollToBottom();
  },

// 換行時
  changTextarea: function (e) {
    this.setData({
      hasFocus: false
    })
  },

  // 失去焦點
  blurTextarea: function (e) {
    const _this = this;
    _this.setData({
      pageScrollHeight: 0,
      hasFocus: true
    })
  },

 // 頁面滾動到底部
  pageScrollToBottom: function () {
    if (this.data.hasFocus) {
      wx.createSelectorQuery().select('#page-scroll').boundingClientRect(function (rect) {
        // 使頁面滾動到底部
        wx.pageScrollTo({
          scrollTop: rect.height
        })
      }).exec()
    }
  },

ios9報Can't find variable: setCssToHead 錯誤

這個在小程序社區裏出現過，緣由好像是微信小程序的wxs所引發的，原貼說是因爲wxs文件使用了es6，可是本人代碼特別注意了，沒有使用，仍是同樣報出這個錯誤，當我把這類文件刪除後，程序就可正常運行。因此本人建議：仍是儘可能不要使用wxs了，可到小程序徹底兼容後再嘗試。

總結
整個開發過程當中仍是流暢的，畢竟沒有用小程序裏面不少的API，所遇到的坑和兼容問題都不是不少，本人把項目主要代碼刪除了，小程序開源地址，裏面只有一些程序的結構，和項目的公用代碼，歡迎你們交流指點，原文地址。