宅男在线永久免费观看网直播,亚洲欧洲日产国码无码久久99,野花社区在线观看视频,亚洲人交乣女bbw,一本一本久久a久久精品综合不卡

全部
常見問題
產(chǎn)品動態(tài)
精選推薦

微信小程序云開發(fā)快速入門（3/4）

管理 管理 編輯 刪除
CRMEB-慕白寒窗雪 2023-08-07 09:52:30
其他

前言

在《微信小程序云開發(fā)快速入門（2/4）》分享中，我們已經(jīng)將列表的查詢和分頁全部搞定了，可以說對于備忘錄來說已經(jīng)非常好用了，此時此刻碼仔在腦海中已經(jīng)開始幻想自己走上了人生的巔峰場景了。

接下來那來分析下需求的具體步驟：
圖片替換需求

  1. 選擇圖片
  2. 上傳圖片
  3. 再次上傳
  4. 選擇圖片
  5. 刪除圖片

在這里需要對圖片的數(shù)據(jù)管理，同時還需要上傳到云存儲當(dāng)中去。

本地圖片操作

布局走起

很久沒有寫布局樣式了，是不是有些生疏了？感覺復(fù)習(xí)一下，溫故知新。當(dāng)我們要調(diào)試一個頁面的樣式的時候，首先需要鎖定當(dāng)前的編譯模式：

156fd202308070946341519.png

先在頭部使用 image 圖片組件區(qū)域放上一個拍照的icon，當(dāng)用戶點(diǎn)擊icon的時候我們就去選擇圖片。

 <!-- 頭部 -->
  <view class="head-bg">
  <!-- 省略無關(guān)布局 -->
    <image class="img-add" src="../../images/img_add.png"></image>
  </view>

然后再給它配置上樣式把位置大概放在茶杯上面去，使用 position 定位。

.img-add{
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 65rpx;
  top: 450rpx;
}

最終的效果

37a1520230807094652650.png

然后通過 bindtap 綁定一個點(diǎn)擊事件起去選擇圖片。

<image bindtap="chooseImg" class="img-add" src="../../images/img_add.png" />

選擇圖片

在這個 chooseImg 方法中，可以通過 wx.chooseImage() 從本地相冊選擇圖片或使用相機(jī)拍照。

wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'],
      success (res) {
        // 由于是數(shù)組然后只取一張圖片，所以默認(rèn)取下標(biāo)為0的圖片
        console.log(res.tempFilePaths[0])
      }
    })

chooseImage 參數(shù)解釋：

  • count：可以選擇的照片數(shù)量，默認(rèn)為9張
  • sourceType：選擇圖片的來源，默認(rèn)可以從手機(jī)和相機(jī)中都支持。
  • sizeType：所選的圖片的尺寸，默認(rèn)是原圖和壓縮圖都支持。
  • success（res）

替換圖片

選擇完成之后，接下里就要把圖片來顯示出來，先在data中定義一個變量存放已經(jīng)選擇好的圖片路徑。

data: {
    topImgUrl:''
  }

然后把獲取到的值存放在這個變量中

chooseImg(){
    let that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        that.data.topImgUrl = res.tempFilePaths[0]
      }
    })
  }

之前背景圖片是通過在 css 中使用 background-image 屬性設(shè)置的。

.head-bg {
  width: 750rpx;
  height: 540rpx;
  background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png');
  background-size: 100% 100%;
}

小程序無法把參數(shù)傳遞到css里面只能在wxml里面，所以我們需要把寫成行內(nèi)樣式。

 <!-- 頭部 -->
  <view class="head-bg" style="background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png');" >
   <!-- 省略無關(guān)布局 -->
  </view>

然后把 topImgUrl 對圖片路徑進(jìn)行替換

<!-- 頭部 -->
   <view class="head-bg" style="background-image: url('{{topImgUrl}}');" >
    <!-- 省略無關(guān)布局 -->
  </view>

然后運(yùn)行一下看效果：

d17a6202308070947325662.png

這個時候我們會發(fā)現(xiàn)一開始進(jìn)來用戶沒有圖片，所以需要給 topImgUrl 設(shè)置一個默認(rèn)值。

 data: {
    topImgUrl:'https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png'
  }

012d4202308070947444288.png

然后我們再選擇相片試試看效果，我們會發(fā)現(xiàn)還是沒有效果，因為不支持本地圖片。那么這個時候我們就需要上傳到云存儲。

圖片上傳云存儲

云端文件存儲，自帶 CDN 加速，支持在前端直接上傳/下載，可在云開發(fā)控制臺可視化管理。

云存儲可視化

這張默認(rèn)圖片其實(shí)就是我們之前手動上傳到云存儲上面的，打開云開發(fā)控制面板選擇「存儲」可以看到之前上傳的背景圖和氣泡圖。

a02dc20230807094755314.png

除了可以直接對文件進(jìn)行管理之外，它還支持像云數(shù)據(jù)庫一樣設(shè)置權(quán)限。

cab1a202308070948051024.png

以及還支持緩存配置，支持多種配置策略。

5511c202308070948144488.png

上傳到云存儲

話不多說，接下來通過小程序把選擇好的圖片上傳到云存儲中去，在這里要使用 wx.cloud.uploadFile 將本地資源上傳至云存儲空間。

wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 文件路徑
}).then(res => {
  // get resource ID
  console.log(res.fileID)
})

uploadFile 參數(shù)解釋：

  • cloudPath：路徑名稱
  • filePath：文件路徑
  • 返回值 res

通過上傳代碼結(jié)合剛才到選擇圖片代碼

chooseImg: function () {
    const that = this
    wx.chooseImage({
      count: 1, // 只選擇一張圖片
      sizeType: ['compressed'], // 使用壓縮圖
      sourceType: ['album', 'camera'], // 支持照相，相冊
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上傳第一張圖片
        // 生成規(guī)則：文件夾路徑 + 時間戳 + 隨機(jī)數(shù) + 文件后綴
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('上傳成功后獲得的res：', res)
            that.setData({
              topImgUrl:res.fileID
            })
          },
          fail:err=>{
            console.log(err)
          }
        })
      }
    })
  }

上傳成功 res

2ba1b202308070948332344.png

存儲管理，自動生成了一個文件夾且圖片上傳到這里來了

21fbb202308070948422641.png

刪除在線文件

當(dāng)然上傳那就肯定有刪除，因為總會有不喜歡的圖片需要刪除。需要使用 wx.cloud.deleteFile 從云存儲空間刪除文件。

wx.cloud.deleteFile({
  fileList: ['cloud://demo-3gf9i3wu06a03ab1.6465-demo-3gf9i3wu06a03ab1-1306451997/top-img/1627462991919-39954.png']
}).then(res => {
  console.log(res.fileList)
})

deleteFile 參數(shù)解釋：

  • fileList：文件ID數(shù)組
  • 返回值 res

接下來我來拿剛才的文件ID來使用看下返回結(jié)果

097d2202308070948599312.png

獲取在線鏈接

當(dāng)獲取到FileID還是無法顯示，這個時候需要通過FileID去獲取圖片路徑，使用 wx.cloud.getTempFileURL 用云文件 ID 換取真實(shí)鏈接。

wx.cloud.getTempFileURL({
  fileList: ['cloud://xxx', 'cloud://yyy'],
  success: res => {
    // get temp file URL
    console.log(res.fileList)
  },
  fail: err => {
    // handle error
  }
})

getTempFileURL 參數(shù)解釋：

  • fileList：文件ID數(shù)組
  • 返回值 res

接下來我來拿剛才的文件ID來使用看下返回結(jié)果

a04fd202308070949139927.png

接下來我們需要娶到路徑，最終代碼

chooseImg: function () {
    const that = this
    // 1. 選擇圖片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上傳第一張圖片
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        console.log(cloudPath)
        // 2. 上傳圖片
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            // 3. 獲取鏈接
            wx.cloud.getTempFileURL({
              fileList: [res.fileID],
              success: res => {
                that.setData({
                  topImgUrl: res.fileList[0].tempFileURL
                })
              }
            })
          }
        })
      }
    })
  }

終于通過幾經(jīng)波折上傳到圖片顯示出來了

afda7202308070949285143.png

相信你看到這里，肯定會吐槽為什么這么麻煩？能不能簡單點(diǎn)？
當(dāng)然可以，其實(shí)我們可以省略一步，就是去獲取鏈接，因為 image 組件的 src 屬性支持文件ID，這樣機(jī)會你需要獲取鏈接這一步驟了。

除此之外可以看到如果是自定義頭部圖片氣泡就沒有存在的意義了，因為會擋住圖片本身的內(nèi)容，所以我們就做個調(diào)整，如果有自定義圖片就顯示一張圖片，如果沒有就按照原來的設(shè)計來。

  1. 修改布局，抽象出來樣式
/* 頭部大小 */
.head {
  width: 750rpx;
  height: 540rpx;
}
/* 頭部背景 */
.head-bg {
  background-image: url('https://6465-demo-3gf9i3wu06a03ab1-1306451997.tcb.qcloud.la/head_bg.png');
  background-size: 100% 100%;
}
  1. 具體布局結(jié)構(gòu)變化，通過topImgUrl這個參數(shù)來控制顯示隱藏
<!-- 頭部 -->
  <image wx:if="{{fileID}}" src="{{fileID}}" class="head"></image>
  <view wx:if="{{! fileID}}" class="head head-bg" >
    <view bindtap="randomMsg" class="head-bubble">
      <!-- 頭像 -->
      <view class="user-avatar">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <!-- 問候語 -->
      <text>，{{message}}</text>
    </view>
    <image bindtap="chooseImg" class="img-add" src="../../images/img_add.png" />
  </view>
  1. 上傳圖片完整代碼
chooseImg: function () {
    const that = this
    // 選擇圖片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上傳第一張圖片
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        // 上傳圖片
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
          // 設(shè)置文件ID
            that.setData({
              fileID: res.fileID
            })
          }
        })
      }
    })
  },

雖然效果以及達(dá)到了，但是這樣還是有個問題就是下次進(jìn)來還是顯示默認(rèn)的圖片，數(shù)據(jù)沒有保存下來，所以這個時候要用到我們學(xué)到的數(shù)據(jù)庫操作，如果將背景數(shù)據(jù)進(jìn)行在云端數(shù)據(jù)庫管理？

背景圖片管理

別小看這個功能，這個功能雖然在之前我們已經(jīng)實(shí)現(xiàn)了小程序端的業(yè)務(wù)，但是在數(shù)據(jù)邏輯處理，還是有些東西需要思考全面的。

按照慣例，先分析具體實(shí)現(xiàn)思路：

  1. 新建背景集合存放背景信息
  2. 保存背景的時候需添加記錄
  3. 替換背景時候需刪除再新增
  4. 刪除背景時同時需刪除圖片
  5. 用戶進(jìn)入查詢背景數(shù)據(jù)顯示

以上所使用到的只是都是在之前分享內(nèi)容學(xué)習(xí)過的內(nèi)容，本次用同樣的知識來實(shí)現(xiàn)下不一樣的業(yè)務(wù)，相當(dāng)于對大家之前知識的一個鞏固復(fù)習(xí)的過程，加強(qiáng)大家對這些知識點(diǎn)的印象。

新建數(shù)據(jù)集合

用于存放背景圖片信息

87ed3202308070949526156.png

新建一個叫做 background 存放管理背景數(shù)據(jù)，然后我們看下權(quán)限：

e87fa202308070950009981.png

因為實(shí)際業(yè)務(wù)需求中，這個背景只是當(dāng)前用戶可以看到，所以默認(rèn)的權(quán)限就適合我們當(dāng)前的業(yè)務(wù)，不需要再做調(diào)整。

定義操作接口

061b2202308070950117624.png

小程序端需要操作 background 數(shù)據(jù)庫，所以我們在 api 文件夾在創(chuàng)建一個 background.js 來寫相關(guān)的數(shù)據(jù)庫操作方法。

// 獲取背景
function getBackground() {
}

// 添加背景
function addBackground(data)
}

// 刪除背景
function delBackground(id) {
}

// 導(dǎo)出聲明
export {
  getBackground,
  addBackground,
  delBackground
}

根據(jù)實(shí)際的需求，分貝定義來獲取背景、添加背景、刪除背景，然后為了讓其他js能引入使用，在最后做了一個導(dǎo)出聲明。

保存上傳背景

首先實(shí)現(xiàn)下添加數(shù)據(jù)的方法

// 添加背景
function addBackground(data) {
  // 1. 獲取數(shù)據(jù)庫引用
  const db = wx.cloud.database()
  // 2. 找到集合獲取數(shù)據(jù)
  const background = db.collection('background')
  // 3. 添加創(chuàng)建時間
  data.createTime = db.serverDate()
  // 4. 集合添加數(shù)據(jù)
  return background.add({data})
}

在這個我給大家做了一個小小的加餐，使用了 serverDate 獲取服務(wù)端時間，可用于查詢條件、更新字段值或新增記錄時的字段值。

serverDate 參數(shù)說明：

  • offset：單位毫米，可以設(shè)置時間偏移量

然后再到列表頁面去進(jìn)行使用，先引入文件方法：
添加到 list.js 頭部

import {
  addBackground
} from '../../api/background.js'

在選擇完圖片上傳完成之后，使用添加方法：

chooseImg: function () {
    const that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上傳第一張圖片
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        console.log(cloudPath)
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            let data = {
              fileID: res.fileID
            }
            that.setData(data)
            addBackground(data)
          }
        })
      }
    })
  },

經(jīng)過添加操作后，數(shù)據(jù)被添加到了數(shù)據(jù)庫：

9b867202308070950464930.png

我們可以編輯下 createTime 字段：

6f6a2202308070950559891.png

ba4c6202308070951012698.png

可以看到這個是一個時間類型的字段參數(shù)。
添加完成之后還需要做兩件事情：

  1. 進(jìn)入的時候去查詢背景信息
  2. 替換背景時候先刪除再添加

查詢背景信息

首先實(shí)現(xiàn)查詢數(shù)據(jù)方法：

// 獲取背景
function getBackground() {
  // 1. 獲取數(shù)據(jù)庫引用
  const db = wx.cloud.database()
  // 2. 找到集合獲取數(shù)據(jù)
  const background = db.collection('background')
  // 3. 查詢集合數(shù)據(jù)
  return background.get()
}

在 list.js 引入查詢方法：

import {
  addBackground,
  getBackground
} from '../../api/background.js'在 onLoad 進(jìn)行查詢調(diào)用：

在 onLoad 進(jìn)行查詢調(diào)用：

/**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    // 獲取背景圖
    this.getBackground()
    // 獲取問候語
    this.randomMsg()
  },
  // 獲取背景圖
  getBackground(){
    getBackground().then(res => {
      // 判斷是否有數(shù)據(jù)
      if (res.data.length) {
        this.setData({
          fileID:res.data[0].fileID // 獲取第一條數(shù)據(jù)
        })
      }
    })
  }

當(dāng)用戶進(jìn)入列表頁面就會顯示顯示已上傳的背景。

替換背景信息

這里需要采用先刪除后添加的方式，當(dāng)然也可以采用修改的方式進(jìn)行實(shí)現(xiàn)。在這里需要注意，無論采用什么方式都需要對之前背景文件進(jìn)行刪除，無用的圖片就需要及時清理掉，要不然就會白白的占用服務(wù)器資源，存儲資源是需要收費(fèi)。雖然存儲費(fèi)用不貴，但是要保持一個良好的節(jié)約習(xí)慣。

先實(shí)現(xiàn)刪除方法：

// 刪除背景數(shù)據(jù)同時刪除背景圖片
function delBackground(id,fileID) {
  // 1. 獲取數(shù)據(jù)庫引用
  const db = wx.cloud.database()
  // 2. 獲取集合對象
  const background = db.collection('background')
  // 3. 刪除背景圖片
  wx.cloud.deleteFile({
    fileList: [fileID]
  })
  // 4. 刪除當(dāng)條背景數(shù)據(jù)
  return background.doc(id).remove()
}

在 lis.js 引入刪除方法：

import {
  addBackground,
  getBackground,
  delBackground
} from '../../api/background.js'

在這里因為刪除需要id，所以在獲取的背景的時候需要保存id

getBackground(){
    getBackground().then(res => {
      if (res.data.length) {
        const background = res.data[0]
        this.data.background = background
        this.setData({
          fileID:background.fileID
        })
      }
    })
  }

然后在選擇圖片的邏輯中判斷是否有id，如果有的話證明之前上傳過圖片則進(jìn)行刪除操作

chooseImg: function () {
    const that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const filePath = res.tempFilePaths[0] //上傳第一張圖片
        const cloudPath = `top-img/${Date.now()}-${Math.floor(Math.random(0, 1) * 100000)}` + filePath.match(/.[^.]+?$/)[0]
        console.log(cloudPath)
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            let data = {
              fileID: res.fileID
            }
            that.setData(data)
            addBackground(data)
            // 判斷是否之前上傳過圖片
            if(that.data.background){
              let id = that.data.background._id
              let fileID = that.data.background.fileID
              delBackground(id,fileID)
            }
          }
        })
      }
    })
  }

JS邏輯處理代碼寫完，意外發(fā)現(xiàn)上傳完圖片后居然發(fā)現(xiàn)拍照的ICON不見了，后來查看布局代碼發(fā)現(xiàn)原來拍照ICON在未上傳圖片狀態(tài)布局的里面，所以一并沒隱藏了，我們需要把布局移除來。

<!-- 頭部 -->
  <image wx:if="{{fileID}}" src="{{fileID}}" class="head"></image>
  <view wx:if="{{!fileID}}" class="head head-bg" >
    <view bindtap="randomMsg" class="head-bubble">
      <!-- 頭像 -->
      <view class="user-avatar">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <!-- 問候語 -->
      <text>，{{message}}</text>
    </view>
    <!-- 原來的位置 -->
    <!-- <image bindtap="chooseImg" class="img-add" src="../../images/img_add.png" /> -->
  </view>
  <image bindtap="chooseImg" class="img-add" src="../../images/img_add.png" />

大功告成！碼仔內(nèi)心竊喜，于是偷偷的換上了一張它和碼妞的合影。碼仔前后想了想“這個功能，還是很有必要的！”。

ccbb8202308070951405717.png

總結(jié)

  1. 學(xué)習(xí)了小程序圖片操作：wx.chooseImage() ，選擇圖片
  2. 小程序圖片云存儲管理：
    1. wx.cloud.uploadFile：上傳文件
    2. wx.cloud.deleteFile ：刪除文件
    3. wx.cloud.getTempFileURL：獲取在線鏈接
  3. 還對之前的學(xué)習(xí)過的數(shù)據(jù)庫：新增、查詢、刪除操作通過實(shí)現(xiàn)一個需求進(jìn)行了組合使用
請登錄后查看

常見問題

CRMEB-慕白寒窗雪 最后編輯于2023-08-07 09:52:36

快捷回復(fù)
回復(fù)
回復(fù)
回復(fù)（{{post_count}}) {{!is_user ? '我的回復(fù)' :'全部回復(fù)'}}
排序 默認(rèn)正序 回復(fù)倒序 點(diǎn)贊倒序

{{item.user_info.nickname ? item.user_info.nickname : item.user_name}} LV.{{ item.user_info.bbs_level }}

作者 管理員 企業(yè)

{{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest == 1? '取消推薦': '推薦'}}
{{item.is_suggest == 1? '取消推薦': '推薦'}}
沙發(fā) 板凳 地板 {{item.floor}}#
{{item.user_info.title || '暫無簡介'}}
附件

{{itemf.name}}

{{item.created_at}}  {{item.ip_address}}
打賞
已打賞￥{{item.reward_price}}
{{item.like_count}}
{{item.showReply ? '取消回復(fù)' : '回復(fù)'}}
刪除
回復(fù)
回復(fù)

{{itemc.user_info.nickname}}

{{itemc.user_name}}

回復(fù) {{itemc.comment_user_info.nickname}}

附件

{{itemf.name}}

{{itemc.created_at}}
打賞
已打賞￥{{itemc.reward_price}}
{{itemc.like_count}}
{{itemc.showReply ? '取消回復(fù)' : '回復(fù)'}}
刪除
回復(fù)
回復(fù)
查看更多
打賞
已打賞￥{{reward_price}}
1659
{{like_count}}
{{collect_count}}
添加回復(fù) ({{post_count}})

相關(guān)推薦

快速安全登錄

使用微信掃碼登錄
{{item.label}} 加精
{{item.label}} {{item.label}} 板塊推薦 常見問題 產(chǎn)品動態(tài) 精選推薦 首頁頭條 首頁動態(tài) 首頁推薦
取 消 確 定
回復(fù)
回復(fù)
問題:
問題自動獲取的帖子內(nèi)容,不準(zhǔn)確時需要手動修改. [獲取答案]
答案:
提交
 bug 需求 取 消 確 定
打賞金額
當(dāng)前余額：￥{{rewardUserInfo.reward_price}}
{{item.price}}元
請輸入 0.1-{{reward_max_price}} 范圍內(nèi)的數(shù)值
打賞成功
￥{{price}}
完成 確認(rèn)打賞

微信登錄/注冊

切換手機(jī)號登錄

{{ bind_phone ? '綁定手機(jī)' : '手機(jī)登錄'}}

{{codeText}}
切換微信登錄/注冊
暫不綁定
CRMEB客服

CRMEB咨詢熱線 咨詢熱線

400-8888-794

微信掃碼咨詢

CRMEB開源商城下載 源碼下載 CRMEB幫助文檔 幫助文檔
返回頂部 返回頂部
CRMEB客服