preface

After nearly a month of development, our team developed the micro channel small program “Let’s go together” was finally completed, and the online version is now 2.2.4-beta version

This document mainly introduces the small program in the development of the technology used, has been in the development of the problem to take the solution

  • Wechat small program: let’s go together
  • Open Source address (❤ Welcome star❤)

Applets introduction

“Let your interests no longer feel lonely, let your hobbies no longer stray” is the theme of wechat mini program “Let’s Go Together”, which aims to solve the loneliness of contemporary college students in campus life, let them find like-minded friends, and find partners in running, fitness, competition and other activities. It will be an efficient, fast, no-burden offline dating tool by using the small program that is ready to use and go with the characteristics of making friends

This small program is supported by BMOB back-end cloud to provide data processing and storage

Small program code


Summary of technical problems in development

1. The e.target.dataset is faulty


set data-*=”{{XXX}}” and then pass e.target.dateset.* in JS Console. log(e) contains currentTarget and target, and sometimes the data is in currentTarget.

At this point, you can replace the code with something like this to get the value

  • WXML
<view bindtap="bintap" data-id="1"></view> 
Copy the code
  • JS
bintap:function(e){
    var id = e.currentTarget.dataset.id;
}
Copy the code

There has always been a name problem in data-*, remove the camel name, pure lowercase can also be solved

2. How does the small program Textarea text box display real-time words

  • WXML
<view> <view> <textarea name="content" bindinput="bindTextAreaChange" maxlength="{{noteMaxLen}}" /> <view class="chnumber">{{noteNowLen}}/{{noteMaxLen}}</view> </view> </view>
Copy the code
  • JS
Data :{noteMaxLen: 200,// Note the maximum number of words noteNowLen: 0,// Note the current number of words} // Change the number of words triggered events 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 }) },Copy the code

3. Use JS to achieve fuzzy query

Since we use the data processing and storage support provided by the Bmob back-end cloud, according to the development document provided by Bmob, the free version of the application cannot perform fuzzy query. When you look at here and look at the activity retrieval interface that is almost completed, you feel indescribable. When I was ready to give up, I suddenly came up with a method, that is, first store all the background data into the set, and then match them one by one according to the input retrieval values. After thinking of this, I immediately started to work. A String object has a method called indexOf(), which returns the first occurrence of a specified String value in the String. This is done by iterating through all data, retrieving each character of each piece of data, and adding it to the collection of retrieved results if present.

  • JS
/ / js to realize fuzzy matching query findEach: function (e) {var that. = this var strFind = that data. WxSearchData. Value; / / used here wxSearch search UI plug-in, the if (strFind = = null | | strFind = = "") {wx. ShowToast ({title: 'input is null, the icon: 'loading', }) } if (strFind ! = "") { var nPos; var resultPost = []; for (var i in smoodList) { var sTxt = smoodList[i].title || ''; // Active title nPos = stxt.indexof (strFind); Resultpost.push (smoodList[I]); if (nPos >= 0) {// If the entered keyword appears in the activity title, match the activity resultPost.push(smoodList[I]); }} that.setData({moodList: resultPost})}},Copy the code

For more details on the code, go to Github

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

Because the small program involves comments, join activities, favorites and a series of functions including the event time, and the time format stored in the database for 2017-11-30 23:36:10 now want to not show the specific time on the interface, but show the difference with the current time, that is, a few seconds ago, a few minutes ago and so on

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

  • JS
Function getDateTimeStamp(dateStr) {return date.parse (datestr.replace (/-/gi, "/")); 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(); 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 + 'd_days '; } else if (d_days <= 0 && d_hours > 0) {return d_hours + 'hours ago '; } else if (d_hours <= 0 &&d_minutes > 0) {return d_minutes + 'minutes ago '; } else if (d_seconds < 60) {if (d_seconds <= 0) {return 'just '; } else {return d_seconds + 'before '; } } else if (d_days >= 3 && d_days < 30) { return M + '-' + D + ' ' + H + ':' + m; } else if (d_days >= 30) { return Y + '-' + M + '-' + D + ' ' + H + ':' + m; }}Copy the code

5. Wechat mini program submits forms to clear form data

After the release of the activity, the user must have a bad experience because the data in the form is not cleared. However, the data interaction of the applets is not like that of HTML + jS, which uses the dataSet({}). So the view layer is able to move the values asynchronously, and we thought, after submitting the form, we could empty the form by assigning all the inputs to be null. Of course, the form doesn’t contain only the inputs, but we could do that

  • WXML
<form bindsubmit="submitForm"> <text class="key"> </text> <input name="title" maxLength ="100" value="{{title}}" /> <button formType="submit">Copy the code
  • JS
submitForm:function(e){ var title = e.detail.value.title; . Function (res) {setData({title: ''}}})Copy the code

6. Regular verification of wechat,QQ and mobile phone numbers

Because the application for joining the activity needs to fill in the real name, contact information and other information, in order to prevent users randomly fill in the information, it is necessary to verify these information

  • JS
Var wxReg = new RegExp (" ^ [a zA - Z] ([- _a - zA - Z0-9] {5} 3) + $"); / / WeChat ID regular check var qqReg = new RegExp (" [1-9] [0-9] {4} "); Var phReg = /^1[34578]\d{9}$/; Var nameReg = new RegExp("^[u4e00-\u9fa5]{2,4}$"); //2-4 digits of Chinese nameCopy the code

7. Use Bmob SDK to send template message and generate small program QR code after successful registration

In the development process, because I want to realize how to notify users after successful registration, I looked up the development document of the small program and found that there is an API for sending template messages. Then I queried the development document of Bmob and found that this function was realized, which is really useful. Template message can only be sent successfully on the realtor, after configuration, it is important to succeed, but there is a problem in use, that is, after the release of the small program template message with page parameter will not be sent, but in the development version can be sent successfully, This problem has been fed back, and it is estimated that this problem will be solved after the UPDATE of Bmob small program SDK.

I won’t write the specific code, bMob development document direct

  • Sending template Messages
  • Generate a small program qr code

Screenshot & GIF







Bmob database table structure design

User table :(_User, built-in table)

| | - objectId / / Id - userPic (String) / / avatars | - username (String) / / user name | - password (String) / / password | - nickname (String) / / nickname / / gender | | - sex (Number) - the userData (Object) / / | - eventJoin WeChat login user data Array (Array) participate in the activities of the / / Id Array | - eventFavo (Array)/Id/collection activity An Array of Array | - feednum (Number) / / feedbackCopy the code

Activity information sheet :(Events)

| | - objectId / / activity Id - publisher (Pointer -- > _User) / / promoter | - the title (String) / / | activity theme - the content (String) / / content | - actpic (File) / / activity promotional photos | - acttype (String) {/ / activity category 1: sports, 2: games, 3: dating, 4: travel, 5: reading, 6: race, 7: movies, 8: music, 9: Other} | - isShow (Number) / / | publicly displayed on the front page - endtime team deadline | - (String) / / address (String) / / venue | - latitude latitude (Number) / / address | - longitude (Number) / / address longitude | - peoplenum (String) / / limited | - likenum Number (Number) / / thumb up | - liker (Array) / / thumb up Id set | - commentnum (Number) / / comments | - joinnumber (Number) / / now to participate in the Number of | - joinArray (Array) / / now for collectionCopy the code

Event information extension table :(EventMore)

| | - objectId / / activity information extension table Id - event (Pointer -- > Events) / / activity | - Status (Number) / / active state, (1: preparation, 2: on, 3: the end) | - Statusname (String) / / active name | - qrcode group chat qr code (File) / / activitiesCopy the code

Comment form :(Comments)

| | - objectId / / comment Id - publisher (Pointer -- > _User) / / comment on the publisher | - olderUsername (String) / / comment in a nickname | - olderComment (Pointer -- > Comments) / / on a comment | - event (Pointer -- > Events) / / comment on the activities of the | - content (String) / / commentCopy the code

(Likes)

| | - objectId / / thumb up Id - liker (Pointer -- > _User) / / thumb up | - event (Pointer -- > Events) / / thumb up activitiesCopy the code

Collection table: (Favos)

| | - objectId / / collection of Id - favor (Pointer -- > _User) / / collectors | - event (Pointer -- > Events) / / collection activitiesCopy the code

Message notification table :(Plyre)

Id | | - objectId / / notifications - fid (String) / / publisher Id (praise or praise is cancelled person Id, or reply, the comment Id) (informed) | - uid (Pointer -- > _User) / / alerts | - wid (String) / / be praise, or cancel the praise, comments, or reply, join in, Cancel to join the activity id | - avatar (String) / / information to the head of people | - username name (String) / / notifications | - is_read (Number) / / whether or not the message has been read (1 represents has read, 0 (unread) | -- - bigtype categories (Number) / / notifications (1 on behalf of the message, 2 representative notification) | - behaviors (Number) / / (type) alerted to {1: assist 2: cancel 3: praise be comment 4: reply by 5:6: join the activity Cancel Join activity 7: Modify join information}Copy the code

Activity Contact List:

| | - objectId / / contact list Id - publisher (Pointer -- > _User)/activities/publisher | - currentUser (Pointer -- > _User) / / the current user | - event (Pointer -- > Events) / / want to join the activities of the | - realname (String) / / real name | - contactWay (String) / / contact (WeChat ID, phone number, QQ number) | - contactValue (String) / / contact numberCopy the code

Feedback: (Feedback)

| | - objectId / / feedback Id - feedUser (Pointer -- > _User) / / feedback Id | - the title title (String) / / feedback | - content (String) / / feedback | - feedpic (File)/images/feedback | - feedinfo (String) / / feedback device information of usersCopy the code

Thanks to the following open source project, website community

  • Bmob back-end cloud
  • Wechat Small program Alliance
  • WeUI for applets
  • Like small program UI library
  • Wechat mini program custom components (dialog box, indicator, five-star rating…)
  • Wechat applets elegant search box
  • We cyit
  • QQ swipe left delete operation
  • Imitate QQ6.0 sideslip menu
  • Watchman hin

Dmego



Links:Juejin. Cn/post / 684490…



Statement: this article comes from the network, copyright belongs to the author, does not represent my views, any questions please contact me, thank you!