微信小程序系列（3）如何用微信小程序写一个论坛？贴心代码详解（一）发帖

最新推荐文章于 2024-08-31 15:52:13 发布

kotoriyou

最新推荐文章于 2024-08-31 15:52:13 发布

阅读量1.8w

点赞数 45

分类专栏：微信小程序踩坑心得文章标签：微信小程序论坛图片上传图片选择 openID获取

本文链接：https://blog.csdn.net/kotoriyou/article/details/91351797

版权

本文介绍如何用微信小程序实现论坛发帖功能，重点在于页面间信息传递和图片上传。提供开源代码，包括js、wxml和css部分，使用iview weapp组件，限制每人发帖最多一张图片。论坛功能涵盖发帖、浏览、评论、搜索及作者删除自己帖子等。

摘要由CSDN通过智能技术生成

源代码已开源，如果对你有帮助可以点个星：https://github.com/linkaimin/xdzs

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

先放成品图，虽然有点单调。。。。但是麻雀虽小五脏俱全！
在这里插入图片描述
论坛功能：

1. 发帖（带图片）
2. 浏览各帖
3. 评论
4. 搜素帖子
5. 作者删自己的贴
以上是论坛必备的功能，缺哪个都不完整哦~

贴心代码详解（一）会讲发帖部分

发帖页面
在这里插入图片描述
页面看起来还是很简单的，因为服务器大小不够，所以我们设置每个人只能发一张图。
在这个页面里java后台负责图片上传，前端给后台图片filePath就OK了。
这里使用了iview weapp组件
js代码


var app = getApp()//获取url
Page({
   
  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) {
   
   /* var that = this
    wx.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)
       var OD=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