Preface

After nearly a month of development, our team finally developed the micro-program "Start Together" to complete the development, the current online version is 2.2.4-beta version.

This document mainly introduces the technology used in the development of the small program, and the solutions to the problems encountered in the development.

• Links to the original text (reprinted please indicate the source): Wechat applet: Let's go together

• Open source address

Brief Introduction to Small Procedures

"Let interest no longer be lonely, let hobbies no longer wander" is the theme of the Wechat small program "Start Together", which aims to solve the loneliness of contemporary college students in campus life, so that we can find like-minded friends, running, fitness, competitions and other activities to find partners. It will be an efficient, fast and affordable tool for offline friendship by combining the features of "out-of-the-box" and "out-of-the-box" with making friends.

This small program by bmob Back-end cloud provides data processing and storage support

Small program code

Summary of technical problems in development

1. Problems with using e.target.dataset

In the process of small program development, we often use attribute values of attributes in tags. We usually set data - *="{XXX}" in <view> and get XXX values in JS through e.target.dateset. *. But I often encounter undefined, console.log(e) to look at the output information and find that there are two objects in the e object: current Target and target, respectively. Sometimes the data is in the current Target.

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

• WXML

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

• JS

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

There is also a long-standing saying on the Internet that the problem of naming data - * Li * can be solved by removing hump naming.

2. How to display the number of real-time words 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,//Note Maximum Number of Words
    noteNowLen: 0,//Note Current Word Number
}

  //Word change trigger event
  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. Using JS to Realize Fuzzy Query

Because what we use is Bmob Data processing and storage support provided by the back-end cloud, according to the development documents provided by Bmob, the free version of the application can not be fuzzy query, see here, and look at the nearly completed active retrieval interface, feel indescribable. Just as I was about to give up, I suddenly came up with a method, that is, to store all the background data in the collection first, then match one by one according to the inputted retrieval value, and then I started to do it immediately. First, I looked up the javaScript document. String object has a method called indexOf(), which can return a specified string value to appear in the string for the first time. Location, which is done, traverses all the data, retrieves every character of each data, and if it appears, adds it to the collection of retrieval results.

• JS

//Implementing Fuzzy Matching Query with js
  findEach: function (e) {
    var that = this
    var strFind = that.data.wxSearchData.value; //The wxSearch search UI plug-in used here,
    if (strFind == null || strFind == "") {
      wx.showToast({
        title: 'Input empty',
        icon: 'loading',
      })
    }
    if (strFind != "") {
      var nPos;
      var resultPost = [];
      for (var i in smoodList) {
        var sTxt = smoodList[i].title || ''; //Title of the event
        nPos = sTxt.indexOf(strFind); 
        if (nPos >= 0) {//If the keyword entered appears in the activity title, the activity is matched
          resultPost.push(smoodList[i]); //Add this activity to the list of searched activities
        }
      }
      that.setData({
        moodList: resultPost
      })
    }
  },

For more detailed code, please go to Github See

4. Use JS to convert the time of the string format to a few seconds ago, a few minutes ago.

Because small programs involve comments, activities, collections and a series of functions including event time, while the time format stored in the database is 2017-11-3023:36:10. Now you want to display the difference between the current time and the specific time on the interface, i.e. a few seconds ago, a few minutes ago, and so on.

The main idea is to convert the time of a 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 and so on.

• JS

//Converting strings to timestamps
function getDateTimeStamp(dateStr) {
  return Date.parse(dateStr.replace(/-/gi, "/"));
}
//Formatting time
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();
  //Make up 0 in front of less than 10
  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 + 'Days ago';
  } 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 + 'Seconds ago';
    }
  } else if (d_days >= 3 && d_days < 30) {
    return M + '-' + D + ' ' + H + ':' + m;
  } else if (d_days >= 30) {
    return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
  }
}

5. Wechat widget submits form and clears form data

After publishing the activity, because the data in the form is not empty, the user's experience must be bad. However, the data interaction of the applet is not like html + jS, using dataSet({}) to assign the value, the view layer can move to the value through asynchronous way. So it is thought that after submitting the form, assigning the value to these inputs is empty, which achieves the effect of emptying the form, of course, and in the form. Not only does it contain input, but it can be done in this way.

• WXML

<form bindsubmit="submitForm">
    <text class="key">Activity name</text>
    <input name="title"  maxlength="100" value="{{title}}" />
    <button  formType="submit">Determine</button>
</form>

• JS

submitForm:function(e){
     var title = e.detail.value.title;
     ......
     success: function (res) {
         //Set the title value to null
        that.setData({
            title: ''
         }
     }
}

6. Microsignal, QQ Number, Regular Check of Mobile Phone Number

In order to prevent users from filling in information at will, it is necessary to verify the information because the real name, contact information and other information are needed to be filled in to apply for membership activities.

• JS

    var wxReg = new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$"); //Microsignal Regular Check
    var qqReg = new RegExp("[1-9][0-9]{4,}"); //QQ Number Regular Check
    var phReg = /^1[34578]\d{9}$/; //Regular Check of Mobile Phone Number
    var nameReg = new RegExp("^[\u4e00-\u9fa5]{2,4}$"); //2-4 Chinese Name Regularization

7. Use Bmob SDK to send template message successfully and generate small program two-dimensional code.

In the process of development, because we want to realize this function, how to inform the user when the user registers successfully, consult the development document of the applet, find an API to send template message, then query the development document of Bmob, and find that it is very useful to realize this function. Template message can only be sent successfully on the real machine, after configuration, important success, but there is a question in use. topic
That is, if the template message with page parameters will not be sent after the release of the widget, but it can be sent successfully in the development version. This problem has been feedback. It is estimated that this problem will be solved after the update of the SDK of the Bmob widget.

I will not write the specific code, bmob development documentation direct

• Send template messages
• Generating Small Program Two-Dimensional Code

Screenshots & GIF

Design of table structure of Bmob database

User table: (_User, self-contained table)

|--objectId //Id
|--userPic(String) //User head
|--username(String) //User name
|--password(String) //Password
|--nickname(String) //Nickname?
|--sex(Number) //Gender
|--userData(Object) //User data of Weichat login
|--eventJoin(Array) //Participated activities Id array Array
|--eventFavo(Array) //Collection of active Id arrays Array
|--feednum(Number) //Feedback times

Activity Information Table: (Events)

| - objectId // Activity Id
 | - publisher (Pointer - > User) // sponsor
 | title(String) // Activity Theme
 | - content(String) // Activity Content
 | actpic(File)// Activity Promotional Photos
 | - acttype(String) // activity category
{
    1: Sports, 2: Games, 3: Friends,
    4: Travel, 5: Reading, 6: Competition,
    7: Movies, 8: Music, 9: Others
}
| Is it Show (Number) // Open on Home Page
 | - endtime(String) // Team deadline
 | - address(String) // Place of Activity
 | - latitude(Number) // address latitude
 | - longitude(Number) // longitude of address
 | - peoplenum(String)// population limit
 | -- likenum(Number) // Point Ratio
 | -- liker(Array) // point compliment Id set
 | Comment num (Number) // Number of comments
 | - Join number (Number)// Number of participants now
 | - Join Array (Array)// The current gathering of participants

Activity Information Extension Table: (EventMore)

|--objectId //Activity Information Extension Table Id
|--event(Pointer-->Events) //activity
|--Status(Number) //Activity status, (1: in preparation, 2: in progress, 3: over)
|--Statusname(String) //Active status name
|--qrcode(File) //Active Group Chat Two-Dimensional Code

Comments

|--objectId //Comment Id
|--publisher(Pointer-->_User) //Comment Publisher
|--olderUsername(String) //Last commentator nickname
|--olderComment(Pointer-->Comments) //Last comment
|--event(Pointer-->Events) //Commentary activities
|--content(String)  //Comment content

A compliment: (Likes)

|--objectId //Id
|--liker(Pointer-->_User) //Praise people
|--event(Pointer-->Events) //Praise campaign

Collection Table: (Favos)

|--objectId //Id collection
|--favor(Pointer-->_User)  //Collectors
|--event(Pointer-->Events) //Collection activities

Message notification form: (Plyre)

| - objectId // Message Notification Id
 | - fid(String) // Id (ID of the person praised or cancelled, or ID of the person responded or commented) (person notified)
| - UID (Pointer - > User) // Message Notifier
 | wid (String) // Be praised, or cancel praise, be commented on, or be answered, join, cancel the activity id of join
 | - avatar (String) // The avatar of the informer
 | - username (String) // Name of Message Notifier
 | is_read(Number) // Has this message been read (1 for read, 0 for unread)
| bigtype(Number) // Message Notification Category (1 for Message, 2 for Notification)
| - behavior(Number) //(message reminder type)
{
    1: praise
    2: Cancel Zambia
    3: Be commented on
    4: Responded
    5: Join the Activities
    6: Cancel Joining Activities
    7: Modified Join Information
}

Activity Contact Table: (Contact)

|--objectId //Contact list Id
|--publisher(Pointer-->_User)  //Activity Publisher
|--currentUser (Pointer-->_User) //Current user
|--event(Pointer-->Events)  //Activities you want to join
|--realname (String) //Real name
|--contactWay(String) //Contact information (micro-signal, mobile phone number, QQ number)
|--contactValue(String) //Contact number

Feedback table: (Feedback)

|--objectId //Feedback Id
|--feedUser(Pointer-->_User) //Feedback Id
|--title(String) //Feedback heading
|--content(String) //Feedback content
|--feedpic(File) //Feedback pictures
|--feedinfo(String) //Feedback of User's Equipment Information     

Thank you for the following open source projects, website communities

• Bmob Backend Cloud
• Wechat Small Procedure Alliance
• WeUI for applet
• The UI Library for Small Programs
• Wechat widget custom component (dialog box, indicator, five-star rating...)
• Elegant Search Box for Wechat applet
• We post
• QQ left sliding deletion operation
• Simulate QQ6.0 Side Slide Menu
• Watch the hall

.....