微信小程式開發遇到的問題總結-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

微信小程式開發遇到的問題總結

小云云

Jan 25, 2018 pm 03:08 PM

小程式匯總程式開發

微信小程式開發完工了，自然也遇到了不少問題，本文我們主要和大家分享微信小程式開發遇到的問題匯總，希望能幫助到更多的微信開發者。

小程式簡介

「讓興趣不再孤單，讓嗜好不再流浪」是微信小程式《出發吧一起》的主題，這款小程式旨在解決當代大學生在校園生活中的孤獨感，讓大家找到志同道合的朋友，在跑步、健身、競賽等活動中找到夥伴。利用小程式即開即用，用完就走的特點與交友結合，它將會是一款高效快速、無負擔的線下交友利器

本小程式由 bmob 後端雲提供資料處理與儲存支援

小程式碼

微信小程式開發遇到的問題總結

開發中技術問題總結

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

在小程式開發過程中,我們常常會用到標籤中屬性的屬性值,我們通常會在中設定 data-*="{{XXX}}" 然後在 JS裡透過 e.target.dateset.* 來取得XXX值,但是我常遇到取得的是undefined,使用 console.log(e) 檢視輸出資訊會發現,在 e物件中包含兩個物件分別是currentTarget和target ,而往往有些時候資料在currentTarget中,

此時可以將程式碼替換成這樣來取得值

WXML

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

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>

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 实现模糊匹配查询
  findEach: function (e) {
    var that = this var strFind = that.data.wxSearchData.value; //这里使用的 wxSearch 搜索UI插件, if (strFind == null || strFind == "") {
      wx.showToast({
        title: &#39;输入为空&#39;,
        icon: &#39;loading&#39;,
      })
    }
    if (strFind != "") {
      var nPos;
      var resultPost = [];
      for (var i in smoodList) {
        var sTxt = smoodList[i].title || &#39;&#39;; //活动的标题
        nPos = sTxt.indexOf(strFind); 
        if (nPos >= 0) {//如果输入的关键字在该活动标题中出现过,则匹配该活动
          resultPost.push(smoodList[i]); //将该活动加入到搜索到的活动列表中
        }
      }
      that.setData({
        moodList: resultPost
      })
    }
  },

更詳細的程式碼請前往Github查看

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

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

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

//字符串转换为时间戳 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 = &#39;0&#39; + M;
  }
  if (D < 10) {
    D = &#39;0&#39; + D;
  }
  if (H < 10) {
    H = &#39;0&#39; + H;
  }
  if (m < 10) {
    m = &#39;0&#39; + m;
  }
  if (s < 10) {
    s = &#39;0&#39; + 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 + &#39;天前&#39;;
  } else if (d_days <= 0 && d_hours > 0) {
    return d_hours + &#39;小时前&#39;;
  } else if (d_hours <= 0 && d_minutes > 0) {
    return d_minutes + &#39;分钟前&#39;;
  } else if (d_seconds < 60) {
    if (d_seconds <= 0) {
      return &#39;刚刚&#39;;
    } else {
      return d_seconds + &#39;秒前&#39;;
    }
  } else if (d_days >= 3 && d_days < 30) {
    return M + &#39;-&#39; + D + &#39; &#39; + H + &#39;:&#39; + m;
  } else if (d_days >= 30) {
    return Y + &#39;-&#39; + M + &#39;-&#39; + D + &#39; &#39; + H + &#39;:&#39; + 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>

submitForm:function(e){
     var title = e.detail.value.title;
     ......
     success: function (res) {
         //将title值设置空
        that.setData({
            title: &#39;&#39;
         }
     }
}

6.微訊號,QQ號,手機號碼正規校驗

由於申請加入活動需要填寫真實姓名,聯絡方式等資訊,為了防止使用者隨意填寫資訊,必須對這些資訊進行校驗

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更新後會解決這個問題.