Summary of problems encountered in WeChat applet development

The development of the WeChat mini program has been completed, and naturally we have encountered many problems. In this article, we mainly share with you a summary of the problems encountered in the development of the WeChat mini program, hoping to help more WeChat developers.

Introduction to the mini program

"Let your interests no longer be lonely, let your hobbies no longer wander" is the theme of the WeChat mini program "Let's Go Together". This mini program aims to solve The loneliness of contemporary college students in campus life allows everyone to find like-minded friends and partners in activities such as running, fitness, and competitions. By combining the instant-use and easy-to-use features of the mini program with making friends, it will be an efficient, fast, and burden-free offline dating tool

This mini program is provided by bmob back-end cloud Data processing and storage support

Small program code

Summary of technical issues in development

1. The emergence of using e.target.dataset Question

In the process of developing small programs, we often use the attribute values ​​​​of attributes in tags. We usually set data-*="{{XXX}}" in and then in JS I use e.target.dateset.* to get the XXX value, but I often encounter undefined. Use console.log(e) to check the output information and you will find that the e object contains two objects, namely currentTarget and target. , and sometimes the data is in currentTarget,

At this time, you can replace the code with this to get the value

WXML

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

JS

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

Online There is also a saying that the naming problem of * in data-* can be solved by removing the camel case naming and using pure lower case

2. How to display the real-time word count in the textarea text box of the applet

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. Use JS to implement fuzzy query

Since we are using the data processing and storage support provided by Bmob back-end cloud, according to the development documents provided by Bmob, The free version of the application cannot perform fuzzy queries. Seeing this, and then looking at the almost completed activity search interface, I feel indescribable. Just when I was about to give up, I suddenly thought of a method, which is to first save all the background data into a collection, and then match it one by one according to the entered search value. After thinking about it, I started to work immediately. I checked the javaScript first. Document, String object has a method called indexOf(), which can return the position where a specified string value first appears in the string. In this way, it traverses all the data and retrieves each character of each piece of data. If it appears If so, add it to the collection of search results.

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

For more detailed code, please go to Github to view

4. Use JS to format the time in the string Convert to seconds ago, minutes ago...

Since the mini program involves a series of functions including commenting, joining activities, collections, etc. including event time, the time format stored in the database is 2017-11- 30 23:36:10 Now I want to not display the specific time on the interface, but to display the difference from the current time, that is, a few seconds ago, a few minutes ago, etc.

It is not complicated to implement, the main idea It is to first convert the time of the string into a timestamp, and then compare it with the current timestamp, so that it can be converted into a few seconds ago, a few minutes ago, a few hours ago, a few days ago, etc.

JavaScript Interaction is not like html + jS. Use dataSet({}) to assign values. The view layer can activate the values ​​​​in an asynchronous manner. So I thought that after submitting the form, assign the values ​​​​to these inputs to be empty, and that will be achieved. In order to clear the form, of course, the form does not only contain input, but the clearing effect can be achieved in this way

WXML

//字符串转换为时间戳 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;
  }
}

JS

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

6. Micro Signal, QQ number, mobile phone number regular verification

Since applying to join the event requires filling in real name, contact information and other information, in order to prevent users from filling in information at will, this information must be verified

JS

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

7. Use Bmob SDK to realize successful registration, send template messages, generate mini program QR codes, etc.

During the development process, because of what you want to achieve, what happens when the user successfully registers? Notify the user, after checking the development documentation of the mini program, I found that there is an API for sending template messages. Then I checked the development documentation of Bmob and found that this function has been implemented. This is really useful. Template messages can only be sent successfully on a real machine. After configuration, the key is successful, but there is a problem during use

, that is, after the mini program is released, if the template message contains the page parameter, it will not be sent, but it can be sent successfully in the development version. This problem has been reported Yes, it is estimated that this problem will be solved after the Bmob mini program SDK is updated.

Related recommendations:

A WeChat mini program version of Zhihu example sharing

Solutions and methods of componentizing WeChat mini programs

WeChat Mini Program Version 2048 Mini Game

The above is the detailed content of Summary of problems encountered in WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!