微信小程序雲開發-樹洞小程序Treehole（評論帖子/發佈話題實現）

這一節介紹的是評論帖子，還有發佈話題功能的實現。

首先說說評論帖子的功能。

先看一下效果圖：

從上一節可知，進行評論跳轉的時候需要帶來一些關於帖子的數據。

這一個頁面對於佈局來說，也是十分的重要。評論欄固定在底部，評論之後實時刷新，刪除自己的評論等。

首先是佈局的wxml

<view class='top'>
  <view class='top1'>
    <image class='icon' src="{{PostUserData[0].User_head_url}}"></image>
    <text class='name'>{{PostUserData[0].Username}}</text>
    <text class='time'>{{PageData.Time}}</text>
  </view>

  <view class='top2'>
    <text>{{PageData.Context}}</text>
  </view>

  <view class='top3'>
    <block wx:for="{{PageData.Photo_arr}}" wx:key="key">
      <image src="{{item}}"></image>
    </block>
  </view>
  <view class='top4'></view>
</view>

<view class='mid'>
  <block wx:for="{{dataArray}}" wx:key="key" wx:index="index">

    <view class='top1'>
      <image class='icon' src='{{item.image}}'></image>
      <text class='name'>{{item.name}}</text>
      <text class='time'>{{item.PageTime}}</text>
    </view>

    <view class='top2'>
      <text bindlongpress="showModal" data-target="bottomModal">{{item.context}}</text>

      <block wx:if="{{dataArray[index]._openid==ReplyOpenId}}">
        <view class='b_11' bindtap='Remove_Post' data-post_id="{{item._id}}">
          <image src='/images/del1.png'></image>
          <label>刪除</label>
        </view>
      </block>
      <view class='line'></view>
    </view>
  </block>
</view>
  <view style="height:130rpx;"></view>
  <form bindsubmit="formSubmit" style="position:fixed;bottom:0;">
    <view class='buttom'>
      <view class='inp'>
        <!-->
        <image src='/images/topic/fb.png'></image>
        <-->
          <input placeholder="寫評論..." name="userName" value="{{inputMessage}}" cursor-spacing="20"></input>
      </view>
      <button form-type="submit">
        <text class='fb'>發表</text>
      </button>
    </view>
  </form>

下面是實現功能的js代碼，定義所需要用到的變量data。

var time = require('../../utils/util.js')
var app = getApp();
const db = wx.cloud.database();
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    discussShow: false,
    inputMessage: '',
    SendTime: '',
    Time: '',
    HeadImageUrl: '',
    UserName: '',
    PageId: '',
    UpPageId: '',
    RemoveId: '',
    PostUserId: '',
    ReplyOpenId: '',
    PageData: [],
    dataArray: [],
    PostUserData: [],
  },

進入頁面時候，首先要獲取是否已經別人評論的信息。

像這個效果圖中，在之前已經有其他人進行評論，現在就要把其內容顯示出來。

onLoad: function (options) {
    var that = this;
    wx.getStorage({
      key: 'key',
      success(res) {
        that.setData({
          PageId: res.data.post_id,
          PostUserId: res.data.postopenid
        })

        //根據貼子ID來查找貼子的內容
        db.collection('Assistant_DataSheet').doc(that.data.PageId).get({
          success: function (res) {
            that.setData({
              PageData: res.data
            })
           // console.log("我是第一個", that.data.PageData.Photo_arr)
          }
        })

       // console.log("我是pageid", that.data.PageId)
        //根據貼子的ID獲取貼子下面的回覆內容
        db.collection('My_ReplyData').where({
          PageId: that.data.PageId
        }).get({
          success: function (res) {
            that.setData({
              dataArray: res.data,
              RemoveId: res.data._id
            })
            //console.log("我是記錄ID",RemoveId)
           // console.log("我是第三個")
          }
        })

        //根據發帖人的openid查找他的頭像和用戶名
        db.collection('Assistant_User').where({
          _openid: that.data.PostUserId
        }).get({
          success: function (res) {
            that.setData({
              PostUserData: res.data
            })
            //console.log("我是第二個", that.data.PostUserData)
          }
        })

        //獲取自己的頭像和用戶名，使其可以在評論欄顯示。
        db.collection('Assistant_User').where({
          _openid: app.globalData.openid
        }).get({
          success: function (res) {
            that.setData({
              HeadImageUrl: res.data[0].User_head_url,
              UserName: res.data[0].Username,
              ReplyOpenId: res.data[0]._openid
            })
           // console.log("我是用戶的頭像和姓名：", that.data.HeadImageUrl)
          }
        })
      }
    })
  },

下面的評論欄其實是一個窗口，在我們需要寫評論給的時候點擊會彈出鍵盤。

填寫完成之後，進行提交，把數據添加到數據庫當中。

formSubmit: function (e) {
    var that = this;
    wx.showToast({
      title: '評論成功',
      icon: 'none'
    })
    //console.log(e.detail.value)
    this.setData({
      discussShow: true,
      inputMessage: e.detail.value.userName,
      SendTime: Date.now(),
      Time: time.formatTime(new Date)
    })

    wx.cloud.callFunction({
      name: 'reply',
      data: {
        Page_id: that.data.PageId
      },
      success: function (res) {
       // console.log(res.result)
      }
    })

    db.collection('My_ReplyData').add({
      data: {
        context: that.data.inputMessage,
        image: that.data.HeadImageUrl,
        time: that.data.SendTime,
        name: that.data.UserName,
        PageId: that.data.PageId,
        PostUserId: that.data.PostUserId,
        PageTime: that.data.Time
      }, success: function (res) {
        that.setData({
          inputMessage: ''
        })
        //刷新頁面數據
        db.collection('My_ReplyData').where({
          PageId: that.data.PageId
        }).get({
          success: function (res) {
            that.setData({
              dataArray: res.data
            })
          }
        })
      }
    })
  },

刪除評論跟刪除帖子是一個道理，判斷評論保存的openid跟當前用戶的openid是否相同，即可刪除本人的評論。

  Remove_Post: function (e) {
    let that = this
    wx.showModal({
      title: '提示',
      content: '請問是否刪除本條評論？',
      success: function (res) {
        if (res.confirm) {
         // console.log(e.currentTarget.dataset.post_id)//事件的id
          wx.cloud.callFunction({
            name: 'Remove_Reply',
            data: {
              Page_id: e.currentTarget.dataset.post_id,
            },
            success: function (res) {
            //  console.log("刪除成功！")
              //刷新頁面數據
              db.collection('My_ReplyData').where({
                PageId: that.data.PageId
              }).get({
                success: function (res) {
                  that.setData({
                    dataArray: res.data
                  })
                }
              })
            }
          })

          wx.cloud.callFunction({
            name: 'Remove_Reply_DataSheet',
            data: {
              Page_id: that.data.PageId,
            },
            sucesss: function (res) {
             // console.log("我也刪除成功！")
            }
          })
        }
      }
    })


  },

接下來是發佈帖子的介紹，跳轉到發佈帖子的頁面主要是通過下面的tabBar，進入的頁面是這樣的。

佈局的wxml文件：

<view class='main'>

  <view class='head'  >
    <view class='first1'><image src='/images/RC.png'></image></view>
    <view class='main_list'>
      <view class='list1'>
        <view class='ima' bindtap='Touch' data-touch_id='1'><image src='/images/shenghuo.png'></image></view>
        <view class='tx'><text>學習生活</text></view>
      </view>
      <view class='list2'>
        <view class='ima' bindtap='Touch' data-touch_id='2'><image src='/images/xinqing.png'></image></view>
        <view class='tx'><text>心情吐槽</text></view>
      </view>
      <view class='list3' bindtap='Touch' data-touch_id='3'>
        <view class='ima'><image src='/images/aiqing.png'></image></view>
        <view class='tx'><text>戀愛日常</text></view>
      </view>
    </view>
  </view>
  
  <view class='con'>
  <image src='/images/Second_hand.png'></image>
  </view>

  <view class='mid' >
    <view class='first'><text></text></view>
    <view class='main_list'>
      <view class='list1'>
        <view class='ima' bindtap='Touch' data-touch_id='4'><image src='/images/book2.png'></image></view>
        <view class='tx'><text>閒置圖書</text></view>
      </view>
      <view class='list2'>
        <view class='ima' bindtap='Touch' data-touch_id='5'><image src='/images/shuma1.png'></image></view>
        <view class='tx'><text>家電數碼</text></view>
      </view>
      <view class='list3'>
        <view class='ima' bindtap='Touch' data-touch_id='6'><image src='/images/meizhuang2.png'></image></view>
        <view class='tx'><text>美妝閒置</text></view>
      </view>
    </view>
  </view>
</view>

在這個頁面中我們要獲取標籤信息。

// miniprogram/pages/Choose_Type/Choose_Type.js
Page({

  data: {

  },

  onLoad: function (options) {
   
  },
  Touch:function(e){
    //console.log(parseInt(e.currentTarget.dataset.touch_id))//點擊的對應的事件

    //1-學習生活 2心情 3戀愛 交易 4圖書 5家電數碼 6美妝閒置
    let Temp_Type;
    let item = parseInt(e.currentTarget.dataset.touch_id);
    switch (item){
      case 1:Temp_Type = "學習生活";break;
      case 2: Temp_Type = "心情吐槽";break;
      case 3: Temp_Type = "戀愛日常";break;
      case 4: Temp_Type = "閒置圖書";break;
      case 5: Temp_Type = "家電數碼";break;
      case 6: Temp_Type = "美妝閒置";break;
    }
    wx.setStorage({
      key: 'PostType',
      data: Temp_Type,
    })
    if(item>=1 && item<=3){
      wx.navigateTo({
        url: '../Creat_Topic/Creat_Topic',
      })
    }
    else{
      wx.navigateTo({
        url: '../Creat_Sell_post/Creat_Sell_post',
      })
    }
    
  },
 
})

選擇之後，標籤信息攜帶過去，因爲是分爲兩個不同的欄目，所以對應的頁面也是不相同。

下面的話我們直接講解發布交易帖子的功能，因爲發佈交易的帖子功能其實也包含了普通帖子的功能。

掌握其中一個另外一個原理也相同。

慣例還是佈局的wxml

<view class='head_view'>
 <view class="text_view">
    <textarea placeholder="請輸入出售的商品描述 (不少於10個字)" auto-focus maxlength="50" auto-focus="{{false}}" bindinput="getInput"/>
  </view>
 <view class="three_view">

  <view>
    <view style="font-size:36rpx">
    添加商品圖片
    </view>
    <view class="pictuer_text">
    商品圖片最多僅支持6張。
    </view>
  </view>

  <view class="pictuer_view">

  <block wx:for="{{number}}" wx:if="{{index!=6}}" wx:key="key">
      <block wx:if="{{index==number-1 }}">
        <image src="/images/add.png" style="width:160rpx;height:160rpx;border:1rpx solid silver;"bindtap='addImage' ></image>
      </block>
      <block wx:else>
        <image src="{{Filepath[index]}}" style="width:160rpx;height:160rpx;"bindtap='clickimage' data-index="{{index}}" bindlongpress="deleteImage"></image>
      </block>
  </block>
  </view>

   <view class="type_text">
  <text>標籤類型:交易-{{PostType}}</text>
  <view style="width:55rpx;height:100%"></view>
  </view>

 </view>
</view>

<view class='main_view'>
  <view class='price'>
    <view class='vw_price'><text>價格:</text></view>
    <view class='vw_inputprice'><input class='addprice' name='price' bindinput='getPriceinput'  placeholder='輸入價格（僅支持整數）' cursor-spacing='140'></input></view>
    <view class='vw_image'><image src='/images/rmb.png'></image></view>
  </view>
  <view class='sort'>
    <view class='vw_sort'><text>分類:</text></view>
    <view class='vw_pay'><view class='pay_tx'><text>交易-{{PostType}}</text></view></view>

  </view>
  <view class='way'>

    <view class='vw_way'>
    <text>交易方式:{{SellTypearr[SellTypeindex]}}</text>
    </view>

    <view class='vw_inputway'>

     <picker bindchange="bindPickerChange" value="{{SellTypeindex}}" range="{{SellTypearr}}">
    <view class="picker">
    <image src='/images/jt.png'></image>
      </view>
  </picker>
    </view>

  </view>

</view>

<view class="button_view">
  <button class="upload_button" bindtap='upload'>發     布</button>
</view>

接下來的是一些定義還有一些比較簡單的功能函數。

這裏的SellTypearr是作爲picker的選項。picker下拉滾動選擇器控件就有滑動輪選的那種效果。

data: {
    SellTypeindex: 0,
    number: 1,
    SellTypearr: ["郵寄","當面交易","自提"],
    PostType: '',
    avatarUrl: '../../images/user-unlogin.png',
    user_openid: app.globalData.openid,
    telValue: "",
    UserInfo: '',
    Price : 0
  },
  getInput: function (e) {
    this.setData({
      telValue: e.detail.value
    })
  },
  getPriceinput:function(e){
    this.setData({
      Price: e.detail.value
    })
  },
  bindPickerChange: function (e) {
    this.setData({
      SellTypeindex: e.detail.value
    })
  },
  clickimage: function (e) {
    var index = e.target.dataset.index
    //var current = e.target.dataset.src;
    wx.previewImage({
      //current: current, // 當前顯示圖片的http鏈接
      urls: [this.data.Filepath[index]], // 需要預覽的圖片http鏈接列表
    })
  },

添加圖片和刪除圖片（沒有點擊發布之前是沒有上傳的。）

addImage: function (e) {
    var that = this
    wx.chooseImage({
      count: 6,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
      
        that.setData({
          Filepath: res.tempFilePaths,
          number: res.tempFilePaths.length + 1
        })
      }
    })
  },
  deleteImage: function (e) {
    var that = this
    var index = e.target.dataset.index
    var tempFilePaths = that.data.Filepath
    wx.showModal({
      title: '提示',
      content: '確定要刪除此圖片嗎？',
      success: function (res) {
        if (res.confirm) {
          console.log('點擊確定了');
          tempFilePaths.splice(index, 1);
        } else if (res.cancel) {
          console.log('點擊取消了');
          return false;
        }
        that.setData({
          Filepath: tempFilePaths,
          number: that.data.number - 1
        });
        console.log(that.data.Filepath);
      }
    })

  },

發佈功能的一切就在這個upload函數當中。

判斷字數是否足夠，把圖片還有內容信息添加到數據庫中，完成後進行跳轉。

upload: function () {
    
    var that = this

    let price = parseInt(this.data.Price);
    let SellTypeindex = this.data.SellTypeindex;
    if (that.data.telValue.length > 10 && price != 0 && that.data.number>1) {
      wx.showLoading({
        title: '上傳中...',
      })
      Promise.all(that.data.Filepath.map((value) => {
        return wx.cloud.uploadFile({
          cloudPath: Date.now() + parseInt(Math.random() * 100) + value.match(/\.[^.]+?$/)[0],
          filePath: value,
        })
      })).then(res => {
        return res.map((res) => {
          return res.fileID
        });
      }).then(res => {

        console.log(app.globalData.openid)
        const _id = app.globalData.openid
        const db = wx.cloud.database({ env: 'textllinpro-5br77' })
        return db.collection('Assistant_Sell_DataSheet').add({ //添加帖子
          data: {
            Context: that.data.telValue,
            Photo_arr: res,
            Intention: [],
            Price: price,
            Intention_Record_num: 0,
            Deal_Type: that.data.SellTypearr[SellTypeindex],
            Time: util.formatTime(new Date()),
            Type: that.data.PostType,
          }
        }).then(res => {
          wx.hideLoading();
          wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 1000,
            success: function () {
              console.log(res)
              wx.switchTab({
                url: '../Main_page/Main_page',
              })
            }
          })
        }).catch((ex) => {
          console.log(ex);
        })
      })

    }
    else {
      wx.showToast({
        title: '請檢查輸入的數據是否有誤！',
        duration: 1000,
        mask: true,
        icon: 'none',
      })
    }
  
  },

不要忘了進來的時候獲取標籤。

 onLoad: function (options) {
  
    var that = this
    wx.getStorage({
      key: 'PostType',
      success(res) {
        that.setData({
          PostType: res.data
        })
      }
    })
    wx.getStorage({
      key: 'Userinfo',
      success(res) {
        that.setData({
          UserInfo: res
        })
      }
    })
  }

這一節完。

下一節就介紹個人頁面中的所有功能。

謝謝大家。

微信小程序雲開發-樹洞小程序Treehole（評論帖子/發佈話題實現）

微信小程序雲開發-樹洞小程序Treehole（數據庫環境介紹與登錄）

微信小程序雲開發-樹洞小程序Treehole（個人頁面功能實現）

微信小程序雲開發-樹洞小程序Treehole（評論帖子/發佈話題實現）

Android apps 拍立知-功能實現（百度tts語音合成使用)

微信小程序雲開發的踩坑與填坑篇

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結