小程序笔记（三）模仿企鹅社区给予用户，灵活发帖展示自我的操作

最近上头说做一个社区给用户发帖讨论分享信息，做一个本地区社区，其实是在这个社区上捆定集团事业部的各大产业（物流，仓库，搞在一起，还想搞大吞并某其他事业部的产业），不算得上真正的地区社区。

然后就查下网上的社区是什么样发帖的，不过大多数都是这样上面文字下面图就如此简单，

但是我想这个真的有点简单，后来我发现了马总的企鹅很牛所以就模仿下

我觉得这才是发帖，就像ppt一样图片中夹渣这文字才生动有趣。

上面的不难重要的是下面的+号，他可以在任意位置插入图片或者文字，非常骚

其实实现这个操作不难就是对javascript的splice()这个方法进行操作

不多废话直接开始

先做个页面吧比较简陋

 <view style='width:100%;font-size:50rpx;text-align: center;margin:10rpx 0 50rpx 0;' wx:if="{{images.length==0}}" data-idx='-1' bindtap='add'>添加图片</view>
  <block wx:for="{{images}}">
    <view data-id='{{index}}' bindlongtap='de'>
      <view class='ge'></view>
      <view class='biv'>
        <view class='iv'>
          <image src='{{item.url}}' style='width:95%;' mode='widthFix'></image>
        </view>
        <view class='it'>
          <textarea class='t' maxlength="200" placeholder="添加图片描述..." value='{{item.describes}}' data-url='{{item.url}}' data-id="{{index}}" bindinput='idescribes'></textarea>
        </view>
      </view>
      <view class='add' data-idx='{{index}}' bindtap='add'>+</view>
    </view>
  </block>

然后就是js

var comm = require("../../utils/comm.js");

data: {
    images:[],
  },

comm是我抽取出去的一个反复使用的微信api如这个选择图片如获取openid登录

var util = require('/util.js');

function choosephoto() {
  var c = util.wxPromise(wx.chooseImage);
  return c({
    sizeType: ['original', 'compressed'],
    sourceType: ['camera', 'album'], 
  }).then(function(res) {
    return Promise.resolve(res);
  }).catch(function(err) {
    console.log(err)
    return Promise.reject(err)
  });
}

module.exports = {
  choosephoto: choosephoto,
}

点击添加事件

add:function(e){
    var _this=this;
    var cb = _this.data.images;
    var a = e.currentTarget.dataset.idx;
    comm.choosephoto().then(function (res) {
      cb.splice(Number(a) + 1, 0, {
        url: res.tempFilePaths[0],
        describes: '',
      })
      _this.setData({
        images:cb,
      })
    })
  /**/
  },

添加时间完成

再加个长按删除事件

  de:function(e){
    var _this=this;
    var cb=_this.data.images;
    var a = e.currentTarget.dataset.id;
    wx.showModal({
      title: '提示',
      content: '确认删除图片吗',
      success: function (res) {
        if (res.confirm) {
          cb.splice(a, 1)
          _this.setData({
            images: cb,
          })
        } else if (res.cancel) {}
      }
    });
  },

然后就这么简单

效果图

点击添加图片

再点击加号

再点击中间的加号在他们中间插一张图片

提示下，这些图片都没有上传的都是在data.image里面到时循环这个js方法上传，没办法小程序不可以一次性上传所以也是只能循环上传了，由于多个地方用到所以抽取出到comm.js哪里

function ul(url,file,filename,param){
  var u = util.wxPromise(wx.uploadFile);
  return u({
    url: url,
    filePath: file,
    name: filename,
    formData: param,
  }).then(function(res){
    return Promise.resolve(res)
  }).catch(function(err){
    consoel.log(err)
    return Promise.reject(err)
  });
}

发帖时循环就是了，注意小程序小坑，他返回信息的是字符串，所以要自己转换下json，JSON.parse(res)，还有注意数字向加时加个Number套着，否则的话就是字符串相加了， Number(_this.data.fn) + 1

 for (var i = 0; i < _this.data.images.length; i++) {
        console.log(i)
        comm.ul(ports.wx_icimg, _this.data.images[i].url, 'file', {参数}).then(function (res) { var data = JSON.parse(res); if (data.status == 1) { _this.setData({ fn: Number(_this.data.fn) + 1 }) } }).catch(function (errr) { console.log(err) })
      }

该功能就是对splice（）方法的熟练操作。其实这个方法挺好玩的。

小程序笔记（三）模仿企鹅社区给予用户，灵活发帖展示自我的操作

猜你喜欢