微信心邮小程序开发实战（3）-心情列表与添加-md

回顾

上一篇文章讲了微信小程序心邮信箱功能的实现，这节讲代码心情列表的实现，这跟上节信箱列表差不多，只是只显示自己的心情，这个就不讲了，讲下如何添加倾诉心情。

目录结构

write/
├── write.js
├── write.json
├── write.wxml
└── write.wxss

右侧浮动添加按钮

<navigator class="toWrite" url="../write/write">

样式

.toWrite {
./pages/index/index.wxss:27width:100rpx;
height:100rpx;
background:url(http://bmob-cdn-7744.b0.upaiyun.com/2016/11/29/360d32564024a5ab80e4477169949473.png) no-repeat;
padding:0;
background-size:cover;
position:fixed;
right:74rpx;
bottom:100rpx;
border-bottom:0;
border-top:0;
}

write.wxml 页面布局

<loading hidden="{{loading}}">
  页面初始化中...
</loading>
    <view class="add_pic" bindtap="uploadPic" wx-if="{{!isSrc}}">
        <view>添加图片（选）</view>
    </view>
    <view wx:if="{{isSrc}}" class="image_box">
        <view  class="picPre">
            <image src="{{src}}"  mode="aspectFill"></image>
            <view bindtap="clearPic"></view>
        </view>
    </view>
    
    <input placeholder="输入标题（选）"  class="add_title" value="" bindinput="setTitle"/>
    <view  class="addConent">
        <textarea  placeholder="记下这一刻的心情" maxlength="1000"  value="" bindblur="setContent"/>
    </view>
    <label for="changePublic">
        <switch checked="{{isPublic}}" bindchange="changePublic" type="checkbox" name="is_hide"/>
        <text>邮寄心情</text>
    </label>
    <button bindtap="sendNewMood" data-content="{{content}}" loading="{{isLoading}}" data-title="{{title}}" hover-start-time="200" disabled="{{isdisabled}}">发布</button>

逻辑JS实现

添加图片保存到全局变量

uploadPic:function(){//选择图标
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) { 
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          isSrc:true,
          src:tempFilePaths
        })
      }
    })
  },

删除图片实现

//由于Bmob提供的免费空间20G用不完，这里的文件并没真的删除服务端图片，只是清空了图片。如需删除，可以这样
delImg: function () {//图片删除
    var path;
    //删除第一张
    path = 图片路径;
    var s = new Bmob.Files.del(path).then(function (res) {
      if (res.msg == "ok") {
        console.log('删除成功');
        common.showModal("删除成功");
      }
      console.log(res);
    }, function (error) {
      console.log(error)
    }
    );
  },
--------------心邮目前的代码-------------------
clearPic:function(){//删除图片
    that.setData({
      isSrc:false,
      src:""
    })
  },

上传保存至表里

,
  sendNewMood: function(e) {//保存心情
    //判断心情是否为空

    var content=e.target.dataset.content;
    var title=e.target.dataset.title;
    if(content==""){
      common.dataLoading("心情内容不能为空","loading");
    }
    else{
        that.setData({
          isLoading:true,
          isdisabled:true
        }) 
        wx.getStorage({
          key: 'user_id',
          success: function(ress) {
              var Diary = Bmob.Object.extend("Diary");
              var diary = new Diary();
              var me = new Bmob.User();
              me.id=ress.data;
              diary.set("title",title);
              diary.set("content",content);
              diary.set("is_hide",that.data.ishide);
              diary.set("publisher", me);
              diary.set("likeNum",0);
              diary.set("commentNum",0);
              diary.set("liker",[]);
              if(that.data.isSrc==true){
                  var name=that.data.src;//上传的图片的别名
                  var file=new Bmob.File(name,that.data.src);
                  file.save();
                  diary.set("pic",file);
              }
              diary.save(null, {
                success: function(result) {
                  that.setData({
                    isLoading:false,
                    isdisabled:false
                  }) 
                  // 添加成功，返回成功之后的objectId（注意：返回的属性名字是id，不是objectId），你还可以在Bmob的Web管理后台看到对应的数据
                  common.dataLoading("发布心情成功","success",function(){
                      wx.navigateBack({
                          delta: 1
                      })
                  });
                },
                error: function(result, error) {
                  // 添加失败
                  console.log(error)
                  common.dataLoading("发布心情失败","loading");
                  that.setData({
                    isLoading:false,
                    isdisabled:false
                  }) 

                }
            });


          }
        })
        
      
    }
    
  },

至此添加心情功能已经完成

1.告知一个小技巧，数据库列表，图片字段可以点击直接上传替换或删除的，这样也许你的小程序管理后台都不用开发了。看最下面截图
2.核心代码，保存到数据库，下面贴最简单的源码

添加标题内容到数据库

      var Diary = Bmob.Object.extend("diary");
      var diary = new Diary();
      diary.set("title","hello");
      diary.set("content","hello world");
      //添加数据，第一个入口参数是null
      diary.save(null, {
        success: function(result) {
          // 添加成功，返回成功之后的objectId（注意：返回的属性名字是id，不是objectId），你还可以在Bmob的Web管理后台看到对应的数据
            console.log("日记创建成功, objectId:"+result.id);
        },
        error: function(result, error) {
          // 添加失败
          console.log('创建日记失败');

        }
      });