[移动开发]微信小程序发布动态页面实现

微信小程序发布动态页面实现

小程序的动态发布，对于很多前端工程师们都特别的头疼，那么如何简单的实现的发布页面呢？
wxml页面

<view class="realName">
<form bindsubmit="bindFormSubmit">
  <view>
    <l-input label="标题"  name="title"/>
  </view>
  <view class="content">
    <l-textarea  placeholder="说说你的想法吧..." auto-height="{{true}}" name="content"/>
  </view>
  <view class="image">
    <l-image-picker size="4" bind:linchange="onChangeTap"  name="image" />
  </view>
  <view class="fun">
    <l-list title="添加位置" icon="address" bindtap="siet" />
    <view wx:if="{{sitetext}}">
     <l-input disabled="{{true}}" hide-label="{{true}}" value="{{sitetext}}"/>
    </view>
    <l-list title="趣味标题" icon="history" value=""/>
    <view wx:if="{{title}}">
     <l-input disabled="{{true}}" hide-label="{{true}}" value="{{title}}"/>
    </view>
    <l-list title="私密贴" icon="eye">
    <view slot="right-section">
          <switch checked="{{is_private}}" bindchange="private"/>
    </view>
   </l-list>
  </view>
  <view class="submit">
    <button form-type="submit" type="primary" size="default">发布动态</button>
  </view>
</form>
</view>

js加载

Page({
  data: {
    title:'',
    sitetext:'',
    Imgs:'',
    is_private:false,
  },
  onChangeTap(event){
    let Imgs=event.detail.current;
    let token=wx.getStorageSync('token');
    let Arr=[];
    for(var i=0;i<Imgs.length;i++){
      wx.uploadFile({
        filePath:Imgs[i],
        name: 'file',
        url: 'http://www.sns.com/api/upload',
        header:{
          'content-type': 'application/json', //默认格式
          'Access-Control-Allow-Origin':'*',//跨域问题
          token:token
        },
        success:res=>{
          var result=JSON.parse(res.data)
          Arr.push(result.data)
          this.setData({
            Imgs:Arr
          })
        }
      })
    }
  },
  bindFormSubmit: function(e) {
    let token=wx.getStorageSync('token')
   wx.request({
    url: 'http://www.sns.com/api/sns_create',
    header:{
      'content-type': 'application/json', //默认格式
      'Access-Control-Allow-Origin':'*',//跨域问题
      token:token
    },
    method:"POST",
    data:{
      content:e.detail.value.content,
      title:e.detail.value.title,
      image:this.data.Imgs,
      localtion:this.data.sitetext,
      is_private:this.data.is_private
    },
    success:res=>{
      console.log(res)
      if(res.data.code==200){
        wx.showToast({
          title: '发布成功',
          success: ret => {
            setTimeout(function () {
              wx.navigateBack({
                delta: 1,
              })
            },2000)
          }
        })
      }else{
        wx.showToast({
          title: '发布失败',
          icon:'error',
          success: ret => {
            setTimeout(function () {
              wx.navigateBack({
                delta: 1,
              })
            },2000)
          }
        })
      }
    }
   })
  },
  private(e){
    this.setData({
      private:e.detail.value
    })
  },
  siet(){
    wx.chooseLocation({
      success: (res) => {
        this.setData({
          sitetext: res.address,
        })
      }
    })
  }
})

wxss代码

.realName{
  margin-top: 10rpx;
  width: 100%;
  height: 1400rpx;
  /* border: black 1px solid; */
}  
.content{
  margin-top:20rpx;
}
.image{
  margin-top: 80rpx;
  padding: 10rpx;
  width: 100%;
  height: 200rpx;
}
.fun{
  margin-top: 50rpx;
  width:95%;
  margin-left: 20rpx;
}
.submit{
  margin-top: 200rpx;
}

json代码

{
  "component": true,
  "usingComponents": {
    "l-button":"/miniprogram_npm/lin-ui/button/index",
    "l-input":"/miniprogram_npm/lin-ui/input",
    "l-image-picker":"/miniprogram_npm/lin-ui/image-picker",
    "l-list":"/miniprogram_npm/lin-ui/list",
    "l-textarea":"/miniprogram_npm/lin-ui/textarea"
  }
}