Résumé des problèmes rencontrés lors du développement du mini-programme WeChat

Le développement du mini programme WeChat est terminé, et naturellement de nombreux problèmes ont été rencontrés. Dans cet article, nous partageons principalement avec vous un résumé des problèmes rencontrés dans le développement du mini programme WeChat, en espérant vous aider davantage. Développeurs WeChat.

Introduction au mini programme

"Laissez vos intérêts ne plus être seuls et ne laissez plus vos passe-temps vagabonder" est le thème du mini programme WeChat "Allons ensemble" Ce mini-programme vise à résoudre la solitude que ressentent les étudiants contemporains dans la vie sur le campus, permettant à chacun de trouver des amis et des partenaires partageant les mêmes idées dans des activités telles que la course, le fitness et les compétitions. En combinant les fonctionnalités instantanées et faciles à utiliser du mini programme avec le fait de se faire des amis, ce sera un outil de rencontre hors ligne efficace, rapide et sans fardeau

Ce mini programme est fourni par bmob back -end cloud Prise en charge du traitement et du stockage des données

Code du mini programme

Résumé des problèmes techniques en développement

1. e.target.dataset Problème

Lors du développement de petits programmes, nous utilisons souvent les valeurs d'attribut des attributs dans les balises. Nous définissons généralement data-*="{{XXX}}" dans <. ;view> puis dans JS, j'utilise e.target.dateset.* pour obtenir la valeur XXX, mais je rencontre souvent undefined. Utilisez console.log(e) pour vérifier les informations de sortie et vous constaterez que l'objet e en contient deux. objets, à savoir currentTarget et target. , et parfois les données sont dans currentTarget,

À ce stade, vous pouvez remplacer le code par this pour obtenir la valeur

WXML

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

JS

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

Il y a aussi un dicton sur Internet selon lequel le problème de la dénomination * dans les données-* peut être résolu en supprimant la dénomination en casse chameau et les minuscules pures

2. Comment afficher le nombre de mots en temps réel dans la zone de texte de la zone de texte du mini programme

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

Utilisez JS pour implémenter une requête floue.

Étant donné que nous utilisons le support de traitement et de stockage des données fourni par le cloud back-end de Bmob, selon les documents de développement fournis par Bmob, la version gratuite de l'application ne peut pas effectuer de requêtes floues en voyant cela, puis en regardant. à l'interface de récupération d'activité presque terminée, je me sens indescriptible. Juste au moment où j'étais sur le point d'abandonner, j'ai soudainement pensé à une méthode qui consiste à sauvegarder d'abord toutes les données d'arrière-plan d'une collection, puis à les faire correspondre une par une en fonction de la valeur de recherche saisie. Après y avoir réfléchi, j'ai commencé. pour fonctionner immédiatement. J'ai d'abord vérifié le document javaScript, l'objet String a une méthode appelée indexOf(), qui peut renvoyer la position où une valeur de chaîne spécifiée apparaît pour la première fois dans la chaîne. caractère de chaque élément de données. S'il apparaît, ajoutez-le ensuite à la collection de résultats de recherche.

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

Pour un code plus détaillé, veuillez vous rendre sur Github pour voir

4. Utilisez JS pour formater la chaîne. L'heure est convertie en il y a quelques secondes, il y a quelques minutes...

Étant donné que le mini programme implique une série de fonctions, notamment commenter, rejoindre des activités, des collections, etc. heure de l'événement, le format de l'heure stocké dans la base de données est 2017- 11-30 23:36:10 Maintenant, je souhaite ne pas afficher l'heure spécifique sur l'interface, mais afficher la différence par rapport à l'heure actuelle, c'est-à-dire quelques secondes il y a quelques minutes, etc.

Ce n'est pas compliqué à mettre en œuvre. L'idée principale est d'abord de convertir l'heure de la chaîne en un horodatage, puis de la comparer avec l'horodatage actuel, pour qu'elle soit obtenue. peut être converti en il y a quelques secondes, il y a quelques minutes, il y a des heures, il y a des jours, etc.

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. Le formulaire de soumission de l'applet WeChat efface les données du formulaire

Après. En publiant l'événement, puisque les données du formulaire ne sont pas effacées, l'expérience utilisateur doit être mauvaise. Cependant, l'interaction des données du mini-programme n'est pas comme html + jS. L'utilisation de dataSet({}) pour attribuer des valeurs, la couche de vue. peut activer les valeurs de manière asynchrone, j'ai donc pensé qu'après avoir soumis le formulaire, toutes ces entrées devraient se voir attribuer des valeurs vides, de cette façon, l'effet d'effacement du formulaire est obtenu. Bien sûr, le formulaire ne le fait pas seulement. contient une entrée, mais l'effet de compensation peut être obtenu de cette manière

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. Vérification régulière de l'identifiant WeChat, du numéro QQ, et numéro de téléphone portable

Étant donné que postuler pour rejoindre l'événement nécessite de renseigner son vrai nom, ses coordonnées et d'autres informations, afin d'empêcher les utilisateurs de remplir des informations à volonté, ces informations doivent être vérifiées Vérifier

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. Utilisez le SDK Bmob pour réussir votre inscription, envoyer des modèles de messages, générer des codes QR de mini-programme, etc.

Pendant le processus de développement, car je souhaite comprendre comment avertir l'utilisateur lorsque l'utilisateur s'enregistre avec succès. J'ai vérifié la documentation de développement du mini-programme et j'ai découvert qu'il existe une API pour envoyer des messages modèles. Ensuite, j'ai vérifié la documentation de développement de Bmob et j'ai constaté que cette fonction avait été implémentée. C'est vraiment utile. Les messages modèles ne peuvent être envoyés avec succès que sur une vraie machine. Après la configuration, la clé est réussie. Cependant, il y a un problème lors de l'utilisation
, c'est-à-dire après la sortie du mini programme, si le modèle est utilisé. Le message contient le paramètre de page, il ne sera pas envoyé. Cependant, pendant le développement, la version peut être envoyée avec succès. Ce problème a été signalé. On estime que ce problème sera résolu après la mise à jour du SDK du mini programme Bmob.

Recommandations associées :

Une version du mini programme WeChat Zhihu Partage d'exemples

Solutions et méthodes de composition des mini-programmes WeChat

Mini-jeu du programme WeChat Mini version 2048

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!