新手如何用微信小程序和云数据库做一个论坛？【发帖页】

新手小白用微信小程序和云数据库做一个论坛【发帖页】

放个效果图

发帖页就很简单了，只需要获取输入的内容，存入tiezi集合就可以了。我使用的是表单提交（即form bindsubmit=“formSubmit”）来提交数据。
data的内容为：

data: {
    img_arr:[],
    img:'',
    //标题
    title: '',
    //内容
    detail:'',
    //作者
    writer:'',
    //时间
    time:'',
    fruit: [
      {id: 1,name: '学习心得',},
      {id: 2,name: '日常交流'}, 
      {id: 3,name: '题目悬赏'}, 
      {id: 4,name: '竞赛组队',}
    ],
    //分类
    current:'日常交流',
    id:0
  },
  handleFruitChange(e) {
    this.setData({
        current: e.detail.value
    });
},

下面是完整的wxml页面。

<text >\n</text>
<form bindsubmit="formSubmit" id='1' bindreset="formReset">    
<i-input name="title" type="textarea"  title="主题" autofocus placeholder="想个好标题吧！" />
    <i-input name="content" type="textarea"  title="内容" placeholder="~创意的寻求者也是创意的生产者~" />
   <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='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F35%2F29%2F39573bdc74cc8e3.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616460543&t=62d13e4016eb219e02531abe0dd7b383' name="files"></image> 
      
        </view>
        <block wx:for="{{img_arr}}" wx:key="{{index}}"> 
            <view class='logoinfo'>    
              <image src='{{img}}'></image>    
            </view>  
        </block>    
      </view>    
    <text >\n</text>

  <text >\n</text>
      <button class='btn' form-type="submit" bindtap="updateinfor">发布</button>    
</form>  

对应的函数为：

formSubmit: function (e) {
    console.log(app.globalData.userimg)
    var that = this
    
    //获取当前页面数据  
    var myDate = new Date();
    var month=myDate.getMonth()+1;
    this.data.detail=e.detail.value.content,   
    this.data.title=e.detail.value.title,
    this.data.writer=app.globalData.nickname,
    this.data.time=myDate.getFullYear()+'/'+ month+'/'+myDate.getDate();

    this.setData({
      detail:e.detail.value.content,   
      title:e.detail.value.title,
      writer:app.globalData.nickname,
      time:myDate.getFullYear()+'/'+ month+'/'+myDate.getDate()
    })

    const db = wx.cloud.database()
    //用于把所有信息存入数据库
    //当前页面信息存入数据库
    db.collection('tiezi').add({
      data: {
        title:e.detail.value.title,
        content:e.detail.value.content,
        category:that.data.current,
        writer:app.globalData.userInfo.nickName,
        time:myDate.getFullYear()+'/'+ month+'/'+myDate.getDate(),
        pic:this.data.img,
        commentNumber:0,
        icon:app.globalData.userimg
      },
      success: res => {
        this.setData({
          title:this.data.title,
          content:this.data.detail,
          category:that.data.current,
          writer:app.globalData.userInfo.nickName,
          time:this.data.time,
          pic:this.data.img,
          commentNumber:0
        })

        console.log('[数据库] [新增记录] 成功，记录 _id: ')
        //跳转
        wx.switchTab({
          url: '../list/list?title='+this.data.title+'&detail='+this.data.detail+'&writer='+this.data.writer+'&category='+that.data.current+ '&time='+this.data.time,
        })
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败：', err)
      }
    })

同样的，需要进行setData而不能直接用==。在数据库存入成功（ success=>res{成功后执行的内容} ）后，跳转到主页面（就是显示所有帖子的页面）。

需要注意的部分是上传图片的部分。我设置了一个bindtap调用upimg（）来获取图片的url。放上代码：

upimg: function () {
    console.log('upimg')
    //获取图片url
    var that = this;
    
    //console.log('上传图片')
    //console.log(that.data.id)
    wx.chooseImage({
      //最多可以选择的图片总数
      count: 1,
       // 可以指定是原图还是压缩图，默认二者都有
      sizeType:['compressed'],
      // 可以指定来源是相册还是相机，默认二者都有
      sourceType: ['album', 'camera'], 
      success: (res)=>{
        
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = String(res.tempFilePaths);
      console.log(tempFilePaths)
      this.setData({
        img:tempFilePaths
      })
      console.log(this.data.img)
    
    },
  })
},

在选择图片（wx.chooseImage）成功后，获得路径（tempFilePath），使用setData赋值，这样在formSubmit（）里就能一起传到数据库了。数据库的内容、结构都已经在上一篇截图了。

还不能分享代码，因为项目还没结束。结束后一定。不过实现并不算困难，只要查一查各个函数的用法就一目了然。所以主要还是说一下思路和自己踩过的坑。

参考代码：https://blog.csdn.net/kotoriyou/article/details/91352372