写论坛不难,重点是各页面之间的信息传递!
先放成品图,虽然有点单调。。。。但是麻雀虽小五脏俱全!
论坛功能:
1. 发帖(带图片)
2. 浏览各帖
3. 评论
4. 搜素帖子
5. 作者删自己的贴
以上是论坛必备的功能,缺哪个都不完整哦~
这里使用了iview weapp组件
贴心代码详解(三)会讲列表部分

wxml
<view class="content"> <view class="bg"> <view class="name">创意集</view> <form bindsubmit="formSubmit"> <view class="search"> <button class='find' form-type="submit" style="width:50px;height:30x"> 查询 </button> <input type="text" name="find" placeholder="帖子名称" form-type="submit"/> <button class='btn' bindtap="img" >发帖</button> </view> </form> </view> </view> <view wx:for="{{list}}" wx:key="list"><navigator url="../detail/detail?id={{item.id}}" open-type="navigate" > <view class="title">【{{item.category}}】{{item.title}}</view> <view class="pic"> <image style="width:30%;height:69px;" src="{{item.pic}}"/> <view class="info"> <view class="desc"> <text>{{item.commentNumber}}条评论</text> <text>{{item.time}}</text> <text>楼主:{{item.writer}}</text> <view class="opr"> </view> </view> </view></view><view class="hr"></view></navigator></view>json
{ "usingComponents": { "i-row": "../../dist/row/index", "i-col": "../../dist/col/index"}}js
var app = getApp();Page({ onPullDownRefresh() { this.onShow(); console.log("上拉刷新"); wx.showNavigationBarLoading() //在标题栏中显示加载 }, img:function() { wx.navigateTo({ url: '../img/img' }) }, getUserInfo:function(e){ console.log(e.detail.userInfo) wx.request({ url: app.globalData.url+'all', data:{ 'writer': e.detail.userInfo.nickName, 'pic' : e.detail.userInfo.avatarUrl, method: 'POST', header: { 'content-type': 'application/json' }, success:function(res) { console.log('submit successs'); }, fail:function(res){ console.log('submit fail'); } } })}, formSubmit(e) { console.log(e.detail.value) wx.navigateTo({ url: '../find/find?find='+e.detail.value.find,//这里是重点!!!页面信息传递,要结合我的上一篇博客看 }) }, /** * 页面的初始数据 */ data: { title:"", writer:" ", time:"", number:"", }, /** * 生命周期函数--监听页面加载 */ onLoad: function () { var that = this wx.request({ url: app.globalData.url+'community', headers: { 'Content-Type': 'application/json' }, success: function (res) { //将获取到的json数据,存在名字叫list的这个数组中 console.log(res.data); that.setData( { list: res.data.data, //res代表success函数的事件对,data是固定的,list是数组 }) } }) }, tempData: function () { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var that = this wx.request({ url: app.globalData.url+'community', headers: { 'Content-Type': 'application/json' }, success: function (res) { //将获取到的json数据,存在名字叫list的这个数组中 console.log(res.data); that.setData( { list: res.data.data, //res代表success函数的事件对,data是固定的,list是数组 }) } }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})













