微信小程序開發問題彙總

前言

• 通過將近一個多月的開發,咱們團隊開發的微信小程序 "出發吧一塊兒" 終於開發完成,如今的線上版本爲 2.2.4-beta 版本文章主要介紹該小程序在開發中所用到的技術,已經在開發中遇到問題的採起的解決方法
• 開源地址

開發中技術問題彙總

1.使用e.target.dataset的出現問題

在小程序開發過程當中,咱們常常會用到標籤中屬性的屬性值,咱們一般會在 <view> 中 設置 data-*="{{XXX}}" 而後在 JS 裏經過 e.target.dateset.* 來獲取XXX值,可是我常常遇到獲取的是undefined,使用 console.log(e) 查看輸出信息會發現,在 e對象中包含兩個對象分別是currentTarget和target,而每每有些時候數據在currentTarget中,

此時能夠將代碼替換成這樣來獲取值

• WXML

<view bindtap="bintap" data-id="1"></view>

• JS

bintap:function(e){
    var id = e.currentTarget.dataset.id;
}

網上還有一直說法是 data-* 裏 * 命名的問題,去掉駝峯式命名,純小寫也能解決

2.小程序 textarea 文本框如何顯示實時字數

• WXML

<view>
    <view>
        <textarea name="content" bindinput="bindTextAreaChange" maxlength="{{noteMaxLen}}" />
        <view class="chnumber">{{noteNowLen}}/{{noteMaxLen}}</view>
    </view>
</view>

• JS

data:{
    noteMaxLen: 200,//備註最多字數
    noteNowLen: 0,//備註當前字數
}

  //字數改變觸發事件
  bindTextAreaChange: function (e) {
    var that = this
    var value = e.detail.value,
      len = parseInt(value.length);
    if (len > that.data.noteMaxLen)
      return;
    that.setData({
      content: value, noteNowLen: len
    })
  },

3.利用 JS 實現模糊查詢

因爲咱們使用的是 Bmob 後端雲提供的數據處理與存儲支持，根據 Bmob 提供的開發文檔，免費版的應用沒法進行模糊查詢，看到這裏，再看看已經快完工的活動檢索界面，感覺沒法言說。正當準備放棄的時候，忽然想到一個方法，那就是先把全部的後臺全部數據都存到集合裏，而後根據輸入的檢索值一個個匹配，想到以後立刻就開始着手幹了，先查了一下javaScript 文檔,String 對象有一個方法是 indexOf() ,可返回某個指定的字符串值在字符串中首次出現的位置,這樣就成了,遍歷 因此數據,檢索每一條數據的每一個字符,若是出現了則將它加入到檢索結果的集合中.

• JS

//js 實現模糊匹配查詢
  findEach: function (e) {
    var that = this
    var strFind = that.data.wxSearchData.value; //這裏使用的 wxSearch 搜索UI插件,
    if (strFind == null || strFind == "") {
      wx.showToast({
        title: '輸入爲空',
        icon: 'loading',
      })
    }
    if (strFind != "") {
      var nPos;
      var resultPost = [];
      for (var i in smoodList) {
        var sTxt = smoodList[i].title || ''; //活動的標題
        nPos = sTxt.indexOf(strFind); 
        if (nPos >= 0) {//若是輸入的關鍵字在該活動標題中出現過,則匹配該活動
          resultPost.push(smoodList[i]); //將該活動加入到搜索到的活動列表中
        }
      }
      that.setData({
        moodList: resultPost
      })
    }
  },

更加詳細的代碼請前往Github查看

4.使用 JS 將字符串格式的時間轉換成幾秒前,幾分鐘前...

因爲小程序中涉及評論,加入活動,收藏等一系列包括事件時間的功能,而數據庫中存的時間格式爲 2017-11-30 23:36:10 如今想要在界面上不顯示具體時間,而是顯示與當前時間的差,即幾秒前,幾分鐘前等等

實現起來並不複雜,主要思路是先把字符串的時間轉換成時間戳,而後與當前的時間戳進行比較,這樣就能轉換成幾秒前、幾分鐘前、幾小時前、幾天前等形式了

• JS

//字符串轉換爲時間戳
function getDateTimeStamp(dateStr) {
  return Date.parse(dateStr.replace(/-/gi, "/"));
}
//格式化時間
function getDateDiff(dateStr) {
  var publishTime = getDateTimeStamp(dateStr) / 1000,
    d_seconds,
    d_minutes,
    d_hours,
    d_days,
    timeNow = parseInt(new Date().getTime() / 1000),
    d,

    date = new Date(publishTime * 1000),
    Y = date.getFullYear(),
    M = date.getMonth() + 1,
    D = date.getDate(),
    H = date.getHours(),
    m = date.getMinutes(),
    s = date.getSeconds();
  //小於10的在前面補0
  if (M < 10) {
    M = '0' + M;
  }
  if (D < 10) {
    D = '0' + D;
  }
  if (H < 10) {
    H = '0' + H;
  }
  if (m < 10) {
    m = '0' + m;
  }
  if (s < 10) {
    s = '0' + s;
  }

  d = timeNow - publishTime;
  d_days = parseInt(d / 86400);
  d_hours = parseInt(d / 3600);
  d_minutes = parseInt(d / 60);
  d_seconds = parseInt(d);

  if (d_days > 0 && d_days < 3) {
    return d_days + '天前';
  } else if (d_days <= 0 && d_hours > 0) {
    return d_hours + '小時前';
  } else if (d_hours <= 0 && d_minutes > 0) {
    return d_minutes + '分鐘前';
  } else if (d_seconds < 60) {
    if (d_seconds <= 0) {
      return '剛剛';
    } else {
      return d_seconds + '秒前';
    }
  } else if (d_days >= 3 && d_days < 30) {
    return M + '-' + D + ' ' + H + ':' + m;
  } else if (d_days >= 30) {
    return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
  }
}

5.微信小程序提交表單清空表單數據

在發佈活動以後,因爲表單中的數據沒有清空,給用戶的體驗一定很差,然而小程序的數據交互並不像html + jS 那樣,使用 dataSet({}) 來給賦值,視圖層就能經過異步的方式活動到值,因而想到,在提交表單後,給這些input都賦值爲空,那樣就實現了清空表單的效果,固然,表單中並不僅包含input,可是均可以經過這種方式實現清空效果

• WXML

<form bindsubmit="submitForm">
    <text class="key">活動名稱</text>
    <input name="title"  maxlength="100" value="{{title}}" />
    <button  formType="submit">肯定</button>
</form>

• JS

submitForm:function(e){
     var title = e.detail.value.title;
     ......
     success: function (res) {
         //將title值設置空
        that.setData({
            title: ''
         }
     }
}

6.微信號,QQ號,手機號 正則校驗

因爲申請加入活動須要填寫真實姓名,聯繫方式等信息,爲了防止用戶隨意填寫信息,必需要對這些信息進行校驗

• JS

var wxReg = new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$"); //微信號正則校驗
    var qqReg = new RegExp("[1-9][0-9]{4,}"); //QQ號正則校驗
    var phReg = /^1[34578]\d{9}$/; //手機號正則校驗
    var nameReg = new RegExp("^[\u4e00-\u9fa5]{2,4}$"); //2-4位中文姓名正則校驗

7.使用 Bmob SDK 實現報名成功發送模板消息,生成小程序二維碼等

在開發過程當中,因爲想要實現,當用戶報名成功後如何通知用戶,查閱了小程序的開發文檔發現有一個發送模板消息的API,再查詢 Bmob 的開發文檔,發現實現了這個功能,這個真的太有用了.模板消息只能再真機上才能發送成功,通過配置,重要成功,可是有在使用中出現一個問題
,就是在小程序發佈後 模板消息中若是帶有 page 參數將不會發送,可是在開發版中能發送成功, 這個問題已經反饋了,估計等Bmob小程序SDK更新後會解決這個問題.

具體代碼我就不寫了,bmob開發文檔直達

• 發送模板消息
• 生成小程序二維碼