成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

你的心事我全知曉——心情日記小程序丨實戰(zhàn)

lylwyy2016 / 2289人閱讀

摘要：閑暇之余，聽媳婦嘀咕說要給她做一個能表達她每日心情的小程序，只能她在上面發(fā)東西。既然媳婦發(fā)話了，就花點心思做一個吧，因為沒有圖，所有布局全靠自己瞎編，下面結合圖片和代碼跟大家講解下實現(xiàn)過程，內(nèi)容略長，感興趣的可以一覽。

閑暇之余，聽媳婦嘀咕說要給她做一個能表達她每日心情的小程序，只能她在上面發(fā)東西。既然媳婦發(fā)話了，就花點心思做一個吧，因為沒有UI圖，所有布局全靠自己瞎編，下面結合圖片和代碼跟大家講解下實現(xiàn)過程，內(nèi)容略長，感興趣的可以一覽。
下面將以圖片、代碼的形式和大家講解這個小demo的實現(xiàn)過程：
首頁 首頁效果圖

首頁講解

音樂(下面僅展示音樂相關代碼)


    
    



data () {
  return {
    isPlay: true,
    audioCtx: ""
  }
},
onLoad () {
  const that = this
  that.audioCtx = wx.createAudioContext("myAudio")
  that.getMusicUrl()
},
methods: {
  getMusicUrl () {
    const that = this
    const db = wx.cloud.database()
    const music = db.collection("music")
    music.get().then(res => {
      that.audioUrl = res.data[0].musicUrl
      that.audioCtx.loop = true
      that.audioCtx.play()
    })
  },
  audioPlay () {
    const that = this
    if (that.isPlay) {
      that.audioCtx.pause()
      that.isPlay = !that.isPlay
      tools.showToast("您已暫停音樂播放~")
    } else {
      that.audioCtx.play()
      that.isPlay = !that.isPlay
      tools.showToast("背景音樂已開啟~")
    }
  }
}
.bg_music
  position fixed
  right 0
  top 20rpx
  width 100rpx
  z-index 99
  display flex
  justify-content flex-start
  align-items flex-start
  .musicImg
    width 60rpx
    height 60rpx
  .music_icon
    animation musicRotate 3s linear infinite
  .music_play
    width 28rpx
    height 60rpx
    margin-left -10rpx
    transform-origin top
    -webkit-transform rotate(20deg)
  .playImg
    animation musicStop 1s linear forwards
  .pauseImg
    animation musicStart 1s linear forwards
#myAudio
  display none

1、通過wx.createInnerAudioContext()獲取實例 ，安卓機上音樂能正常播放，IOS上不行，具體原因感興趣的可以去深究一下；

2、由于前面邀請函小程序相關文章發(fā)出后，問的最多的問題依然是音樂無法播放這塊，所以這個demo中就再給大家講解了下實現(xiàn)的原理。

日歷

這里日歷使用了小程序插件，之所以在首頁放一個日歷是為了頁面不顯的太單調(diào)。下面講解下插件是如何使用的：

1、登錄微信公眾平臺>設置>第三方設置>添加插件>搜索相關插件的名字（使用appId搜索更好）>點擊某個插件右側的查看詳情，進入插件詳情頁添加插件，一般都能立馬添加通過；

2、插件詳情里面一般都有使用文檔，或git地址，插件的具體屬性事件都會在文檔里有介紹；

3、下面講解下如何在項目中使用插件：

1、找到src根目錄下的app.json文件，添加如下內(nèi)容： 
// "cloud": true,
"plugins": {
  "calendar": {
    "version": "1.1.3",
    "provider": "wx92c68dae5a8bb046"
  }
}
2、在需要引用該插件的頁面的.json文件中加入如下內(nèi)容： 
{
  // "navigationBarTitleText": "媳婦的心情日記",
  // "enablePullDownRefresh": true,
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}
3、在頁面中直接使用如下（具體屬性方法的意思根據(jù)對應插件有所不同）：

天氣和地址

1、這里我借助的是高德微信小程序SDK;

2、首先獲取使用相關api需要的key值，如下：

3、下載對應SDK（.js文件）并引入到項目中；

4、通過相關api獲取天氣和地址:

getWeather () {
  const that = this
  let myAmapFun = new amapFile.AMapWX({key: "你申請的key"})
  myAmapFun.getWeather({
    success (res) {
      // 成功回調(diào)
      that.address = res.liveData.city
      that.weather = res.liveData.weather + " "
      that.temperature = res.liveData.temperature + "℃"
      that.winddirection = res.liveData.winddirection + "風" + res.liveData.windpower + "級"
    },
    fail (info) {
      // 失敗回調(diào)
      console.log(info)
    }
  })
},

發(fā)表日記

這里涉及到發(fā)表文字圖片內(nèi)容，在個人小程序提交審核后很大可能是不會被通過的，雖然第一次提交我的個人小程序通過審核了，后面幾次審核均未通過，雖然我這里只限制了我和媳婦兩個人能發(fā)日記，其他人壓根看不到右下角的發(fā)布加號，但是審核人員會查代碼，代碼中一旦被他們發(fā)現(xiàn)有類似發(fā)表相關的內(nèi)容或字樣就會導致審核不通過，好在已經(jīng)通過了一次，媳婦能正常寫點東西，也算基本符合要求，遺憾的是后面實現(xiàn)點贊相關的功能都沒有更新到線上。

1、通過唯一的openId來判斷是否顯示首頁右下角的發(fā)布加號；

2、后面會具體講解頁面里上傳圖片到云開發(fā)及存儲到數(shù)據(jù)庫相關功能

點贊功能

1、這里點贊功能借助的小程序云開發(fā)的云函數(shù)來實現(xiàn)的，結合代碼：

    
    
  • 
        
        
        
        
    {{item.desc}}
    
        
    
            {{item.name}}
            {{item.weather}}
        
    
        
    
            {{item.time}}
            
        
    
    
    • 




    

        
提示

        
是否授權使用點贊功能？

        

            
            
        

    


// 獲取日記列表
getDiaryList () {
  const that = this
  wx.cloud.callFunction({
    name: "diaryList",
    data: {}
  }).then(res => {
    that.getSrcFlag = false
    that.diaryList = res.result.data.reverse()
    that.likeList = []
    that.diaryList.forEach((item, index) => {
      item.like.forEach(itemSecond => {
        if (itemSecond.openId === that.openId) {
          that.likeList.push(itemSecond.type)
        }
      })
      if (that.likeList.length < index + 1) {
        that.likeList.push("1")
      }
    })
    wx.hideNavigationBarLoading()
    wx.stopPullDownRefresh()
  })
},
// 點贊或取消點贊
toLike (id, type, arr) {
  const that = this
  that.tempObj = {
    id: id,
    type: type,
    like: arr
  }
  wx.getSetting({
    success (res) {
      if (res.authSetting["scope.userInfo"]) {
        // 已經(jīng)授權，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
            wx.cloud.callFunction({
              name: "like",
              data: {
                id: id,
                type: type,
                like: arr,
                name: that.userInfo.nickName
              }
            }).then(res => {
              if (type === "1") {
                tools.showToast("取消點贊成功")
              } else {
                tools.showToast("點贊成功~")
              }
              // getOpenId()方法里會執(zhí)行一遍獲取日記列表
              that.getOpenId()
            })
          }
        })
      } else {
        that.showDialog = true
      }
    }
  })
},
// 授權獲取用戶信息
login (e) {
  const that = this
  console.log(that.tempObj, e)
  if (e.target.errMsg === "getUserInfo:ok") {
    wx.getUserInfo({
      success: function (res) {
        that.userInfo = res.userInfo
        wx.cloud.callFunction({
          name: "like",
          data: {
            id: that.tempObj.id,
            type: that.tempObj.type,
            like: that.tempObj.like,
            name: that.userInfo.nickName
          }
        }).then(res => {
          if (that.tempObj.type === "1") {
            tools.showToast("取消點贊成功")
          } else {
            tools.showToast("點贊成功~")
          }
          // getOpenId()方法里會執(zhí)行一遍獲取日記列表
          that.getOpenId()
        })
      }
    })
  }
  that.showDialog = false
}

2、首頁獲取日記列表，在存儲日記到數(shù)據(jù)庫集合的時候我會在每條日記對象中添加一個like屬性，like默認是一個空數(shù)組；

3、當用戶點贊或取消點贊時，組件data中tempObj屬性會臨時存儲三個參數(shù)：
①、對應日記的_id；
②、用戶操作的類型是點贊（點贊是‘2’）或是取消點贊（取消點贊是‘1’）；
③、對應日記的like數(shù)組；

4、通過小程序api的wx.getSetting({})來判斷用戶是否已經(jīng)授權。如果授權了獲取用戶信息，未授權則彈框引導用戶點擊確認按鈕去手動授權；

5、授權成功后，拿到用戶信息，我們開始調(diào)用點贊或取消點贊相關的云函數(shù)，如下：

const cloud = require("wx-server-sdk")
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  try {
    // wxContext內(nèi)包含用戶的openId
    const wxContext = cloud.getWXContext()
    // 定義空數(shù)組
    let arr = []
    if (event.like && event.like.length > 0) {
      // 讓定義的數(shù)組等于用戶操作的當前日記下的like數(shù)組
      arr = event.like
      // 定義一個計數(shù)變量
      let count = 0
      // 循環(huán)遍歷，當openId相同時替換like數(shù)組中的相同項，并存儲對應的type
      arr.forEach((item, index) => {
        if (item.openId === wxContext.OPENID) {
          count++
          arr.splice(index, 1, {
            openId: wxContext.OPENID,
            type: event.type,
            name: event.name
          })
        }
      })
      // 當計數(shù)變量為0時，說明在這條日記中，like數(shù)組中未存儲過此用戶，直接push此用戶并存儲type
      if (count === 0) {
        arr.push({
          openId: wxContext.OPENID,
          type: event.type,
          name: event.name
        })
      }
    } else {
      // 如果此條日記like數(shù)組本身就為空，直接push當前用戶并存儲type
      arr.push({
        openId: wxContext.OPENID,
        type: event.type,
        name: event.name
      })
    }
    // 通過云開發(fā)操作數(shù)據(jù)庫的相關api,即update通過_id來更新集合中某條數(shù)據(jù)
    return await db.collection("diary").doc(event.id).update({
      data: {
        like: arr
      }
    })
  } catch (e) {
    console.error(e)
  }
}

6、相關云函數(shù)操作說明都寫在上面的注釋里，有不清楚的歡迎留言，由于點贊功能未更新到線上（原因是因為審核不通過），想體驗的同學可以留下評論，提供體驗權限。

發(fā)表心情 效果圖

講解

1、通過首頁右下角的發(fā)布加號，進入發(fā)布心情頁；

2、地址等相關信息是從首頁通過路由帶過來的；

3、下面重點講解下關于上傳圖片到云存儲并寫入數(shù)據(jù)庫的操作過程，內(nèi)容如下：

upload () {
  const that = this
  wx.chooseImage({
    count: 1,
    sizeType: ["compressed"], // 可以指定是原圖還是壓縮圖，默認二者都有
    sourceType: ["album", "camera"], // 可以指定來源是相冊還是相機，默認二者都有
    success: function (res) {
      wx.showLoading({
        title: "上傳中"
      })
      // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
      let filePath = res.tempFilePaths[0]
      const name = Math.random() * 1000000
      const cloudPath = "picture/" + name + filePath.match(/.[^.]+?$/)[0]
      wx.cloud.uploadFile({
        cloudPath, // 云存儲圖片名字
        filePath // 臨時路徑
      }).then(res => {
        console.log(res)
        wx.hideLoading()
        that.imgUrl = res.fileID
      }).catch(e => {
        console.log("[上傳圖片] 失?。?, e)
      })
    }
  })
},
save () {
  const that = this
  if (that.desc) {
    that.getSrcFlag = false
    const db = wx.cloud.database()
    const diary = db.collection("diary")
    if (that.imgUrl === "../../static/images/default.png") {
      that.imgUrl = "../../static/images/default.jpg"
    }
    diary.add({
      data: {
        desc: that.desc,
        time: tools.getNowFormatDate(),
        url: that.imgUrl,
        name: that.name,
        weather: that.weather,
        address: that.address,
        like: []
      }
    }).then(res => {
      wx.reLaunch({
        url: "/pages/index/main"
      })
    }).catch(e => {
      console.log(e)
    })
  } else {
    tools.showToast("寫點什么吧~")
  }
}

4、這里的cloudPath可以自己定義，存儲到云中是這樣的：

5、我們通過組件data中的imgUrl臨時存儲手動上傳的圖片路徑，最終通過保存按鈕一起存儲到云數(shù)據(jù)庫，存如到數(shù)據(jù)庫是這樣的：

日記詳情頁 詳情頁效果圖

講解

1、詳情就不過多講解，這里利用了一些小程序api，比方說動態(tài)改變頭部標題，每次進入動態(tài)隨機改變頂部標題背景，點贊數(shù)也是從首頁帶過來的；

訪客頁 效果圖

1、授權前

2、授權后

總結 
云開發(fā)雖然能用，但對于大型項目個人還是不推薦，從圖片和數(shù)據(jù)加載這塊的效果來看，傳統(tǒng)服務端拿到的數(shù)據(jù)明顯要快很多，既然有這么一個免費的工具，我想感興趣的同學可以利用起來，玩點小demo，新花樣。
源碼鏈接

https://github.com/TencentClo...

如果你有關于使用云開發(fā)CloudBase相關的技術故事/技術實戰(zhàn)經(jīng)驗想要跟大家分享，歡迎留言聯(lián)系我們哦~比心！

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/106754.html

相關文章

  • 10行代碼實現(xiàn)小程序支付功能！丨實戰(zhàn)

    摘要：前面給大家講過一個借助小程序云開發(fā)實現(xiàn)微信支付的，但是那個操作稍微有點繁瑣，并且還會經(jīng)常出現(xiàn)問題，今天就給大家講一個簡單的，并且借助官方支付實現(xiàn)小程序支付功能。只需要一個簡單的云函數(shù)，就可以輕松的實現(xiàn)微信小程序支付功能。 前面給大家講過一個借助小程序云開發(fā)實現(xiàn)微信支付的，但是那個操作稍微有點繁瑣，并且還會經(jīng)常出現(xiàn)問題，今天就給大家講一個簡單的，并且借助官方支付api實現(xiàn)小程序支付功能。...

    SimpleTriangle 評論0 收藏0

  • 巧用小程序·云開發(fā)實現(xiàn)郵件發(fā)送功能丨實戰(zhàn)

    摘要：七調(diào)用云函數(shù)發(fā)送郵件我們在文件里寫一個按鈕，當點擊這個按鈕時就發(fā)送郵件。到這里我們就完整的實現(xiàn)了微信小程序云開發(fā)使用云函數(shù)發(fā)送郵件的功能了。 先看效果圖： showImg(https://segmentfault.com/img/remote/1460000020151412); 通過上面的日志，可以看出我們是158開頭的郵箱給250開頭的郵箱發(fā)送郵件，下面是成功接收到的郵件。 sho...

    sixgo 評論0 收藏0

  • 用小程序·云開發(fā)打造功能全面的博客小程序丨實戰(zhàn)

    摘要：用小程序云開發(fā)將博客小程序常用功能一網(wǎng)打盡本文介紹博客小程序的詳情頁的功能按鈕如何實現(xiàn)，具體包括評論點贊收藏和海報功能，這里記錄下整個實現(xiàn)過程和實際編碼中的一些坑?？紤]到小程序本身的大小限制，使用的方式是最佳的。 用小程序·云開發(fā)將博客小程序常用功能一網(wǎng)打盡 本文介紹mini博客小程序的詳情頁的功能按鈕如何實現(xiàn)，具體包括評論、點贊、收藏和海報功能，這里記錄下整個實現(xiàn)過程和實際編碼中的一...

    cc17 評論0 收藏0

  • 用小程序·云開發(fā)打造功能全面的博客小程序丨實戰(zhàn)

    摘要：用小程序云開發(fā)將博客小程序常用功能一網(wǎng)打盡本文介紹博客小程序的詳情頁的功能按鈕如何實現(xiàn)，具體包括評論點贊收藏和海報功能，這里記錄下整個實現(xiàn)過程和實際編碼中的一些坑?？紤]到小程序本身的大小限制，使用的方式是最佳的。 用小程序·云開發(fā)將博客小程序常用功能一網(wǎng)打盡 本文介紹mini博客小程序的詳情頁的功能按鈕如何實現(xiàn)，具體包括評論、點贊、收藏和海報功能，這里記錄下整個實現(xiàn)過程和實際編碼中的一...

    flybywind 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<