论坛功能:1.发帖(带图片)2.浏览各帖3.评论4.搜素帖子5.作者删自己的贴以上是论坛必备的功能,缺哪个都不完整哦~
贴心代码详解(一)会讲发帖部分发帖页面
页面看起来还是很简单的,因为服务器大小不够,所以我们设置每个人只能发一张图。在这个页面里java后台负责图片上传,前端给后台图片filePath就OK了。这里使用了iviewweapp组件js代码varapp=getApp()//获取urlPage({data:{img_arr:[],title:'',detail:'',fruit:[{id:1,name:'失物招领',},{id:2,name:'日常交流'},{id:3,name:'创意分享'},{id:4,name:'竞赛组队',}],current:"日常交流"//默认值},handleFruitChange({detail={}}){this.setData({current:detail.value});},formSubmit:function(e){this.upload(e)},/问题:一张图片上传/upload:function(e){/varthat=thiswx.login({success:function(res){wx.request({url:app.globalData.url+'onlogin',//本地调试,是获取不到code的,所以要实现,还是得传服务data:{"code":res.code},header:{'content-type':'application/json'//默认值},success:function(res){console.log(res.data.openid)varOD=res.data.openid以上内容为获取用户openid,可以不要/if(that.data.img_arr[0]==null)//当用户不发图时{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);//发完贴1秒自动跳转到帖子列表页}}})}else{//当用户发图时setTimeout(()={for(vari=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(){varthat=this;if(this.data.img_arr.length1){wx.chooseImage({//选择图片count:1,//一张图片sizeType:['original','compressed'],success:function(res){that.setData({img_arr:that.data.img_arr.concat(res.tempFilePaths)})}})}},onLoad:function(){},});json内容部分:
{"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/textformbindsubmit="formSubmit"id='1'bindreset="formReset"i-inputname="title"type="textarea"title="主题"autofocusplaceholder="想个好标题吧!"/i-inputname="content"type="textarea"title="内容"placeholder="~创意的寻求者也是创意的生产者~"/i-paneltitle="group-水果"i-radio-groupcurrent="{{current}}"bindchange="handleFruitChange"i-radiowx:for="{{fruit}}"position="{{position}}"wx:key="{{item.id}}"value="{{item.name}}"/i-radio/i-radio-group/i-panelviewclass="big-logos"viewclass='big-logos_img'imagebindtap="upimg"src='http://www.ar1es.cn/cimg.png'name="files"/image/viewblockwx:for="{{img_arr}}"wx:key="{{index}}"viewclass='logoinfo'imagesrc='{{item}}'/image/view/block/viewtext/texttext/textbuttonclass='btn'formType="submit"发布/button/formcss
page{width:750rpx;height:100%;}.big-logos{float:left;margin-top:10rpx;margin-bottom:10rpx;width:100%;height:200rpx;border:1pxsolid#ccc;}.big-logos.big-logos_img{float:left;width:100%;height:200rpx;}.big-logos.big-logos_imgimage{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.logoinfoimage{float:left;width:250rpx;height:200rpx;}总体内容还是你很简单的。。。大家各取所需就好,这部分代码全部个人手敲,亲测可用(iview组件的包要加载别忘了),看不懂的地方可以评论问我













