微信小程序系列（4）如何用微信小程序写一个论坛？贴心代码详解（二）评论页

源代码已开源，如果对你有帮助可以点个星：https://github.com/linkaimin/xdzs

写论坛不难，重点是各页面之间的信息传递！

先放成品图，虽然有点单调。。。。但是麻雀虽小五脏俱全！

论坛功能：

1. 发帖（带图片）
2. 浏览各帖
3. 评论
4. 搜素帖子
5. 作者删自己的贴
以上是论坛必备的功能，缺哪个都不完整哦~

贴心代码详解（二）会讲评论页部分

还是老规矩，使用了iview weapp组件别忘了引包。
js

const { $Toast } = require('../../dist/base/index');
var app = getApp();//获取url
Page({  getUserInfo:function(e){var nickName = e.detail.userInfo.nickNamevar userIcon = e.detail.userInfo.avatarUrlthis.setData({nickName:nickName});console.log(nickName)},formSubmit(e) {var that = this; wx.login({success: function(res) {wx.request({//获取openidurl: app.globalData.url+'onlogin',          //本地调试，是获取不到code的，所以要实现，还是得传服务data: {"code": res.code},header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res.data.openid)var OD=res.data.openidif(e.detail.value.pinglun==null||e.detail.value.pinglun==''){$Toast({content: '所有评论内容不能为空哦！',type: 'warning'});}else{$Toast({content: '评论成功！',type: 'success'});wx.request({ //评论部分url: app.globalData.url+'detail/comment',  data:{content:e.detail.value.pinglun,systemId:that.data.Tid,writer: app.globalData.userInfo.nickName,oppidA:OD},  method: 'POST',  header: {'content-type': 'application/json'},success:function(res) {  //console.log(that.data.nickName)   },  fail:function(res){  //console.log(that.data.nickName)   }  })// if (getCurrentPages().length != 0) {//   //刷新当前页面的数据//   getCurrentPages()[getCurrentPages().length - 1].onLoad()// }}
}})}
})
},/*** 页面的初始数据*/data: {title:"",name:"",time:"",detail:"",listPL:[],Tid:"",nickName:""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({Tid:options.id})var that = thiswx.request({ url: app.globalData.url+'detail/'+options.id,  //相应帖子页面data:{},  method: 'GET',  header: {'content-type': 'application/json'},success:function(res) {  console.log(res.data.data)that.setData({list: res.data.data,//主贴内容listPL: res.data.mydata//评论内容})},  fail:function(res){  console.log('submit fail');  }
}) },/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

json

{"usingComponents":{"i-toast": "../../dist/toast/index"}}

wxml

<view class="content" wx:for="{{list}}"  wx:key="{{index}}" ><view class="title">【{{item.category}}】{{item.title}}</view><view class="desc"><view class="publish"><view>
<image src="{{item.icon}}"style="width:36px;height:36px;"></image>
<image class="run" mode="widthFix" src="../../static/{{item.userPaiweiImg}}.png"></image>
</view><view class="company"><view>{{item.writer}}</view><view class="attr"><text class="mark">{{class}}</text><text class="time">{{item.time}}</text></view></view></view></view><view class="article">{{item.content}}</view><view class="img" ><image style="height：100%" mode="aspectFit" src="{{item.pic}}"></image></view></view><view class="answer-feed" wx:for="{{listPL}}"  wx:key="{{index}}"><view style=" weight:100%;height:10rpx; background-color:#0094ff;overflow: hidden;display: inline-block;text-align: justify;text-align-last: justify;"></view><view  bindtap="bindItemTap" class="feed-item"><image class="icon"  src="{{item.icon}}"></image><image class="run" mode="widthFix" src="../../static/{{item.userPaiweiImg}}.png"></image><text>{{item.writer}}</text><view class="feed-content"><view class="answer-body"><view><text class="answer-txt">{{item.content}}</text></view><view class="answer-actions"><view class="time"><a>{{item.time}}</a></view></view></view></view></view>
</view>
<text >\n</text>
<text >\n</text><form bindsubmit="formSubmit"><view class="comment"><view class="write"><input type="textarea" name="pinglun" placeholder="写评论..."/></view><view class="opr"><button class="sumbit" form-type="submit">评论</button></view></view></form> <i-toast id="toast" />

wxss

.img{display:flex;                justify-content: center;        align-items:center;  }.title{margin:10px;font-size: 25px;font-weight: bold;
}
.desc{margin:10px;display: flex;flex-direction: row;
}
.publish{display: flex;flex-direction: row;width:90%;
}
.company{margin-left: 10px;
}
.mark{border:1px solid #cccccc;width:25px;font-size: 11px;border-radius: 5px;
}
.time{font-size: 14px;margin-left: 5px;color: #999999;
}
.btn{line-height: 60px;
}
.article{font-size: 16px;line-height: 25px;padding:10px;
}
.comment{width:100%;height: 42px;background-color: #F4F5F7;position: fixed;bottom: 0px;display: flex;flex-direction: row;align-items: center;
}
.write{width: 50%;border:1px solid #ffffff;margin-left: 10px;border-radius: 15px;font-size: 13px;background-color: #ffffff;
}
.write input{margin-left: 10px;
}.sumbit{font-size: 30rpx;border-radius: 4px;margin-left: 50px;
}
/**answer.wxss**/.answer-feed {padding: 0;font-size: 14px;color: #000;
}
.question-wrp{border-radius: 3px;box-shadow: 0 1px 2px ;
}
.question-item{width: 710rpx;padding: 40rpx 20rpx 10rpx;background: #fff;
}
.question-item .que-tag{}
.question-item .que-tag .tag{height: 28rpx;padding: 15rpx 20rpx;border-radius: 28rpx;margin: 0 10rpx;background: #EEF5F8;color: #2186E0;font-size: 28rpx;vertical-align: middle;
}
.question-item .que-title{padding: 40rpx 20rpx 30rpx;font-size: 38rpx;
}
.question-item .que-content{padding: 0 20rpx;font-size: 26rpx;
}
.question-item .que-follow{margin: 20rpx;height: 68rpx;
}
.question-item .que-follow view{display: inline-block;margin: 0 40rpx 0 0;
}.question-item .que-follow image{width: 50rpx;height: 50rpx;margin: 0 10rpx 0 0;vertical-align: middle;
}
.question-item .que-follow .left{float: left;padding: 10rpx 0;
}
.question-item .que-follow .left text{height: 50rpx;vertical-align: middle;padding: 18rpx 0;font-size: 24rpx;
}
.question-item .que-follow .right{float: right;padding: 20rpx 55rpx;color: #ffffff;background: #52C980;border-radius: 3px;font-size: 26rpx;margin: 0;
}
.que-operate{width: 750rpx;border-top: solid 1px #ebebeb;border-bottom: solid 1px #ebebeb;color: #889091;vertical-align: middle;background: #ffffff;
}
.que-operate .flex-item{padding: 20rpx 0;font-size: 26rpx;
}
.que-operate .invite{border-right: solid 2px #ebebeb;
}
.icon{border-radius:50%;width:100rpx;height:100rpx;vertical-align: middle;margin: 0 20rpx 0 0;
}
.run{width:50rpx;height:50rpx;vertical-align: middle;margin: 0 20rpx 0 0;
}

还是很容易理解的~哈哈哈 ~大家加油哦 =。=

微信小程序系列（4）如何用微信小程序写一个论坛？贴心代码详解（二）评论页相关推荐

微信小程序系列（7）如何用微信小程序写一个论坛？贴心代码详解（五）删帖页【完结篇】
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序系列（6）如何用微信小程序写一个论坛？贴心代码详解（四）搜索页
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序的手机通讯录点击本页面跳转位置的代码详解
最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作 ...
pos请求微信小程序_微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapt ...
php 微信公众平台,微信公众平台代码详解-php语言（一）
2.这里把它粘贴出来,以注释的形式进行讲解. 3.首先我们要知道一些基础的知识: (1)要有自己的网站--公网环境,其中一个php页面处理微信消息: (2)微信公众平台和网站服务器之间是通过XML数据 ...
微信公众平台万能代码详解-php语言（二）
1.基础知识在上一篇地址有讲解和图片,内容大致包括微信开发者模式后台配置.微信公众开发者文档代码详解. 2.本篇将粘贴出包括所有类型在内的消息处理办法,在开发者模式下用代码完成所有编辑模式的基础内容. ...
socket 获取回传信息_Luat系列官方教程5：Socket代码详解
文章篇幅较长,代码部分建议横屏查看,或在PC端打开本文链接.文末依然为爱学习的你准备了专属福利~ TCP和UDP除了在Lua代码声明时有一些不同,其他地方完全一样,所以下面的代码将以TCP长连接的数据 ...
[Pytorch系列-61]：循环神经网络 - 中文新闻文本分类详解-3-CNN网络训练与评估代码详解
作者主页(文火冰糖的硅基工坊):文火冰糖(王文兵)的博客_文火冰糖的硅基工坊_CSDN博客本文网址:https://blog.csdn.net/HiWangWenBing/article/detai ...
Java多线程系列(九)：CountDownLatch、Semaphore等4大并发工具类详解
之前谈过高并发编程系列:4种常用Java线程锁的特点,性能比较.使用场景 ,以及高并发编程系列:ConcurrentHashMap的实现原理(JDK1.7和JDK1.8) 今天主要介绍concurre ...

微信小程序系列（4）如何用微信小程序写一个论坛？贴心代码详解（二）评论页

写论坛不难，重点是各页面之间的信息传递！

贴心代码详解（二）会讲评论页部分

微信小程序系列（4）如何用微信小程序写一个论坛？贴心代码详解（二）评论页相关推荐

最新文章

热门文章