山东大学项目实训——地图圈系统——微信小程序（15）

一、发布动态功能

点击地图有一个分享按钮，也可以在社区出进行发布动态，有内容和图片。上传的数据有用户名、用户头像、发布时间、发布地点、发布内容和发布的图片等。
其中图片有一个图片选择器，是 wx.chooseImage方法。从本地相册选择图片或使用相机拍照。

参数：

属性	类型	默认值	必填	说明
count	number	9	否	最多可以选择的图片张数
sizeType	Array.	[‘original’, ‘compressed’]	否	所选的图片的尺寸
sourceType	Array.	[‘album’, ‘camera’]	否	选择图片的来源
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths
  }
})

二、项目代码

send.wxml文件：

<!--pages/send/send.wxml-->
<navBar 
    title-text="分享" 
    back-icon="../../src/images/back@3x.png"
    background="#f2f2f2"
    bindback="back"/>


<view class="page">
<!-- <view class="ac">
  <view class="cu-avatar  round margin-left" style="background-image:url({{userInfo.avatarUrl}});"></view>
  
</view>
<view class='bc'>
  <view class="solid-bottom text-xl padding">
        <text class="text-black text-bold">您的订单已提交成功！</text>
      </view>
</view> -->
<view class="pposi" >
    <image class="ac" src="{{userInfo.avatarUrl}}" mode="aspectFit"></image>
    <view class="bc" >{{userInfo.nickName}}</view>
     
  </view>
<view class='page1'>
  
  <textarea class='text1' bindinput="input" placeholder-class='ph' placeholder="分享新鲜事..." auto-height/>

  <view class="image_content">
    <view class='image1' wx:for="{{img_url}}">
      <image class="moment_img" src="{{item}}"></image>
      <image class="closeImv1" src="../../src/images/close.png" mode="scaleToFill" bindtap="deleteImvBanner" data-id="{{index}}"></image>

    </view>
    <view class='image' style='display:{{hideAdd?"none":"block"}}'>
      <image bindtap="chooseimage" class="moment_img" src='../../src/images/choose-img2.png'></image>
    </view>
  </view>
  <view class="pposi" bindtap="chooselocation">
    <image class="write_logo1" src="../../src/images/position.png" mode="aspectFit"></image>
    <view class="write1" wx-if="{{!location}}">所在位置（默认）</view>
    <view class="write2" wx-if="{{location}}">{{location}}</view>   
  </view>
  <!-- <button bindtap="send" style='margin-right:5px;margin-left:5px;margin-top:50rpx;'>发布</button> -->
  <view class="padding">
  <button bindtap="send" class="cu-btn block bg-blue margin-tb-sm lg" >发布</button>

</view>
</view>
</view>

send.wxss文件：

@import "../../colorui/main.wxss";
@import "../../colorui/icon.wxss";
.page{
  height: 88%;
  background-color: white;
}
.ac{
  flex:1;
  width: 80rpx;
  height: 80rpx;
  border-radius: 25%;
  overflow:hidden;
  margin-top: 5rpx;
  
}
.bc{
  flex:5;
  padding: 0;
  /* margin: 0; */
  display: flex;
  /* height: 70rpx; */
  justify-content: left;
  align-items: center;
  font-size: 35rpx;
  font-weight: bold;
 
}
.page1{

  padding: 10px;
  background-color: white;

  
} 
 
.ph{
  font-size: 40rpx;
}
.text1{
  
  width: 100%;
  margin-bottom: 40px;
  font-size: 20px;
  padding: 1px
}
 
.image1{
  width:31%;
  height: 100px;
  padding: 2px;
  position: relative;
}
 
.moment_img{
  width: 78px;
  height: 78px;
}
 
.image_content{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  margin-bottom: 20px
}

.pposi{
   height: 100rpx;
    width: 100%;
    margin-top: 8rpx;
    display: flex;
    
    background-color: white;
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
}
.write_logo1{

    flex:1;
    width: 50%;
    height: 65rpx;
    margin-top: 15rpx;
   
  }
  .write1{
    flex:5;
    padding: 0;
    /* margin: 0; */
    display: flex;
    /* height: 70rpx; */
    justify-content: left;
    align-items: center;
    font-size: 30rpx;
    font-weight: bold;
  }

  .write2{
    flex:5;
    padding: 0;
    /* margin: 0; */
    display: flex;
    /* height: 70rpx; */
    justify-content: left;
    align-items: center;
    font-size: 30rpx;
    font-weight: bold;
    /* color: #6fec6a; */
  }

.image_content .image1 .closeImv1 {
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  width: 50rpx;
  height: 50rpx;
}

send.js文件：

// pages/send/send.js
import { request } from "../../requests/index.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    img_url: [],
    content: '',
    hideAdd:0,
    location:'',
    img:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    this.setData({
      location:options.address,
    })
    var value = wx.getStorageSync('firstuser');
    console.log(value)
    this.setData({
      userInfo:value
    })
  },
  input: function (e) {
    this.setData({
      content: e.detail.value
    })
  },  
  chooseimage: function () {
    var that = this;
    var FSM = wx.getFileSystemManager();
    wx.chooseImage({
      count: 9, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
      success: function (res) {
        console.log(that.data.img_url.length)
        if (res.tempFilePaths.length > 0) {

          //图如果满了9张，不显示加图
          if (that.data.img_url.length == 8) {
            that.setData({
              hideAdd: 1
            })
          } else {
            that.setData({
              hideAdd: 0
            })
          }

          //把每次选择的图push进数组
          let img_url = that.data.img_url;
          console.log("我是第一"+img_url)
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            img_url.push(res.tempFilePaths[i])
            // FSM.readFile({
            //   filePath: res.tempFilePaths[i],
            //   encoding: "base64",
            //   success: function(data) {
            //     img_url.push(data.data)

            //   }
            
            // });
            // wx.request({
            //   url: 'http://8.140.117.15:8800/dongtai/sevelupload',
            //   method:'POST',
            //   data:{
            //     file:img_url
            //   },
              
            //   success:function(res){
            //     console.log(res)
            //   }
            // })

          }
          

          that.setData({
            img_url: img_url
            
          })
          console.log("我是第二"+img_url)

          var imgUrl = res.tempFilePaths[0];
          var img=that.data.img
          wx.uploadFile({
            //上传图片的网路请求地址
            url: 'http://8.140.117.15:8800/dongtai/sevelupload',
            //选择
            filePath: imgUrl,
            name: 'file',

            success: function (res) {
              console.log(typeof res.data);
              var imglist = JSON.parse(res.data);
              console.log(imglist)
              img.push(imglist.listStr)
              that.setData({
                img,
              })
              
            },

            fail: function (res) {
              console.log("error");
            }
          });
        }

      }
    })
  },
  //发布按钮事件
  send: async function () {
    var that = this;
    var value = wx.getStorageSync('firstuser')
    var date = new Date();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentDate = date.getFullYear() + "-" + month + "-" + strDate
      + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
      var str='';
      for(let i=0;i<this.data.img.length;i++){
        console.log(this.data.img[i])
        
        if(i==this.data.img.length-1){
          str+=this.data.img[i]
        }else{
          str+=this.data.img[i]+','
        }
        
      }
      console.log("我是str"+str)
    var a={
      username:value.nickName,
      content:this.data.content,
      location:this.data.location,
      head_img:value.avatarUrl,
      time:currentDate,
      // img_list: JSON.stringify(this.data.img),
      img_list: str,
      ilike:"",
      comment:""
    }
    console.log(a)
    wx.request({
      url: 'http://8.140.117.15:8800/dongtai/wxfabu',
      method: "POST" ,
      data:a,
      success:function(res){
        console.log(res)
        wx.showToast({
          title: "发布成功！",
          duration: 1000,
          icon: "sucess",
          make: true
        });
        wx.switchTab({
          url: '/pages/navigation/navigation',
          success: function (e) {
            var page = getCurrentPages().pop();
            if (page == undefined || page == null) return;
            page.onLoad();
          }
        })
      }
    })
    // var result = await request({ url: 'http://8.140.117.15:8800/dongtai/fabu', data: a, method: "POST" });
    // if(result.data){
    //   wx.switchTab({
    //     url: '/pages/community/community',
    //     success: function (e) {
    //       var page = getCurrentPages().pop();
    //       if (page == undefined || page == null) return;
    //       page.onLoad();
    //     }
    //   })
    // }else{
    //   wx.showToast({
    //     title: '上传失败',
    //     image:'../../src/images/cry.png'
    //   })
    // }
    // wx.showLoading({
    //   title: '上传中',
    // })
    // that.img_upload()
  },
  deleteImvBanner(e){
    var index = e.currentTarget.dataset.id
    var img_url=this.data.img_url
    var img=this.data.img
    img_url.splice(index,1)
    img.splice(index,1)
    this.setData({
      img_url,
      img,
      hideAdd: 0
    })
  },
  chooselocation(){
    var that=this
    wx.chooseLocation({
      success: function(res) {
        console.log(res)
        var name=res.name
        that.setData({
          location:name,
        })
      },
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

三、效果展示

点击叉号可以取消：


可以进行位置的选择。