Zusammenfassung der Probleme, die bei der WeChat-Applet-Entwicklung aufgetreten sind

Die Entwicklung des WeChat-Miniprogramms ist abgeschlossen und natürlich sind viele Probleme aufgetreten. In diesem Artikel teilen wir Ihnen hauptsächlich eine Zusammenfassung der Probleme mit, die bei der Entwicklung des WeChat-Miniprogramms aufgetreten sind, in der Hoffnung, mehr zu helfen WeChat-Entwickler.

Einführung in das Miniprogramm

„Lass deine Interessen nicht länger einsam sein und lass deine Hobbys nicht länger wandern“ ist das Thema des WeChat-Miniprogramms „Let's Go Together“ Dieses Miniprogramm zielt darauf ab, die Einsamkeit, die heutige College-Studenten im Campusleben empfinden, zu lösen und es jedem zu ermöglichen, gleichgesinnte Freunde und Partner bei Aktivitäten wie Laufen, Fitness und Wettkämpfen zu finden. Durch die Kombination der sofort nutzbaren und benutzerfreundlichen Funktionen des Miniprogramms mit dem Finden von Freunden wird es zu einem effizienten, schnellen und unkomplizierten Offline-Dating-Tool.

Dieses Miniprogramm wird von bmob back bereitgestellt -End-Cloud-Datenverarbeitungs- und Speicherunterstützung

Miniprogrammcode

Zusammenfassung der technischen Probleme in der Entwicklung

Die Entstehung der Verwendung e.target.dataset-Problem

Während der Entwicklung kleiner Programme verwenden wir häufig die Attributwerte von Attributen in Tags. Normalerweise setzen wir data-*="{{XXX}}" in < ;view> und dann verwende ich in JS e.target.dateset.*, um den XXX-Wert zu erhalten, aber ich stoße oft auf undefiniert. Verwenden Sie console.log(e), um die Ausgabeinformationen zu überprüfen, und Sie werden feststellen, dass das e-Objekt zwei enthält Objekte, nämlich currentTarget und target , und manchmal befinden sich die Daten in currentTarget,

Zu diesem Zeitpunkt können Sie den Code durch diesen ersetzen, um den Wert zu erhalten

WXML

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

JS

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

Es gibt auch ein Sprichwort im Internet, dass das Problem der Benennung von * in Daten-* durch Entfernen der Kamel-Kasten-Benennung und reinen Kleinbuchstaben gelöst werden kann

2. So zeigen Sie die Echtzeit-Wortanzahl im Textfeld des Miniprogramm-Textbereichs an

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. Verwenden Sie JS, um Fuzzy-Abfragen zu implementieren

Da wir die Datenverarbeitungs- und Speicherunterstützung der Bmob-Back-End-Cloud nutzen, kann die kostenlose Version der Anwendung laut den von Bmob bereitgestellten Entwicklungsdokumenten keine Fuzzy-Abfragen durchführen An der fast fertigen Benutzeroberfläche zum Abrufen von Aktivitäten fühle ich mich unbeschreiblich. Gerade als ich aufgeben wollte, fiel mir plötzlich eine Methode ein, die darin besteht, zunächst alle Hintergrunddaten in einer Sammlung zu speichern und sie dann einzeln entsprechend dem eingegebenen Suchwert abzugleichen. Nachdem ich darüber nachgedacht hatte, begann ich Um sofort zu funktionieren, habe ich das JavaScript-Objekt überprüft. Es gibt eine Methode namens indexOf(), die die Position zurückgeben kann, an der ein bestimmter Zeichenfolgenwert zuerst in der Zeichenfolge erscheint. Auf diese Weise werden alle Daten durchlaufen und abgerufen Wenn es angezeigt wird, fügen Sie es der Sammlung von Suchergebnissen hinzu.

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
      })
    }
  },

Detaillierteren Code finden Sie auf Github.

4. Verwenden Sie JS, um die Zeichenfolge zu formatieren. Die Zeit wird in Sekunden, Minuten umgewandelt...

Da das Miniprogramm eine Reihe von Funktionen umfasst, darunter Kommentieren, Beitrittsaktivitäten, Sammlungen usw Ereigniszeit, das in der Datenbank gespeicherte Zeitformat ist 2017-11-30 23:36:10 Jetzt möchte ich nicht die spezifische Zeit auf der Schnittstelle anzeigen, sondern die Differenz zur aktuellen Zeit, also ein paar Sekunden vor, vor ein paar Minuten usw.

Die Implementierung ist nicht kompliziert. Die Hauptidee besteht darin, zuerst die Zeit der Zeichenfolge in einen Zeitstempel umzuwandeln und sie dann mit dem aktuellen Zeitstempel zu vergleichen kann in „vor Sekunden“, „vor Minuten“, „vor Stunden“, „vor Tagen“ usw. umgerechnet werden.

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 = &#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. Das WeChat-Applet-Übermittlungsformular löscht Formulardaten

Danach Beim Veröffentlichen des Ereignisses muss die Benutzererfahrung schlecht sein, da die Daten im Formular nicht gelöscht werden. Die Dateninteraktion des Miniprogramms ähnelt jedoch nicht der Verwendung von dataSet({}) zum Zuweisen von Werten, der Ansichtsebene Die Werte können asynchron aktiviert werden, daher dachte ich, dass nach dem Absenden des Formulars allen diesen Eingaben leere Werte zugewiesen werden sollten. Auf diese Weise wird der Effekt des Löschens des Formulars natürlich nicht erreicht enthalten Eingaben, aber der Clearing-Effekt kann auf diese Weise erreicht werden

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. Regelmäßige Überprüfung der WeChat-ID, QQ-Nummer, und Mobiltelefonnummer

Da bei der Bewerbung um die Teilnahme an der Veranstaltung die Eingabe des echten Namens, der Kontaktinformationen und anderer Informationen erforderlich ist, müssen diese Informationen überprüft werden, um zu verhindern, dass Benutzer nach Belieben Informationen eingeben.

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. Verwenden Sie das Bmob SDK, um eine erfolgreiche Registrierung zu realisieren, Vorlagennachrichten zu senden, Miniprogramm-QR-Codes zu generieren usw.

Während des Entwicklungsprozesses, weil ich es möchte Ich habe die Entwicklungsdokumentation des Miniprogramms überprüft und festgestellt, dass es eine API zum Senden von Vorlagennachrichten gibt. Dann habe ich die Entwicklungsdokumentation von Bmob überprüft und festgestellt, dass diese Funktion implementiert wurde. Das ist wirklich nützlich. Vorlagennachrichten können nur erfolgreich auf einer echten Maschine gesendet werden. Allerdings gibt es bei der Verwendung
ein Problem, wenn die Vorlage freigegeben wird Die Nachricht enthält den Seitenparameter. Die Version kann jedoch nicht erfolgreich gesendet werden. Es wird davon ausgegangen, dass dieses Problem nach der Aktualisierung des Bmob-Miniprogramms behoben wird

Eine WeChat-Miniprogrammversion Zhihu-Beispielfreigabe

Lösungen und Methoden zur Komponentisierung von WeChat-Miniprogrammen

WeChat Mini Program Version 2048 Minispiel

Das obige ist der detaillierte Inhalt vonZusammenfassung der Probleme, die bei der WeChat-Applet-Entwicklung aufgetreten sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!