实现功能:小程序客户端输入留言内容,这些内容会发到数据库表中,然后再从数据库返回到前端加载出来。思路:总体上,是用<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.jsconst 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.jsconst 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>”;}elsemysql_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<?phpheader(“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》
微信小程序留言功能前+后端php实现
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序留言功能前+后端php实现
最新评论
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务
优秀的团队
好服务,值得信赖
不错的服务