回顧

 

上一篇文章講了微信小程序心郵信箱功能的實(shí)現(xiàn)，這節(jié)講代碼心情列表的實(shí)現(xiàn)，這跟上節(jié)信箱列表差不多，只是只顯示自己的心情，這個(gè)就不講了，講下如何添加傾訴心情。

---

目錄結(jié)構(gòu)

 

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

右側(cè)浮動(dòng)添加按鈕

 

<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="輸入標(biāo)題（選）"  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}}">發(fā)布</button>

---

邏輯JS實(shí)現(xiàn)

添加圖片保存到全局變量

 

uploadPic:function(){//選擇圖標(biāo)
    wx.chooseImage({
      count: 1, // 默認(rèn)9
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
      success: function (res) { 
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          isSrc:true,
          src:tempFilePaths
        })
      }
    })
  },

刪除圖片實(shí)現(xiàn)

 

//由于Bmob提供的免費(fèi)空間20G用不完，這里的文件并沒真的刪除服務(wù)端圖片，只是清空了圖片。如需刪除，可以這樣
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("心情內(nèi)容不能為空","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管理后臺(tái)看到對(duì)應(yīng)的數(shù)據(jù)
                  common.dataLoading("發(fā)布心情成功","success",function(){
                      wx.navigateBack({
                          delta: 1
                      })
                  });
                },
                error: function(result, error) {
                  // 添加失敗
                  console.log(error)
                  common.dataLoading("發(fā)布心情失敗","loading");
                  that.setData({
                    isLoading:false,
                    isdisabled:false
                  }) 

                }
            });


          }
        })


    }

  },

至此添加心情功能已經(jīng)完成

 

1.告知一個(gè)小技巧，數(shù)據(jù)庫列表，圖片字段可以點(diǎn)擊直接上傳替換或刪除的，這樣也許你的小程序管理后臺(tái)都不用開發(fā)了。看最下面截圖
2.核心代碼，保存到數(shù)據(jù)庫，下面貼最簡單的源碼

添加標(biāo)題內(nèi)容到數(shù)據(jù)庫

 

      var Diary = Bmob.Object.extend("diary");
      var diary = new Diary();
      diary.set("title","hello");
      diary.set("content","hello world");
      //添加數(shù)據(jù)，第一個(gè)入口參數(shù)是null
      diary.save(null, {
        success: function(result) {
          // 添加成功，返回成功之后的objectId（注意：返回的屬性名字是id，不是objectId），你還可以在Bmob的Web管理后臺(tái)看到對(duì)應(yīng)的數(shù)據(jù)
            console.log("日記創(chuàng)建成功, objectId:"+result.id);
        },
        error: function(result, error) {
          // 添加失敗
          console.log('創(chuàng)建日記失敗');

        }
      });