小程序 朋友圈，点赞 ,评论，发布动态，功能，上传图片 -----发布动态

小程序 朋友圈，点赞 ,评论，发布动态，功能，上传图片 -----发布动态

分析需要实现的功能
一、点击弹出输入内容的弹出框；
1、弹出输入框
2、隐藏那个底部导航条
二、上传图片
1、图片要在选择后，显示在弹出框，
2、图片要在选择后，要能预览，
3、图片要在选择后，要能删除，
4、图片要在选择后，要限制大小上传，
5、图片上传之前，要先进行审核（这部分后端可以进行的，前端需要云函数，我没弄懂，不好意思）
三、点击发表
点击发表的时候要进行内容审核，
1、影藏输入框
2、显示底部导航条

效果

前端相关代码

<view class='pupContentBG {{click?"showBG":"hideBG"}}{{option?"openBG":"closeBG"}}' 
  catchtap='clickPup' > </view>
<view class='pupContent {{click? "showContent": "hideContent"}} {{option? "open": "close"}}' hover-stop-propagation='true'>
  <view class="bgTalkabout"    >
     <view class="profSubmit"> 
       <button bindtap="profiSubmit">发表动态 </button>
     </view> 
     <textarea class="textarea" bindinput='textTapTalk' value='{{talkValue}}' placeholder-class="textClass" placeholder="发表你的感想"> </textarea>
     <view class="choosImg">
       <block wx:for="{{tempFilePaths}}" wx:key="{{index}}" wx:key="index">
         <view class="profList">
           <image class="profImg" src="{{item}}" bindtap="talkPreImg" data-index="{{index}}" mode="aspectFill"></image>
           <image class="deleImg" bindtap="delImage" data-index="{{index}}" src="/yb_mingpian/static/images/red_img/cha@2x.png"> </image>
         </view>
       </block>
       <view class="profList profListAdd "> 
         <image class="addIMg" bindtap="choosImg" 
         src="{{imgUrl}}/4/goods/441080e485fb0a31cdcfe58f99254c35.png" mode="aspectFill"></image>
       </view>
     </view> 
   </view>
</view>
<image src="{{imgUrl}}/4/public/upload/bargain/c8ee99090ae7c4bb078af23139626dd1.png" 			
   class="fixedImg" bindtap="clickPup"></image>

css样式

/* =====发表动态  弹出层====== */
/* 设置显示的背景 */
.pupContent {  width: 100%;  background: #fff;  position: absolute;
  bottom: 0;  box-shadow: 0 0 10rpx #333;  height: 0;  z-index: 999;} 
.showBG {  display: block;}
.hideBG { display: none;}
/* 弹出或关闭动画来动态设置内容高度 */
@keyframes slideBGtUp {
  from {    background: transparent;  }  to {    background: rgba(0, 0, 0, 0.6);  }
}
@keyframes slideBGDown {
  from {    background: rgba(0, 0, 0, 0.6);  }  to {    background: transparent;  }
}
/* 显示或关闭内容时动画 */
.openBG {  animation: slideBGtUp 0.5s ease-in both;}
.closeBG {  animation: slideBGDown 0.5s ease-in both;}
/* 设置显示内容 */
.showContent {  display: block;}
.hideContent {  display: none;}
/* 弹出或关闭动画来动态设置内容高度 */
 
@keyframes slideContentUp {
  from {   height: 0;  }    to {    height: 1100rpx;  }
}
@keyframes slideContentDown {
  from {    height: 1100rpx;  }  to {    height: 0;  }
}
/* 显示或关闭内容时动画 */
.open {
  animation: slideContentUp 0.5s ease-in both;
}
.close {
  animation: slideContentDown 0.5s ease-in both;
}
.textarea{  font-size: 32rpx;  width: auto;  background: #fbfbfb;  margin: 30rpx;
  box-sizing: border-box;  padding: 20rpx;  margin-top: 60rpx;  height: 180rpx;}
.bgTalkabout{  background: #fff;}
.choosImg{    padding: 100rpx 30rpx 0;}
.profList{   width: 140rpx;    height: 140rpx;
    position: relative;    display: inline-block;    margin: 10rpx;
}
.profList .profImg{    width: 120rpx;   height: 120rpx;}
.deleImg{ position: absolute;  right: 0;  top:-10%;  width: 38rpx;  height: 38rpx;
  background: rgba(0, 0, 0, 0.5);  border-radius: 38rpx
}
.addIMg{  width: 120rpx;  height: 120rpx;}
.profListAdd{  background: #fbfbfb;  display: flex;  
justify-content: center;  align-items: center;}
.profListAdd image{  width: 60rpx;  height: 60rpx;}
.profSubmit{  border-top: 1px solid #eaeaea;  display: inline-block;  padding: 20rpx 0 0;}
.profSubmit button{  font-size: 32rpx;  height: 70rpx; line-height: 70rpx;
  background: rgb(13, 189, 145); color: #fff;  float: right;  margin-right: 30rpx;
}
.profSubmit .button-hover {  background: rgb(103, 163, 148);}
 .fixedImg{  position: fixed;   bottom: 10%; right: 6%;   width: 100rpx; height: 100rpx; }

js

  // 用户点击显示动态 弹窗
  clickPup: function() {
    let _that = this;
    if (!_that.data.click) { 
      wx.hideTabBar({ success: function(res) {  }   })
      _that.setData({ click: true,   })
    }
    if (_that.data.option) { 
      _that.setData({    option: false,     })
      // 关闭显示弹窗动画的内容，  
      setTimeout(() => {  _that.setData({ click: false, })
        wx.showTabBar({   success: function(res) {     }   })
      }, 500)
    } else { 
      _that.setData({  option: true })
    }
  } 
  //  选择图片 上传 
  choosImg: function() {
    let that = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], //  指定是原图/压缩图， 
      sourceType: ['album', 'camera'], // 指定来源是相册/相机， 
      success: res => {
        //  本地文件路径列表， 
        let tempFilePaths = res.tempFilePaths;
        let tempF = res.tempFiles; //这个里面有图片大小size 信息
        /**-上传到服务器 */ 
        for (let i = 0; i < tempFilePaths.length; i++) {
          if (tempF[i].size <= 300000) {  
             wx.uploadFile({
             //此处往服务器上传的时候，后端那边要进行图片审核，
               url: netUrl + 's=/web/People/upload_img',
               filePath: tempFilePaths[i],
               name: 'image',//后端规定好的字段的名称
               formData: { 'mch_id': t.siteInfo.uniacid },
               header: {   "Content-Type": "multipart/form-data"  },
               success: function(res) { 
                 wx.showLoading({
                   title: '上传中....',
                   mask: true,
                   success: function(red) {
                     console.log('=', res, red) 
                     that.data.filePathImg.push(res.data)
                     //、将符合规范的图片在弹出框显示
                     that.setData({  tempFilePaths:  that.data.filePathImg})
                    //showLoading 和hideLoading 要配对使用不然会报错，但是界面不受影响
                     wx.hideLoading()
                   }
                 })
               }
             });  
          } else {
       		a.toast('上传图片不能大于3M!')  
          }
        }
      }
    })
  },
 
  // 发布动态
  profiSubmit: function() {
    console.log('filePathImg', this.data.filePathImg)
    let filePathImg = this.data.filePathImg.toString();
    let textTapTalk = this.data.textTalk;  
		var that = this;
    if (textTapTalk) { 
            wx.request({
              url: netUrl + 's=/web/People/send_comment',
              data: {	
	              uid: t.getCache("userinfo").uid,//发表动态的用户id
	              shaya_content: textTapTalk,  //发表的文字内容
	              shaya_sid: filePathImg,   // 图片路径
	              type: 1,
              },
              method: 'post',
              success: (res) => {
                if (res.data.code == 0) {
                	//发表成功后清空数据，影藏弹窗
                    that.onLoad();
				    that.clickPup();
				  	that.setData({
                    talkValue: '',
                    tempFilePaths: [],
                    filePathImg: [], 
                    isTalk: true
                  }) 
				  a.success("发布成功")
                  wx.showTabBar({ success: function(res) { } })
                } else {  
				 a.toast(res.data.message) 
                }
              }, 
            }) 
		}else {
			a.toast("内容不能为空") 
		}
	},
  // 取消发布
  profOff: function() {
    this.setData({ isTalk: true  })
    wx.showTabBar({
      success: function(res) { console.log(res) }
    })
  },
  //失去焦点，获取当前输入框内容，并保存
  textTapTalk: function(e) {
    console.log(e)
    this.setData({
      textTalk: e.detail.value
    })
  },
  // 删除动态
  deteilListdata: function(e) { 
    var listId = e.currentTarget.dataset.listid;//动态 id
    wx.request({
      url: netUrl + 's=amic_del' + '&id=' + listId,
      method: 'get', 
      success: (res) => { 
        this.onLoad();//加载页面数据
        a.success('删除成功')
      }, 
    })
  },
  /**
   * 预览图片方法
   */ 
  talkPreImg: function(e) {
    let index = e.target.dataset.index;
    let that = this;
    wx.previewImage({
      current: that.data.tempFilePaths[index],
      urls: that.data.tempFilePaths,
      success: function(res) {
      wx.showToast({
          title: '正在加载...',
          icon: 'loading',
          mask: true,
          duration: 1000, 
        })
      }
    })
  },
  // 删除图片
  delImage: function(e) {
    let index = e.currentTarget.dataset.index;
    this.data.tempFilePaths.splice(index, 1);
    this.setData({
      tempFilePaths: this.data.tempFilePaths
    })
  },

此项目，功能都实现了，但是有一个瑕疵，就是图片的大小的判断那里，有点不舒服，
没处理好，如果各位仁兄有什么好的办法，欢迎私信我