小順序項目入坑實踐

公司因為小順序原開闢需求更改,產物決議重新開始設想新的小順序,職員慌張,致使我接了這個坑~。原開闢時預備運用 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,所遇到的坑和兼容題目都不是許多,本人把項目重要代碼刪除了,小順序開源地點,內里只要一些順序的構造,和項目的公用代碼,迎接人人交換指導,原文地點

    原文作者:Mondo
    原文地址: https://segmentfault.com/a/1190000015280771
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞