WeChat applet comment / message function, attached: front end + backend code + video explanation!

前界面:

clipboard.png

展示:

图片描述

<!-- Form -->
<form bindsubmit="formSubmit">
<input type="text" name="liuyantext" placeholder='Enter message content' class="input-style"/>
<button formType="submit" class="btn" wx:if="{{nickName == empty}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" bindtap='login'>authorized login</button>
<button formType="submit" class="btn" wx:else>message</button>
<input type="text" name="nickname" value='{{nickName}}' style="display:none;"/>
<input type="text" name="headimg" value='{{avatarUrl}}' style="display:none;"/>
</form>

<view wx:for="{{re}}" wx:key="re">
  <view class="result">{{item.result}}</view>
</view>
<view style="text-align:center;font-size:14px;color:#ccc;margin-top:20px;">The following is the message content</view>
<view wx:for="{{liuyanlist}}" wx:key="liuyanlist" class="liuyanview">
  <view class="headimg"><image src="{{item.headimg}}"></image></view>
  <view class="nickname_liuyantext">
    <view class="nickname">{{item.nickname}} <view class="time">{{item.lytime}}</view></view>
    <view class="text">{{item.liuyantext}}</view>
  </view>
  <!-- placeholder -->
  <view style="width:100%;height:10px;"></view>
</view>
//index.js
/ / Get the application instance
Const app = getApp()
Page({
  /**
   * Initial data of the page
   */
  Data: {
    
  },

  / / Authorized login
  Login: function () {
    Var that = this;
    // Check if it is authorized
    wx.getSetting({
      Success(res) {
        If (res.authSetting['scope.userInfo']) {
          // Authorized, you can call getUserInfo directly to get the avatar nickname
          wx.getUserInfo({
            Success: function (res) {
              Console.log(res.userInfo),
                that.setData({
                  nickName: res.userInfo.nickName,
                  avatarUrl: res.userInfo.avatarUrl,
                })
            }
          })
        }
      }
    })
  },
  bindGetUserInfo(e) {
    Console.log(e.detail.userInfo)
  },


  formSubmit: function (e) {
    wx.showToast({
      Title: 'Message already',
      Icon: 'success'
    })
    Var that = this;
    Var liuyantext = e.detail.value.liuyantext; //Get all the values ​​of the form name=liuyantext
    Var nickName = e.detail.value.nickname; //Get the value of all name=nickName on the form
    Var headimg = e.detail.value.headimg; //Get the value of all name=headimg in the form
    Wx.request({
      Url: 'http://localhost/liuyanserver/liuyan.php?liuyantext=' + liuyantext + '&nickname=' + nickName + '&headimg=' + headimg,
      Data: {
        Liuyantext,
        nickName,
        Headimg
      },
      Header: { 'Content-Type': 'application/json' },
      Success: function (res) {
        Console.log(res.data)
        that.setData({
          Re: res.data,
        })
        wx.hideToast();
      }
    })
  },

  onPullDownRefresh: function () {
    wx.showNavigationBarLoading();
    Var that = this
    Wx.request({
      Url: 'http://localhost/liuyanserver/loadliuyan.php',
      Headers: {
        'Content-Type': 'application/json'
      },
      Success: function (res) {
        / / Will get the json data, there is this array named list
        that.setData({
          Liuyanlist: res.data,
          //res represents the event pair of the success function, data is fixed, liuyanlist is an array
        })
        // Hide the navigation bar loading box
        wx.hideNavigationBarLoading();
        // stop the pulldown
        wx.stopPullDownRefresh();
      }
    })
  },

  / / Load the latest data
  onLoad: function () {
    Var that = this
    Wx.request({
      Url: 'http://localhost/liuyanserver/loadliuyan.php',
      Headers: {
        'Content-Type': 'application/json'
      },
      Success: function (res) {
        / / Will get the json data, there is this array named list
        that.setData({
          Liuyanlist: res.data,
          //res represents the event pair of the success function, data is fixed, liuyanlist is an array
        })
      }
    })
  }
}) 
/**index.wxss**/
.input-style{
  width: 90%;
  height: 50px;
  border:1px solid #ccc;
  margin:10px auto;
}

.btn{
  width: 88%;
  margin:5px auto;
}

.liuyanview{
  width: 90%;
  margin: 10px auto;
}

.result{
  text-align: center;
  font-size: 14px;
  color: #f00;
  margin-top: 20px;
}

.headimg{
  width: 45px;
  height: 45px;
  border-radius: 100%;
}

.headimg image{
  width: 45px;
  height: 45px;
  border-radius: 100%;
}

.nickname_liuyantext{
  width: calc(100% - 55px);
  float: right;
  margin-top:-45px;
}

.nickname_liuyantext .nickname{
  font-size: 15px;
  color: #999;
}

.nickname_liuyantext .nickname .time{
  font-size: 11px;
  color: #999;
  float: right;
}

.nickname_liuyantext .text{
  font-size: 16px;
  color: #666;
}

The above is the front end part of the backend has two files.

database format:

clipboard.png