1.send.js檔案，新增資料及方法

// pages/send/send.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    tabs1: [
      {
        text: '首頁',
      },
      {
        text: '釋出',
      },
      {
        text: '查詢',
      },
      {
        text: '我的',
      },
    ],
    items: [
      { name: '1', value: '證件' },
      { name: '2', value: '書籍' },
      { name: '3', value: '服飾' },
      { name: '4', value: '食品' },
      { name: '5', value: '其他' }
    ],
    images: [],
    category:"",
    content:""
  },
    
    //單選框選擇事件
  radioChange: function (e) {
    console.log('radio發生change事件，攜帶value值為：', e.detail.value);
    this.setData({
      category: e.detail.value
    })
  },

  //上傳圖片
  chooseImage() {
    var that = this;
    if (this.data.images.length < 3) {
      wx.chooseImage({
        sizeType: ['original', 'compressed'],
        success: function (res) {
          that.setData({
            images: that.data.images.concat(res.tempFilePaths)
          })
        }
      })
    } else {
      wx.showToast({
        title: '最多上傳三張圖片',
        icon: 'loading',
        duration: 3000
      });
    }
  },

  // 刪除圖片
  deleteImg: function (e) {
    var imgs = this.data.images;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      images: imgs
    });
  },
  //失去焦點時獲取輸入框內容
  bindTextAreaBlur: function (e) {
    console.log(e.detail.value)
    this.setData({
      content: e.detail.value,
    })
  },
  //失物招領表單的提交
  lostandfoundMsgFormSubmit(e){
    var category = this.data.category;
    var content=this.data.content;

    //test
       console.log("category:"+category);
       console.log("content:"+content);
      var images=this.data.images;
      for(var i=0;i<images.length;i++){
        console.log("圖片地址："+images[i]);
      }
      this.setData({
        images:[]
      });
     wx.showToast({
       title: '釋出成功',
       duration:2000
     })
  },
//選單導航欄的跳轉
  handleChange(e) {
    const index = e.detail.value;
    console.log(e);
    console.log("value: " + e.detail.value);
    switch (index) {
      case 0:
        wx.redirectTo({
          url: '/pages/lostandfound/lostandfound',
        })
        break;
      case 1:
        // wx.navigateTo({
        //   url: '/pages/send/send',
        // })
        break;
      case 2:
        wx.redirectTo({
          url: '/pages/find/find',
        })
        break;
      case 3:
        wx.redirectTo({
          url: '/pages/userMsg/userMsg',
        })
        break;
    }
  },
  handleSelected() {
    this.setData({
      index: 2,
    });
  },
  handleClick(e) {
    const { index, title } = e.detail;
    console.log('點選了tab:' + index, title);
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})
 

2.send.json檔案中引入相應的UI元件

  {
    "usingComponents": {
      "w-button": "/dist/w-button/index",
      "w-tabs": "/dist/w-tabs/index",
          "w-cell": "/dist/w-cell/index",
          "w-cell-group": "/dist/w-cell-group/index",
          "w-input": "/dist/w-input/index"
    }
  }

3.send.wxss檔案

/* pages/send/send.wxss */
.tabs{
  position: fixed;
  width: 100%;
  bottom: 0;
}

.big-logos {
  float: left;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  width: 100%;
  height: 200rpx;
  border: 1px solid #ccc;
}
.big-logos .big-logos_img {
  float: left;
  width: 100%;
  height: 200rpx;
}
.big-logos .big-logos_img image {
  float: left;
  width: 250rpx;
  height: 200rpx;
}



.big-logos .logoinfo {
  float: left;
 width: 250rpx;
  height: 200rpx;
  margin-top: -196rpx;
}
.big-logos .logoinfo image {
  float: left;
  width: 250rpx;
  height: 200rpx;
}
.delete-btn{
  width: 10%;
  height: 50rpx;
}
.submit-btn-view{
  margin-top: 50rpx;
}
.submit-btn{
   background-color: green;
   color: white;
}

.space{
  width: 100%;
  height: 80rpx;
}
 

4.send.wxml檔案

<!--pages/send/send.wxml-->
  <view>
      <form bindreset="lostandfoundMsgFormSubmit">
        <label>1.選擇類別</label>
          <radio-group class="radio-group" bindchange="radioChange">
             <label class="radio" wx:for="{{items}}">
                <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
             </label>
          </radio-group>
          <!-- 留下距離-->
          <view class='space'></view>
        <label>2.輸入內容</label>
          <w-cell-group>
  	          <!-- <w-input clear count="200" type="textarea" placeholder="輸入"	bindblur='bindTextAreaBlur'/> -->
              <textarea placeholder="請輸入200字以內" bindblur='bindTextAreaBlur' maxlength='200'></textarea>
          </w-cell-group>
  
           <!-- 留下距離-->
          <view class='space'></view>
        <label>3.上傳圖片</label>
  
        
        <!-- 圖片上傳-->
             <view class="big-logos">
          <view class='big-logos_img'>
             <image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image> 
             <image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image> 
            <image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image>   
          </view>
          <block wx:for="{{images}}" wx:key="{{index}}"> 
              <view class='logoinfo'>    
                <image src='{{item}}' catchtap='deleteImg'></image>    
              </view>
  
          </block>    
        </view> 
         <!-- 圖片上傳-->
   
                <!-- 留下距離-->
          <view class='space'></view>
          <view class='submit-btn-view'>
                   <button formType="reset" class='submit-btn' >釋出</button>
          </view>
  
      </form>
  </view>
  <view class='tabs'>
     <w-tabs bind:onChange="handleChange" currentIndex="1" options="{{ tabs1 }}" />
  </view>
 

5.資訊釋出頁面執行效果圖