“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

In the last article, we completed the small program “like” and “share” function, this time we will implement the relatively complex comment function.

Page development

First, as usual, we start from the page dimension, with the page elements and interactions related to the comments, to guide the logic behind them.

Comment icon

Since there may be a lot of comment content, we put the actual comment interaction on the content details page, so clicking the icon here only needs to jump to the details page. Similarly, we cannot directly implement the jump logic of the detail page in the content item component, because the content detail page also uses the content item component, so we implement the comment click response here as abstract processing, send the action to the component user, and then implement the specific jump in the list component.

handleComment() {
  const { item } = this.properties
  this.triggerEvent('clickComment', { id: item._id })
},
Copy the code

In the list component, since clicking on the content item and clicking on the comment icon currently have exactly the same response, we separate the jump into a method

jumpDetailWithId(id) {
  wx.navigateTo({
    url: `/pages/detail/index? id=${id}`,}}),handleClickItem(e) {
  const { detail: { id } } = e
  if (id) {
    this.jumpDetailWithId(id)
  }
},
handleClickComment(e) {
  const { detail: { id } } = e
  if (id) {
    this.jumpDetailWithId(id)
  }
}
Copy the code

Comment input box

The comment input box is a relatively independent feature, so we can make it a custom component so that its implementation details can be encapsulated inside the component and then interact with the caller through the properties and methods exposed by the component.

<view class="{{ focusing ? 'reply-wrap focus-wrap' : 'reply-wrap' }}">
  <view class="user-avatar">
    <open-data type="userAvatarUrl"></open-data>
  </view>
  <view class="{{ focusing ? 'input-block focus-block' : 'input-block' }}">
    <textarea
      placeholder="{{placeText}}"
      placeholder-style="color: #999; font-size: 28rpx;"
      bindfocus="onFocus"
      bindblur="onBlur"
      bindlinechange="onLineChange"
      class="{{ focusing ? 'focus-area' : 'default-area' }}"
      auto-height
      cursor-spacing="{{cursorSpacing}}"
      confirm-type="send"
      bindconfirm="onConfirm"
      show-confirm-bar="{{false}}"
    ></textarea>
  </view>
</view>
Copy the code

Here we use the small program Textarea component as the comment input box. This component is a native component, so there are many problems to be paid attention to when using it. For example, it is best to use the real machine debugging function of the developer tool to check the display effect of this component on the real machine when debugging related styles.

Comment on storage

So once we have a component for entering comments on the side of the page, we need to store the comments into the content object, and here we continue to use the cloud function to update the content and pass in the comment field.

On the cloud function side, we store the resolved comment content into the content object together with the current user information and comment time.

The acquisition of user information is similar to “like”. We need to determine whether the user has authorized his/her avatar and nickname. This part of logic has been used repeatedly, so we can encapsulate its implementation logic as a public method

Public methods just need to be introduced where they are used, as shown below

In addition, we need the ID of the content to be commented to be passed through the component property and passed as a parameter when the comment is submitted.

The data structure

Finally, for content with comments, the data structure is shown below

In this way, we can read the content and at the same time, parse whether it has relevant comment content, if so, display it.

Comments show

The comment list is a relatively independent piece of content, so we can also create a custom component to handle the presentation of the comment list.

In terms of layout, it is similar to content lists, so we can refer to the layout and style of content lists.

Time formatting

In addition, for the presentation of comment times, we also create a method in the public method to format the timestamp as time information, since the database stores the timestamp format and the presentation to the user should be formatted.

The implementation logic is as follows

const formatDate = timestamp= > {
  const now = Date.now()
  const gap = now - timestamp
  const gapDay = parseInt(gap / (24 * 60 * 60 * 1000))
  if (gapDay > 0) {
    return `${gapDay}Days ago `
  } else {
    const gapHour = parseInt(gap / (60 * 60 * 1000))
    if (gapHour > 0) {
      return `${gapHour}Hours before `
    } else {
      const gapMin = parseInt(gap / (60 * 1000))
      if (gapMin > 0) {
        return `${gapMin}Minutes ago `
      } else {
        return 'just'}}}}Copy the code

The logic here is to subtract the current time from the time when the comment occurred, and then calculate whether the time difference is more than 1 day. If it is more than 1 day, display N days ago. Otherwise, continue to judge whether the time is longer than 1 hour. If the time is longer than 1 hour and less than 1 day, display N hours ago. Check whether the time is longer than 1 minute. If the time is longer than 1 minute and less than 1 day, display N minutes ago. If less than one minute, just is displayed.

Comments on the update

Finally, after the comment is sent successfully, we do the follow-up interactive optimization, appropriately prompt the operation success, and trigger the content refresh of the details page.

conclusion

In this article, we completed the most basic comment function of the small program. Although the specific details are still to be optimized, combined with the function of “like” and “share” in the previous part, we collected three modules of “like”, “comment” and “share”, which added more interactivity to the social attributes of our small program.

As a result, the complexity of our applet has risen to a new level, including cloud function logic, data structure, component logic and page interaction.

This creates quite a challenge for subsequent functional upgrades or optimizations, which explains why we do things like code management, version control, split components, and common methods. Because a project is bound to be complex, only in the early stage to do a good job in all aspects of management and infrastructure construction, and then on this basis of the subsequent iteration of upgrading will not happen “affecting the whole” situation.