微信小程序留言功能前+后端php实现

实现功能：小程序客户端输入留言内容，这些内容会发到数据库表中，然后再从数据库返回到前端加载出来。

思路：总体上，是用<form bindsubmit=“formSubmit”>把输入的留言内容以及授权时获取的用户姓名、头像地址、性别等信息上传到服务器，然后后端服务器wx:for循环渲染数据库表中的信息。

• 先附上客户端页面的内容
  
  初次使用，要先授权登录
  

然后输入留言的内容：

下拉刷新，就可以加载出留言的内容了：（我留了好多条）

功能大致如上，下面附上代码
注意，“失物认领所”那部分是在index里（加载留言的页面）
"留言处"是在logs里面（输入留言内容）

index.html

<view class="ttext">
<text >失物认领所</text>
</view>

<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;margin-bottom:10px;">以下是失物信息</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>
<view class="text">{{item.liuyantext}}</view>
<image class="tupian" wx:if="{{item.tupian}}" src="{{item.tupian}}" 
mode="aspectFit"></image>
<view class="time">{{item.lytime}}</view>
</view>

index.js

//index.js
const app = getApp()
Page({
  /**
  * 页面的初始数据
  */
  data: {
    tupian: '',
    uploadpath:''
  },
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading();
    var that = this
    wx.request({
      url: '填写加载出内容的url地址，我这里用的后端是PHP的',
      method: "POST",
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
        /*'content-type': 'application/x-www-form-urlencoded;charset=utf-8'*/
      },
      success: function (res) {
        //将获取到的json数据，存在名字叫list的这个数组中
        that.setData({
          liuyanlist: res.data,
          //res代表success函数的事件对，data是固定的，liuyanlist是数组
        })
      }
    })
    // 隐藏导航栏加载框
    wx.hideNavigationBarLoading();
    // 停止下拉动作
    wx.stopPullDownRefresh();
  },
  //加载最新数据
  onLoad: function () {
    var that = this
    wx.request({
      url: '填写加载出内容的url地址，我这里用的后端是PHP的',
      method: "POST",
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        //将获取到的json数据，存在名字叫list的这个数组中
        that.setData({
          liuyanlist: res.data,
          //res代表success函数的事件对，data是固定的，liuyanlist是数组
        })
      }
    })
  },

  onShareAppMessage: function () {   
    var sharetitle,
      tid = this.data.tid,
      m = this.data.m,
      flag = this.data.lastflag,
      title = this.data.sharetitle;
    return {
      title: flag == true ? title : '分享~',
      desc: '你好吗？（这里是分享页面的函数内容）',
      path: '/pages/index/index?tid=' + tid + '&m=' + m
    }
  }
})

WXSS

.ttext{
  text-align:center;
  color:rgba(9, 255, 0, 0.349);
  font-size:200%;
  text-decoration:blink;
  text-shadow: -20 -20 -20 blue;
  /*background-color:rgb(133, 130, 130);*/
  font-style:oblique;
  margin-top:20px;
}
.input-style{
height:100px;
width:100%;
/*margin:10px auto;*/
margin-top:9px;
margin-left:8px;
margin-right:8px;
color:darkgray;
font-size:110%;
}
.anniu{
  height:40px;
  width:40px;
  float:left;
  margin-left:20px;
  margin-top:10px;
  margin-bottom:5px;
}
.text{
  float:left;
  position:relative;
  color:#999;
  font-size:80%;
}
.show-image{
width:100px;
height:50px;
margin-bottom:8px;
}
.shurukuan1{
  color:rgb(204, 201, 201);
}
.btn{
width: 88%;
margin:5px auto;
}
.result{
text-align: center;
font-size: 14px;
color: #f00;
margin-top: 20px;
}
.liuyanview{
/*width:100%;*/
/*margin: 10px auto;*/
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
/*margin-top:-40px;*/
}
.headimg{
width: 35px;
height: 35px;
border-radius: 100%;
float:left;
}
.headimg image{
width: 35px;
height: 35px;
border-radius: 100%;
float:left;
}
.nickname_liuyantext{
/*width: calc(100% - 55px);*/
width:100%;
float: right;
margin-top:-120px;
}
.nickname_liuyantext .nickname{
font-size: 15px;
color: rgb(128, 171, 236);
margin-left: 45px;
margin-top:80px
}
.nickname_liuyantext .text{
font-size: 17px;
color: #666;
margin-left:45px;
margin-top: 6px;
margin-bottom:7px;
}
.nickname_liuyantext .time{
font-size: 11px;
color: #999;
/*margin-top: 5px;*/
margin-left: 45px;
margin-top: 6px;
float:left;
margin-bottom:10px;
}
.nickname_liuyantext.tupian{
  height:50%;
}
.tupian{
  margin-bottom: 20px;
}
.tianjiatupian{
  color:#999;
  font-size:80%;
}

index.json：

{
 "enablePullDownRefresh":true,
 "backgroundTextStyle": "dark"
}

以上是加载留言的代码，url要根据自己的来写，只要输入正确的url，就能实现加载留言内容了，当然需要你的数据库表里有内容。
下面是“留言处”的代码

logs.html

<form bindsubmit="formSubmit">
<textarea  name="liuyantext" value='{{liuyantext}}' placeholder-class="shurukuan1" placeholder='请输入问题详情'  class="input-style" />
<input type="text" name="nickname" value='{{nickName}}'style="display:none;" />
<input type="text" name="headimg" value='{{avatarUrl}}' style="display:none;"/>

<input type="text" name="tupian" value='{{tupian}}' style="display:none;"/>

<input type="numbert" name="gender" value='{{gender}}' style="display:none"/>

<button type="warn" size="mini" formType="submit" class="btn" wx:if="{{nickName == empty}}" open-type="getUserInfo" bindgetuserinfo="bindGotUserInfo" bindtap='login' ><view class="ziti" > <text>先授权在留言</text></view></button>
<button type="primary" formType="submit" size="mini" hover-stay-time="120" class="btn" wx:else ><view class="ziti" > <text>提交</text></view></button>
</form>

logs.js

//index.js
const app = getApp()
Page({
  /**
  * 页面的初始数据
  */
  data: {
    tupian: '',
    uploadpath: ''
  },
  //授权登录
  login: function () {
    var that = this;
    // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              console.log(res.userInfo),
                that.setData({
                  nickName: res.userInfo.nickName,
                  avatarUrl: res.userInfo.avatarUrl,
                  gender: res.userInfo.gender
                })
            }
          })

        }
      }
    })
  },
  /*bindGotUserInfo(e) {
    console.log(e.detail.userInfo)

  },*/
  bindGotUserInfo: function (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
  
  /* wx.getImageInfo({
     src: res.tempFilePaths[0],
     success: function (res) {
       console.log(res.width)
       console.log(res.height)
       console.log(res.path)
     }
   })*/
  formSubmit: function (e) {
    wx.showToast({
      title: '成功',
      icon: 'success',
    })
    var that = this;
    var nickName = e.detail.value.nickname; //获取表单所有name=nickName的值 
    var liuyantext = e.detail.value.liuyantext; //获取表单所有name=liuyantext的值 
    var headimg = e.detail.value.headimg; //获取表单所有name=headimg的值 
    var lytime = e.detail.value.lytime;
    var gender = e.detail.value.gender;
    wx.request({
      url: 'URL?nickname=' + nickName + '&liuyantext=' + liuyantext + '&headimg=' + headimg + '&lytime=' + lytime + '&gender=' + gender,
      data: {
        nickName,
        liuyantext,
        
        headimg,
        lytime,
        gender
      },
      method: "POST",
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        console.log(res.data)
        that.setData({
          re: res.data,
        })
        wx.hideToast();
      }
    })
  },
})

logs.wxss就不给了，这个页面的样式不重要。

下面，重中之重的来了，后端！我用的是php代码实现的，
url+liuyan.php( 这里的url就是我们自己的域名~，自己更改一下）

<?php
$nickname= $_GET["nickname"];
$liuyancon= $_GET["liuyantext"];
$headimg=  $_GET["headimg"];
$lytime=date("Y-m-d H:i:s");

$gender= $_GET["gender"];

$liuyantext=trim($liuyancon);
mysql_query("set names utf8");
if(empty($liuyantext)){
echo "留言为空";
echo "<font color=#FF0000 size=5>";
}

else
{
$con=mysql_connect("数据库的名称~","数据库账号~","数据库密码~");
mysql_select_db("数据库账号~",$con);
mysql_query("set names utf8");

if(empty($nickname)){
echo "留言为空";
echo "<font color=#FF0000 size=5>";
}

else
mysql_query("INSERT INTO liuyantb (nickname,liuyantext,headimg,lytime,tupian,gender) VALUES('$nickname','$liuyantext','$headimg','$lytime','$tupian','$gender')");
mysql_close($con);
}
?>

上面php代码的后面部分，INSERT INTO liuyantb中的liuyantb就是我们的数据库表，我们要先去数据库建一个表，里面的字段包括nickname,headimg,liuyantext,等，如下图（我用的是阿里云自带的sql数据库，很容易上手的）

这样就可以把客户端留言的信息传到数据库表啦，接下来再写一个loadliuyan.php把数据库表的内容信息加载到前端。
（这个loadliuyan.php就是index.js里面的url要填写的）

loadliuyan.php

<?php
header("Content-type:text/json;charset=utf8");
$con = mysql_connect("数据库名称","账号~","密码~") or (' msql error');
mysql_select_db("数据库名", $con );

mysql_query("set names utf8");
$results = []; 
$result = mysql_query("SELECT * FROM liuyantb ORDER BY id DESC");
while( $row = mysql_fetch_assoc( $result ) )
{
	$results[] = $row;
}
echo json_encode($results);die;
mysql_close($con);
?>

就此完毕，前端留言，后端拿数据并且返回给前端展示的功能就完成了。
代码是完整的，仅需要自己改一下url，以及再后端把php代码写正确就可以了。
这个功能的实现，是我最初接触小程序最想实现的一个功能，学习这个功能的路上碰了很多壁，找了很多资料，但是写的不全
本文非常适合小程序小白看，有哪里写的不好请尽情地说出来一起讨论

下一次再写一篇，《小程序实现插入图片前端+后端php》