WeChat ミニ プログラム クラウド開発のクイック スタート (3/4)

情報 2023-08-19 05:29:57 訪問数: null

序文

「WeChat Mini Program Cloud Development Quick Start (2/4)」の共有では、リストのクエリとページネーションはすべて完了しており、メモとしては非常に使いやすいと言えます。 、コードボーイは私の頭の中にあり、私はすでに人生の頂点に達していると空想し始めています。

次に、要件の具体的な手順を分析しましょう:
画像置換要件

  1. 画像の選択
  2. 画像をアップロードする
  3. 再度アップロードする
  4. 画像の選択
  5. 画像を削除する

ここでは写真のデータを管理する必要があり、同時にクラウドストレージにアップロードする必要があります。

ローカル画像操作

レイアウト開始

久しぶりにレイアウトスタイルを書きましたが、ちょっと錆びてませんか？過去を振り返り、振り返り、新しいことを学びたいと思っています。ページのスタイルをデバッグしたい場合は、まず現在のコンパイル モードをロックする必要があります。

156fd202308070946341519.png

まず、頭の画像コンポーネント領域に写真アイコンを配置し、ユーザーがアイコンをクリックすると画像を選択します。

 <!-- 头部 -->
  <view class="head-bg">
  <!-- 省略无关布局 -->
    <image class="img-add" src="../../images/img_add.png"></image>
  </view>

次に、スタイルを設定して、位置配置を使用してティーカップ上に大まかに位置を配置します。

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

最終効果

37a1520230807094652650.png

次に、bindtap を介してクリック イベントをバインドし、画像を選択します。

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

画像の選択

このchooseImgメソッドでは、ローカルアルバムから画像を選択するか、wx.chooseImage()を通じてカメラで写真を撮ることができます。

wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'],
      success (res) {
        // 由于是数组然后只取一张图片，所以默认取下标为0的图片
        console.log(res.tempFilePaths[0])
      }
    })

chooseImage パラメータの説明:

  • count: 選択できる写真の数、デフォルトは 9 です
  • sourceType: 画像のソースを選択します。これはデフォルトで携帯電話とカメラの両方でサポートされます。
  • sizeType: 選択した画像のサイズ。デフォルトでは、元の画像と圧縮画像の両方がサポートされます。
  • 成功（結果）

画像を置き換える

選択が完了したら、次のステップは画像を表示することですが、まず、選択した画像のパスを格納する変数を data に定義します。

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プロパティを使用して設定されていました。

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

アプレットはパラメータを css に渡すことができず、wxml でのみ渡すことができるため、インライン スタイルとして記述する必要があります。

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

次に、topImgUrl を画像パスに置き換えます。

<!-- 头部 -->
   <view class="head-bg" style="background-image: url('{
   
   {topImgUrl}}');" >
    <!-- 省略无关布局 -->
  </view>

次に、それを実行して効果を確認します。

d17a6202308070947325662.png

このとき、最初はユーザーに写真がないことがわかります。そのため、topImgUrl にデフォルト値を設定する必要があります。

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

012d4202308070947444288.png

次に、写真を選択して効果を確認します。ローカル画像がサポートされていないため、まだ効果がないことがわかります。次に、この時点でクラウドストレージにアップロードする必要があります。

画像アップロードクラウドストレージ

クラウド ファイル ストレージ、組み込み CDN アクセラレーションは、フロントエンドでの直接アップロード/ダウンロードをサポートし、クラウド開発コンソールで視覚的に管理できます。

クラウドストレージの視覚化

このデフォルトの画像は、実際には以前に手動でクラウド ストレージにアップロードしたものです。クラウド開発コントロール パネルを開いて [ストレージ] を選択すると、以前にアップロードした背景画像とバブル画像が表示されます。

a02dc20230807094755314.png

ファイルを直接管理するだけでなく、クラウドデータベースのように権限の設定にも対応します。

cab1a202308070948051024.png

また、キャッシュ構成もサポートし、複数の構成戦略をサポートします。

5511c202308070948144488.png

クラウドストレージにアップロードする

ここでは、wx.cloud.uploadFile を使用して、ローカル リソースをクラウド ストレージ領域にアップロードします。

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

UploadFile パラメータの説明:

  • CloudPath: パス名
  • filePath: ファイルパス
  • 戻り値 res

先ほど選択した画像コードと組み合わせたコードをアップロードすることで

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 => {
            console.log('上传成功后获得的res：', res)
            that.setData({
              topImgUrl:res.fileID
            })
          },
          fail:err=>{
            console.log(err)
          }
        })
      }
    })
  }

アップロード成功

2ba1b202308070948332344.png

ストレージ管理、フォルダーが自動的に生成され、写真はここにアップロードされます

21fbb202308070948422641.png

オンラインファイルを削除する

もちろん、アップロードした場合は削除する必要があります。削除する必要がある気に入らない写真が常に存在するためです。クラウド ストレージからファイルを削除するには、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 パラメータの説明:

  • fileList: ファイル ID 配列
  • 戻り値 res

次に、先ほどのファイル ID を使用して、返された結果を確認します。

097d2202308070948599312.png

オンラインリンクを取得する

FileIDを取得しても表示できないため、FileIDから画像のパスを取得し、wx.cloud.getTempFileURLを使用してクラウドファイルIDを実際のリンクと交換する必要があります。

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

getTempFileURL パラメータの説明:

  • fileList: ファイル ID 配列
  • 戻り値 res

次に、先ほどのファイル ID を使用して、返された結果を確認します。

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
                })
              }
            })
          }
        })
      }
    })
  }

紆余曲折を経てようやく写真にアップロードして表示しました

afda7202308070949285143.png

これを見たらきっと「なんでこんなにめんどくさいの？」と文句を言うと思います。もっとシンプルにできないでしょうか？
もちろん、リンクを取得する 1 つのステップを省略できます。これは、画像コンポーネントの src 属性がファイル ID をサポートしているため、リンクを取得する必要があるためです。

また、カスタムヘッダー画像のバブルだと画像自体の内容を阻害してしまうので存在意味がないことが分かりますので、カスタム画像がある場合は画像を調整していきます表示されない場合は、元のデザインに従ってください。

  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. 特定のレイアウト構造が変更され、表示と非表示はパラメータtopImgUrlによって制御されます。
<!-- 头部 -->
  <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 => {
          // 设置文件ID
            that.setData({
              fileID: res.fileID
            })
          }
        })
      }
    })
  },

効果は得られましたが、次回訪問時にデフォルトの画面が表示されたままでデータが保存されないという問題が残っており、現時点では学習したデータベース操作を使用する必要があります。クラウドデータベース内のバックグラウンドデータを管理するにはどうすればよいですか?

背景画像の管理

この機能を過小評価しないでください。この機能の前に小さなプログラムの業務を実装しましたが、データ ロジックの処理ではまだ総合的に考慮する必要があることがいくつかあります。

通常の慣例に従って、最初に具体的な実装アイデアを分析します。

  1. 新しい背景コレクションを作成して背景情報を保存します
  2. 背景を保存するときにレコードを追加する必要があります
  3. 背景を差し替える場合は削除と追加が必要です
  4. 背景を削除する場合は、画像も同時に削除する必要があります
  5. ユーザーがクエリを入力すると、バックグラウンド データが表示されます。

上記は前回の共有コンテンツで学んだ内容のみですが、今回、同じ知識を使って異なる事業を実現するということは、これまでの知識を整理して整理し、理解を深めていくプロセスに相当します。

新しいデータセットを作成する

背景画像情報を保存するために使用されます

87ed3202308070949526156.png

バックグラウンド データを保存および管理するために、background という名前の新しいデータを作成し、権限を見てみましょう。

e87fa202308070950009981.png

実際のビジネス要件では、この背景は現在のユーザーのみが表示できるため、デフォルトの権限は現在のビジネスに適しており、調整する必要はありません。

操作インターフェースを定義する

061b2202308070950117624.png

アプレットはバックグラウンドデータベースを操作する必要があるため、関連するデータベース操作メソッドを記述するためのbackground.jsをapiフォルダーに作成します。

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

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

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

// 导出声明
export {
  getBackground,
  addBackground,
  delBackground
}

実際のニーズに応じて、デシベル定義を使用して背景を取得し、背景を追加し、背景を削除し、最後に他の JS をインポートして使用できるようにするためのエクスポート ステートメントを作成します。

アップロードの背景を保存する

まずデータを追加するメソッドを実装します

// 添加背景
function addBackground(data) {
  // 1. 获取数据库引用
  const db = wx.cloud.database()
  // 2. 找到集合获取数据
  const background = db.collection('background')
  // 3. 添加创建时间
  data.createTime = db.serverDate()
  // 4. 集合添加数据
  return background.add({data})
}

ここでは、serverDate を使用してサーバー時間を取得し、クエリ条件に使用したり、レコードを追加するときにフィールド値を更新したり、フィールド値を更新したりして、全員のためにちょっとした食事を作りました。

serverDate パラメータの説明:

  • offset: ミリメートル単位で、時間オフセットを設定できます。

次に、それを使用するためにリストページに移動し、最初にファイルメソッドを導入します:
list.js の先頭に追加します

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

画像を選択してアップロードした後、add メソッドを使用します。

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)
          }
        })
      }
    })
  },

追加操作の後、データがデータベースに追加されます。

9b867202308070950464930.png

createTime フィールドを編集できます。

6f6a2202308070950559891.png

ba4c6202308070951012698.png

これは時間型のフィールド パラメーターであることがわかります。
追加が完了したら、さらに 2 つの作業を行う必要があります。

  1. エントリー時に背景情報を確認する
  2. 背景を差し替える場合は、背景を削除してから追加してください

背景情報のクエリ

まずクエリ データ メソッドを実装します。

// 获取背景
function getBackground() {
  // 1. 获取数据库引用
  const db = wx.cloud.database()
  // 2. 找到集合获取数据
  const background = db.collection('background')
  // 3. 查询集合数据
  return background.get()
}

list.js にクエリ メソッドを導入します。

import {
  addBackground,
  getBackground
} from '../../api/background.js'在 onLoad 进行查询调用：

onLoad でクエリ呼び出しを行います。

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取背景图
    this.getBackground()
    // 获取问候语
    this.randomMsg()
  },
  // 获取背景图
  getBackground(){
    getBackground().then(res => {
      // 判断是否有数据
      if (res.data.length) {
        this.setData({
          fileID:res.data[0].fileID // 获取第一条数据
        })
      }
    })
  }

ユーザーがリストページに入ると、アップロードされた背景が表示されます。

背景情報を置き換える

ここでは、最初に削除してから追加する必要がありますが、もちろん、変更した方法で実装することもできます。ここで、どのような方法を使用する場合でも、以前の背景ファイルを削除し、不要な画像を時間内にクリーンアップする必要があることに注意してください。そうしないと、サーバーリソースが無駄に占有され、ストレージリソースが課金される必要があります。 。保管コストはそれほど高くありませんが、適切な節約習慣を維持する必要があります。

まず、delete メソッドを実装します。

// 删除背景数据同时删除背景图片
function delBackground(id,fileID) {
  // 1. 获取数据库引用
  const db = wx.cloud.database()
  // 2. 获取集合对象
  const background = db.collection('background')
  // 3. 删除背景图片
  wx.cloud.deleteFile({
    fileList: [fileID]
  })
  // 4. 删除当条背景数据
  return background.doc(id).remove()
}

lis.js に delete メソッドを導入します。

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があるかどうかを判断し、IDがある場合は、その写真が以前にアップロードされたことを証明して削除します

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ロジック処理のコードを書いた後、写真をアップロードした後に写真を撮るためのアイコンが抜けていることに気づき、後でレイアウトコードを確認したところ、写真をアップロードしていない状態のレイアウトに写真を撮るためのアイコンがあったので、非表示ではありませんでした。レイアウトを移動して削除する必要があります。

<!-- 头部 -->
  <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" />

これで完了です。馬載さんは密かにうれしかったので、馬牛さんとの写真をこっそり載せました。マザイは「この機能はまだまだ必要だ！」と前後に考えました。

ccbb8202308070951405717.png

要約する

  1. アプレットの画像操作を学習: wx.chooseImage()、画像を選択
  2. 小さなプログラム画像のクラウドストレージ管理:
    1. wx.cloud.uploadFile: ファイルをアップロードします
    2. wx.cloud.deleteFile : ファイルを削除します
    3. wx.cloud.getTempFileURL: オンラインリンクを取得
  3. 以前に学習したデータベース: 追加、クエリ、削除の操作を組み合わせて要件を達成します。

おすすめ

転載: blog.csdn.net/weixin_64051447/article/details/132295558
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com