微信小程序系列(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" />
还是很容易理解的~哈哈哈 ~大家加油哦 =。=
相关文章推荐
- 微信小程序系列(6)如何用微信小程序写一个论坛?贴心代码详解(四)搜索页
- 微信小程序系列(5)如何用微信小程序写一个论坛?贴心代码详解(三)列表页
- 如何看一个比较大的程序代码
- [编写高质量代码:改善java程序的151个建议]建议42,如何让一个工具类不可实例化
- 微信小程序中实现一对多发消息详解及实例代码
- C语言系列(一):最近重拾C语言的想法,谈到C中易错点,难点;以及开源代码中C语言的一些常用技巧,以及如何利用define、typedef、const等写健壮的C程序
- 通过汇编一个简单的C程序,分析汇编代码理解计算机是如何工作的
- 微信小程序 视图容器组件的详解及实例代码
- 微信小程序中的微信支付js代码和流程详解
- 初学java,写的一个小程序遇到点问题,又碰上论坛关闭,在此上代码,希望能有人帮我看下,多谢
- 分析一个简单C程序的汇编代码,理解计算机是如何工作的
- 微信小程序 Record API详解及实例代码
- 微信小程序开发之相册选择和拍照详解及实例代码
- 考虑下列生成二进制的过程,编译器被用来生成单个单元的目标代码,链接器被用来将多个目标单元合并成一个程序二进制,链接器如何改变指令和数据到内存地址的绑定?需要什么信息从编译器传递给链接器,以协助完成链接
- 微信小程序开发 | 把玩系列:各种组件和API实用详解
- 详解微信小程序中的页面代码中的模板的封装
- magento缓存系列详解:如何缓存一个block
- (作业1)将一个简单的C程序编译成汇编代码,讨论计算机是如何工作的进行
- 通过汇编一个简单的C程序,分析汇编代码理解计算机是如何工作的
- 如何写一个自动抢微信红包的程序