您的位置:首页 > 移动开发 > 微信开发

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

2019-06-09 13:31 639 查看

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

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

论坛功能:

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.nickName
var userIcon = e.detail.userInfo.avatarUrl
this.setData({
nickName:nickName
});
console.log(nickName)
},
formSubmit(e)
{
var that = this;
wx.login({
success: function(res) {
wx.request({//获取openid
url: 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.openid
if(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 = this
wx.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" />

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐