小程序項目入坑實踐

zhjx922 發布于2019-08-22 18:02 / 1617人閱讀

摘要：公司由于小程序原開發需求變動，產品決定重新開始設計新的小程序，人員緊張，導致我接了這個坑。輸入數字一般項目可能都會碰到金額的輸入限制，這里小程序組件，可利用，來控制輸入只能是數值和小數點。

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

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

不能使用 async await語法糖

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

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

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

input輸入數字

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

textarea組件鍵盤遮擋問題

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

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

當我們使用組件的聚焦，失焦來處理后，發現在換行時都會觸發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，所遇到的坑和兼容問題都不是很多，本人把項目主要代碼刪除了，小程序開源地址，里面只有一些程序的結構，和項目的公用代碼，歡迎大家交流指點，原文地址。

云服務器 GPU云服務器 php項目小程序特點 php項目實踐 python實踐項目 python項目實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95420.html

Vert.x入坑須知（1）

摘要：輕量級，部署簡單。此外，本文也不是入門文檔，而是為了預防陷坑而給出的指導意見，故在閱讀本文之前還請先仔細閱讀的文檔。可視作的一個最小部署和運行單元，簡單的說，可類比為。，主，負責部署程序中其他的。嚴格來講，之后，上述第一點并不完全正確。一直以來早有將這些年用Vert.x的經驗整理一下的想法，奈何天生不是勤快人，直到最近扶墻老師問起，遂成此文。選擇理由現在想想，我們應該算是國內用V...

Turbo 2019-08-14 17:35 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 入坑篇

摘要：系列文章酷家樂客戶端開發實踐分享入坑篇酷家樂客戶端開發實踐分享軟件自動更新酷家樂客戶端開發實踐分享瀏覽器啟動客戶端酷家樂客戶端開發實踐分享進程通信酷家樂客戶端開發實踐分享下載管理器不定期更新本文的初衷所使用的技術棧和前端工程師完美契合。作者：鐘離，酷家樂PC客戶端負責人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

jay_tian 2019-08-02 15:16 評論0 收藏0
【Electron】酷家樂客戶端開發實踐分享 — 入坑篇

摘要：系列文章酷家樂客戶端開發實踐分享入坑篇酷家樂客戶端開發實踐分享軟件自動更新酷家樂客戶端開發實踐分享瀏覽器啟動客戶端酷家樂客戶端開發實踐分享進程通信酷家樂客戶端開發實踐分享下載管理器不定期更新本文的初衷所使用的技術棧和前端工程師完美契合。作者：鐘離，酷家樂PC客戶端負責人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

TwIStOy 2019-08-23 18:05 評論0 收藏0
渾渾噩噩度三年，轉行入坑軟件測試，2年砍下大廠18K，但對此我并沒有滿足···

摘要：在優衣庫累死累活干了個月，錢不多而且也沒什么前途，日子可以說是過的渾渾噩噩，本該奮斗學習的年紀，我的生活卻如此頹廢，所以下定決心要找其他出路。年成長之路走來的分享年時間，從優衣庫導購到現在的測試工程師。 ...

zhongmeizhi 2021-09-02 15:21 評論0 收藏0
微信小程序從入坑到放棄之坑八：textarea在蘋果手機中的大Bug

摘要：順便補充一句，微信官方提供的判斷依舊不全面，最新出來的蘋果手機還沒有完全支持相關的坑可以在官方社區的問答中找到。首次在這里寫點東西，還請各位大佬擔待點。摘要：昨天的placeholder-class只是希望各位看官注意，而今天的textarea就絕對是一個超級大坑！而且如果看官手中沒有蘋果手機測試的話，這個可就真的是個坑了！為啥？難道要等到用戶向你反饋你們產品有bug？？？.......

dantezhao 2019-08-26 13:24 評論0 收藏0