微信小程序评论/留言功能，附：前端+后端代码+视频讲解！

前端界面：

演示：

<!-- 表单 -->
<form bindsubmit="formSubmit">
<input type="text" name="liuyantext" placeholder='输入留言内容' class="input-style"/>
<button formType="submit" class="btn" wx:if="{{nickName == empty}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" bindtap='login'>授权登录</button>
<button formType="submit" class="btn" wx:else>留言</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;">以下是留言内容</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><!-- 占位符 --><view style="width:100%;height:10px;"></view>
</view>


//index.js
//获取应用实例
const app = getApp()
Page({/*** 页面的初始数据*/data: {},//授权登录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,})}})}}})},bindGetUserInfo(e) {console.log(e.detail.userInfo)},formSubmit: function (e) {wx.showToast({title: '已留言',icon: 'success'})var that = this;var liuyantext = e.detail.value.liuyantext; //获取表单所有name=liuyantext的值 var nickName = e.detail.value.nickname; //获取表单所有name=nickName的值 var headimg = e.detail.value.headimg; //获取表单所有name=headimg的值 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 = thiswx.request({url: 'http://localhost/liuyanserver/loadliuyan.php',headers: {'Content-Type': 'application/json'},success: function (res) {//将获取到的json数据，存在名字叫list的这个数组中that.setData({liuyanlist: res.data,//res代表success函数的事件对，data是固定的，liuyanlist是数组})// 隐藏导航栏加载框wx.hideNavigationBarLoading();// 停止下拉动作wx.stopPullDownRefresh();}})},//加载最新数据onLoad: function () {var that = thiswx.request({url: 'http://localhost/liuyanserver/loadliuyan.php',headers: {'Content-Type': 'application/json'},success: function (res) {//将获取到的json数据，存在名字叫list的这个数组中that.setData({liuyanlist: res.data,//res代表success函数的事件对，data是固定的，liuyanlist是数组})}})}
})

/**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;
}

以上是前端部分
后端有两个文件。

点击下载后端，后端需要修改自己的数据库配置！

http://liketube.cn/payjs/alipay/liuyanserver/alipay.html

数据库格式：

视频：https://www.lanzous.com/i1w1deb

学习交流微信：face6009

作者网站：http://www.likeyunba.com

微信小程序评论/留言功能，附：前端+后端代码+视频讲解！相关推荐

微信小程序评论留言功能实现仿知乎
最近沉迷学习无法自拔,太久没有码字,码一个小程序留言功能实现.先上一波最后效果图: (删除按钮,是用户自己的留言时才会显示该按钮) 实现技术后台:SSM框架数据库:MySQL数据库数据库设计 ...
php微信小程序留言功能,微信小程序评论/留言功能，附：前端+后端代码+视频讲解！...
前端界面: (此图片来源于网络,如有侵权,请联系删除! ) 演示: (此图片来源于网络,如有侵权,请联系删除! ) 授权登录留言 {{item.result}} 以下是留言内容 {{item.nic ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
文案微信小程序源码独立版前后端代码有齐全
文案微信小程序源码文案+头像+背景图文案微信小程序源码独立版+前端 | 星空资源网 (xk686.com) api接口是别人的,毕竟自己采集资源比较难后台程序没有首页,只需要安装即用后台账户: ...
微信小程序实现天气预报功能(附源码)
目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题(必看) 留言前言最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图天气API获取这里我用 ...
微信小程序消息订阅完整教程前端+后端。
内容较多!!!如果有没涉及到的欢迎补充或提问. 一.订阅模板,前端调用根据官方文档来:第一步在小程序里面找到消息订阅,随便选个模板就行,我们需要的是模板id https://mp.weixin.q ...
【原创纯手打】如何用微信小程序写留言板(附代码)
首先我们先创建三个输入框,分别绑定响应的触发条件,微信双向绑定和VUE不一样,需要setData 名字<input type="text" value="{{nam ...
php微信小程序实现留言,微信小程序实现留言功能
需求:留言可以点赞,点过赞之后图标变化,没人只能点赞一次,留言可以在留言 index.wxml 邻居评论({{yanlist.count}}) 我要留言 {{item.nick_name}} {{it ...
微信小程序实现点赞功能（前端）
可以通过以下代码实现点赞效果,且只能点赞一次: <view class="card-right"><text class="topText"& ...

微信小程序评论/留言功能，附：前端+后端代码+视频讲解！

前端界面：

演示：

数据库格式：

微信小程序评论/留言功能，附：前端+后端代码+视频讲解！相关推荐

最新文章

热门文章