源代碼已開源，如果對你有幫助可以點個星：https://github.com/linkaimin/xdzs

寫論壇不難，重點是各頁面之間的信息傳遞！

先放成品圖，雖然有點單調(diào)。。。。但是麻雀雖小五臟俱全！

論壇功能：

1. 發(fā)帖（帶圖片）
2. 瀏覽各帖
3. 評論
4. 搜素帖子
5. 作者刪自己的貼
以上是論壇必備的功能，缺哪個都不完整哦~

貼心代碼詳解（一）會講發(fā)帖部分

發(fā)帖頁面

頁面看起來還是很簡單的，因為服務(wù)器大小不夠，所以我們設(shè)置每個人只能發(fā)一張圖。
在這個頁面里java后臺負責(zé)圖片上傳，前端給后臺圖片filePath就OK了。
這里使用了iview weapp組件
js代碼

var app = getApp()//獲取url Page({data: {img_arr: [],title: '',detail:'',fruit: [{id: 1,name: '失物招領(lǐng)',}, {id: 2,name: '日常交流'}, {id: 3,name: '創(chuàng)意分享'}, {id: 4,name: '競賽組隊',}],current: "日常交流"//默認(rèn)值},handleFruitChange({ detail = {} }) {this.setData({current: detail.value}); },formSubmit: function (e) {this.upload(e)}, /*** 問題：*一張圖片上傳*/upload: function (e) {/* var that = thiswx.login({success: function(res) {wx.request({url: app.globalData.url+'onlogin', //本地調(diào)試，是獲取不到code的，所以要實現(xiàn)，還是得傳服務(wù)data: {"code": res.code},header: {'content-type': 'application/json' // 默認(rèn)值},success: function (res) {console.log(res.data.openid)var OD=res.data.openid 以上內(nèi)容為獲取用戶openid，可以不要*/ if(that.data.img_arr[0]==null)//當(dāng)用戶不發(fā)圖時 {wx.request({ header: {'content-type': 'application/x-www-form-urlencoded'}, url: app.globalData.url+'post', data:{'content': e.detail.value.content, 'title': e.detail.value.title,'category': that.data.current,"oppidA":OD}, method: 'POST', success: function (res) { if (res) {wx.showToast({title: '已提交至管理員審核，請耐心等待！',duration: 3000});setTimeout(() => {wx.switchTab({url: '../../pages/list/list',})}, 1000);//發(fā)完貼1秒自動跳轉(zhuǎn)到帖子列表頁}} }) } else{//當(dāng)用戶發(fā)圖時setTimeout(() => {for (var i = 0; i < (this.data.img_arr.length); i++) {console.log(that.data.img_arr[0])wx.uploadFile({url: app.globalData.url+'post',filePath: that.data.img_arr[0],name: 'file',header: {'content-type': 'application/x-www-form-urlencoded'//一定要用這個},formData: {'content': e.detail.value.content, 'title': e.detail.value.title,'category': that.data.current,"oppidA":OD},success: function (res) {if (res) {wx.showToast({title: '已提交至管理員審核，請耐心等待！',duration: 3000});setTimeout(() => {wx.switchTab({url: '../../pages/list/list',})}, 1000);}}})that.setData({formdata: ''})}, 1000); } } }) } })},upimg: function () {var that = this;if (this.data.img_arr.length < 1) {wx.chooseImage({//選擇圖片count:1,//一張圖片sizeType: ['original', 'compressed'],success: function (res) {that.setData({img_arr: that.data.img_arr.concat(res.tempFilePaths)})}})} },onLoad: function() {},});

json內(nèi)容部分：

{"usingComponents": {"i-input": "../../dist/input/index" ,"i-button": "../../dist/button/index","i-card": "../../dist/card/index","i-toast": "../../dist/toast/index","i-radio-group": "../../dist/radio-group/index","i-radio": "../../dist/radio/index"} }

wxml

<text >\n</text> <form bindsubmit="formSubmit" id='1' bindreset="formReset"> <i-input name="title" type="textarea" title="主題" autofocus placeholder="想個好標(biāo)題吧！" /><i-input name="content" type="textarea" title="內(nèi)容" placeholder="~創(chuàng)意的尋求者也是創(chuàng)意的生產(chǎn)者~" /><i-panel title="group-水果"><i-radio-group current="{{current}}" bindchange="handleFruitChange"><i-radio wx:for="{{fruit}}" position="{{position}}" wx:key="{{item.id}}" value="{{item.name}}"></i-radio></i-radio-group> </i-panel><view class="big-logos"><view class='big-logos_img'><image bindtap="upimg" src='http://www.ar1es.cn/cimg.png' name="files"></image> </view><block wx:for="{{img_arr}}" wx:key="{{index}}"> <view class='logoinfo'> <image src='{{item}}'></image> </view> </block> </view> <text >\n</text><text >\n</text><button class='btn' formType="submit">發(fā)布</button> </form>

css

page{width:750rpx;height:100%; } .big-logos {float: left;margin-top: 10rpx;margin-bottom: 10rpx;width: 100%;height: 200rpx;border: 1px solid #ccc;}.big-logos .big-logos_img {float: left;width: 100%;height: 200rpx;}.big-logos .big-logos_img image {float: left;width: 250rpx;height: 200rpx;}button {width: 80%;margin-top: 300rpx;background-color:#ffcc66;color: white;border-radius: 98rpx; }.big-logos .logoinfo {float: left;width: 250rpx;height: 200rpx;margin-top: -196rpx;}.big-logos .logoinfo image {float: left;width: 250rpx;height: 200rpx;}

總體內(nèi)容還是你很簡單的。。。大家各取所需就好，這部分代碼全部個人手敲，親測可用（iview組件的包要加載別忘了），看不懂的地方可以評論問我

總結(jié)

以上是生活随笔為你收集整理的微信小程序系列（3）如何用微信小程序写一个论坛？贴心代码详解（一）发帖的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。