微信小程序云开发-树洞小程序Treehole（畅所欲言/交易广场实现）

此节介绍两个广场的展示实现。

先看一下效果图：

交易市场：

 

两个页面的切换使用的是navbar，因为只用到了两个页面，我设置了进去的时候首先加载两个页面

只是在显示哪一个页面的时候进行隐藏和Show的操作。 

加载速度情况视网络情况而定。

其余显示的数据在js里面获取。

分块组成，每一块用样式定位。

广场wxml:

头部<-->
   
    {{item}} 
     
      
     
      
    
 
  

下面是Js里面的逻辑代码：

定义所用到的Array，全局的Array主要存储的是点赞系列的。每一个Array对应这wxml中所需要显示的内容。

var app = getApp()
var util=require('../../utils/util.js');
//var template = require('../../template/template.js');
var UserIdArry = new Array()
var UserUpId = new Array()
var SellUserId = new Array()
var SellUserUpId = new Array()
Page({

  data: {
    navbar: ['畅所欲言', '交易市场'],
    currentTab: 0,
    SellDataPostArry:[],
    SellUserHeadurlArry:[],
    SellUsernameArry:[],
    SellUpArray:[],
    DataPostArry:[],
    UserHeadurlArry:[],
    UpArray: [],
    UsernameArry: [],
    UserId:'',//app.globalData.openid
    replyData: []
  },

下面按照函数来介绍：

首先是navbarTap，作为两个页面的切换。

  navbarTap: function (e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
    if (e.currentTarget.dataset.idx==0)
    {this.get_DBinf();}
    else
    {this.get_Sell_DBinf();}
  }

get_DBinf，就是获取帖子/用户的数据。

上半部分是把是否点赞的数组进行赋值（这个原理在前一篇的项目中有详细介绍，这里就不再做介绍了。）

下半部分Promise.all里面，即是获取全部帖子的内容之后，再按照用户的openid作一一对应，这样的话就会把帖子的用户信息对应好。（如果这里处理不好，会出现混乱，即A发的帖子，变成B的用户信息。）

get_DBinf:function(){
   let that = this
    wx.getStorage({
      key: 'User_openid',
      success(res) {
        that.setData({
          UserId: res.data
        })
        ////
        var db = wx.cloud.database()//{ env: 'textllinpro-5br77' }
        let userid = res.data;
        //console.log("My openid:"+userid);
        db.collection('Assistant_Up').where({//获取自己的点赞列表
          _openid: userid
        }).get({
          success: res => {   
            
            //console.log("点赞列表:", res.data)

            for (var i = 0; i < res.data.length; i++) {
              UserUpId[i] = res.data[i].Up_Post_id//点赞列表赋值
            }

            db.collection('Assistant_DataSheet').get({
              success: res => {
                //console.log("Assistant_DataSheet Res"+res);
                that.setData({
                  alldata: res.data//所有的用户列表数据
                })
                for (var i = 0; i < res.data.length; i++) {
                  UserIdArry[i] = res.data[i]._id  //所有的用户列表_id
                  if (UserUpId.indexOf(UserIdArry[i]) == -1) {
                    var item = 'UpArray[' + i + ']'
                    that.setData({
                      [item]: 0
                    })
                  }
                  else {
                    var item = 'UpArray[' + i + ']'
                    that.setData({
                      [item]: 1
                    })
                  }
                }
                //console.log(that.data.UpArray)
              }
            })
          },
        })
      }
    })
    const get_inf_db = wx.cloud.database()//{ env: 'textllinpro-5br77' }
    get_inf_db.collection('Assistant_DataSheet').get({
      success: res => {
        that.setData({
          DataPostArry: res.data
        })
        Promise.all(res.data.map((item)=>{
          return item._openid
        })).then(res=>{
          let _ = get_inf_db.command;
            get_inf_db.collection('Assistant_User').where({
              _openid: _.in(res)
            }).get().then(res => {
              that.data.UsernameArry = [];
              that.data.UserHeadurlArry=[];
              for (let i = 0; i < this.data.DataPostArry.length;i++){
                let openId = this.data.DataPostArry[i]._openid;
                for(let j=0;j{
          console.log(ex);
        })

      }
    })
  }

下面是点赞功能的介绍，原理与前一个项目相同，即判断前面获取的数组数据信息，1 or 0，判断是否已经点赞。

这里没有做取消点赞的功能，优化成提示已点赞过。

对应的意向购买功能也是如此。

upclickbutton: function (e) {
    var that = this
    var ind = e.currentTarget.dataset.nowindex
    //console.log("Post_id:" + e.currentTarget.dataset.post_id)
    const postuserid = e.currentTarget.dataset.postopenid

    //console.log(this.data.UpArray[ind] == 0)

    if (this.data.UpArray[ind] == 0)//说明没点赞过
    {

      var nowup = 'UpArray[' + ind + ']'//设置为点赞过
      this.setData({
        [nowup]: 1
      })
      const db = wx.cloud.database({ env: 'textllinpro-5br77' })
      return db.collection('Assistant_Up').add({ //添加帖子
        data: {
          Up_Post_id: e.currentTarget.dataset.post_id,
          Up_id: e.currentTarget.dataset.postopenid,
          Time_s: Date.now()
        }
      }).then(res => {
        console.log("Assistant_Up OK!");
        console.log("Pick the post_id:"+e.currentTarget.dataset.post_id);
        wx.cloud.callFunction({
          name: 'Up_Assistant_Post',
          data: {
            Post_id: e.currentTarget.dataset.post_id,
          },
          success: function (res) {
            console.log("Up_Assistant_Post OK!");
            that.get_DBinf()
            wx.showToast({
              title: '已点赞',
              image: '../../images/Up_heart.png',
              duration: 2000
            })
          },
          fail: err => {
            console.log('error:', err)
          }
        })
      })
    }
    else{
      wx.showToast({
        title: '已点赞过',
        image: '../../images/Up_heart2.png',
        duration: 2000
      })
    }
  }

效果图见： 

交易大厅的数据同理get_Sell_DBinf函数的代码就不贴出来了，跟get_DBinf类似。

下面是删除帖子功能Remove_Post和Remove_Sell,调用云函数进行操作：

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_Assistant_DataSheet',
            data: {
              youid: e.currentTarget.dataset.post_id,
            },
            success: function (res) {
              that.get_DBinf()
            }
          })
        }
      }
    })
  },

  Remove_Sell: function (e) {
    let that = this
    wx.showModal({
      title: '提示',
      content: '请问是否删除本条交易记录？',
      success: function (res) {
        if (res.confirm) {
          console.log(e.currentTarget.dataset.tobuy_id)//事件的id
          wx.cloud.callFunction({
            name: 'Remove_Assistant_Sell',
            data: {
              youid: e.currentTarget.dataset.tobuy_id,
            },
            success: function (res) {
              that.get_Sell_DBinf();
            }
          })
        }
      }
    })
  },

这里贴一个删除帖子的云函数：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database({ env: 'textllinpro-5br77' })
// 云函数入口函数
exports.main = async (event, context) => {
  const Post_id = event.youid
  return db.collection('Assistant_Sell_DataSheet').doc(Post_id).remove({
  }).then(res => {
    console.log(res);
  })
}

跳转评论功能其实也没啥，就是跳转到另外的页面上去，顺便把数据提取过去。

评论的功能下一章节讲到。

 to_Reply: function (e) {
    let that = this
    console.log(e.currentTarget.dataset.post_id);//事件的id
    console.log(e.currentTarget.dataset.postopenid);//创建表的用户openid
    //console.log(e.currentTarget.dataset)
    that.setData({
      replyData: e.currentTarget.dataset
    })
    console.log(that.data.replyData)
    wx.setStorage({
      key: "key",
      data: that.data.replyData
    })
    wx.navigateTo({
      url: '../Reply_page/Reply_page',
    
    })
  }

这一节最主要的是数据的获取，点赞删除功能原理在前一个项目可获悉。

在onshow里面最好的话要做一个数据获取的刷新，不然如果新发的帖子，再次进来没有进行刷新。

详见微信小程序的生命周期。 

谢谢大家。