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
At this time, you can replace the code with this to get the value
WXML
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
{{noteNowLen}}/{{noteMaxLen}}
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 = '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; } }
JS
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: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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
