アルバムと写真をアルバムに保存するためのWeChatアプレット

アルバムと写真をアルバムに保存するためのWeChatアプレット

私は現在、Xiao Nian Gao に似たビデオおよびツール アプリを開発しています。ユーザーが作成したアルバムをローカルの電話アルバムに保存する必要があります。ページ効果は次のとおりです。

実装されたロジックは次のとおりです。

1. ユーザーの承認を取得します。承認された場合は、直接ダウンロードします。

2. ユーザーが以前に認証したことがない場合は、ユーザー認証インターフェイスを呼び出して、ユーザーに認証を求めます。ユーザーが同意すると、ソフトウェアがダウンロードされます。ユーザーが同意しない場合は、プロンプトが表示されます。

3. 以前に認証が要求されたがユーザーが拒否した場合は、設定インターフェースを開き、ユーザーに認証を有効にするように指示します。

以下はコード実装です。どなたでもコピー、貼り付け、コメントしていただけます。

まず WXML コード:

<view class="アルバム操作"> 
    <view class="edit" bindtap="deleteAlbum" data-id="{{item.id}}" data-status="{{item.status}}">
        削除</view>
 
    <button class="save" data-link="{{item.link}}" data-status="{{item.status}}" bindtap='downloadAlbum'>
        保存/ダウンロード</button>
 
    <view class="share" bindtap="desabledShare" wx:if="{{item.status==2}}">共有</view>
    <button class="share" open-type="share" data-id="{{item.id}}" data-cover="{{item.cover_url}}" data-name="{{item.name}}" wx:if="{{item.status!=2}}">
        シェア</button>
</ビュー>

以下はJSコードです

// ダウンロードを許可する downloadAlbum: function(e) {
    var that = this;
    // アルバムのステータス var status = e.target.dataset.status;
    // ダウンロード リンク アドレス var link = e.target.dataset.link;
 
    (ステータス == 2)の場合{
        wx.showToast({
            タイトル: 「アルバムは現在制作中です。しばらくお待ちください」
            アイコン: 'なし'
        });
    } それ以外 {
        // ユーザー認証を取得する wx.getSetting({
            成功(res) {
                // 承認された場合 if (res.authSetting['scope.writePhotosAlbum']) {
                    that.saveAlbum(リンク);
                // 承認されていない場合 } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
                    //ユーザー認証を呼び出す wx.authorize({
                        スコープ: 'scope.writePhotosAlbum',
                        成功() {
                            that.saveAlbum(リンク);
                        },
                        失敗() {
                            wx.showToast({
                                タイトル: 「権限がないため、アルバムに保存できません」
                                アイコン: 'なし'
                            })
                        }
                    })
                // 以前に認証が拒否された場合 } else {
                    wx.openSetting({
                        成功(res) {
                            res.authSetting['scope.writePhotosAlbum']の場合{
                                that.saveAlbum(リンク);
                            } それ以外 {
                                wx.showToast({
                                    タイトル: 「権限がないため、アルバムに保存できません」
                                    アイコン: 'なし'
                                })
                            }
                        }
                    })
                }
            }
        })
    }
},
 
// アルバムを保存する saveAlbum: function (link) {
    wx.downloadFile({
        url: リンク、
        成功(res) {
            (res.statusCode === 200の場合){
                var パス = res.tempFilePath
                wx.saveVideoToPhotosAlbum({
                    filePath: パス、
                    成功(res) {
                        res.errMsg == 'saveVideoToPhotosAlbum:ok' の場合 {
                            wx.showToast({
                                タイトル: 「ダウンロードが完了しました」
                            })
                        }
                    }
                })
            }
        }
    })
},

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します
  • WeChatアプレットが写真をアルバムに保存する許可設定
  • WeChatアプレットは写真を撮ったり、アルバムから写真を選択してアップロードするコード例
  • WeChatアプレットは写真をアルバムに保存する機能を実装しました
  • WeChat アプレット chooseImage の使い方 (ローカル アルバムから画像を選択するか、カメラを使用して写真を撮る)
  • WeChatアプレットの開発:アルバムから写真を取得し、カメラを使用して写真を撮り、ローカルの写真をアップロードします

<<:  mysql8.0.19 でパスワードを忘れた場合の完璧な解決策

>>:  Dockerはmacvlanをベースにホスト間コンテナ通信を実装する

推薦する

iframe ページパラメータの文字化けの問題について議論

非常に珍しいパラメータ文字化けの問題に遭遇しました。まずページを見てみましょう写真に示すように、月次...

Portainer を使用した Docker コンテナのデプロイのプロジェクト実践

目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...

別の種類の「キャンセル」ボタン

「キャンセル」ボタンは必要な操作プロセスの一部ではなく、デザイン上の主要な要素として表示されません...

Vue プロジェクトのパッケージ化と最適化の実装手順

目次Vueプロジェクトのパッケージ化、起動、最適化Vueプロジェクトのパッケージ化プロジェクトホステ...

Mysql 5.7.19 無料インストール バージョンで遭遇した落とし穴 (コレクション)

1. 公式ウェブサイトから 64 ビットの zip ファイルをダウンロードします。 2. インスト...

アクティビティページでの CSS3 アニメーション効果の適用

背景あっという間に忙しい一年が終わり、毎年恒例のイベントの時期がやってきます。お祭り気分を演出するに...

WeChatアプレットのスクロールビューは、プルアップ時にデータの読み込みを重複させるソリューションを実装しています。

WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...

あまり一般的ではないが便利な CSS 属性操作の完全ガイド

1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...

js キャンバスはスライダー検証を実現します

この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...

vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...

MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件

需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...

Django+vue 登録とログインのサンプルコード

登録するフロントエンドは、vue の axios を使用して値を渡し、取得したアカウントとパスワード...

LeetCode の SQL 実装 (177. 給与が N 番目に高い)

[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...

MySQL でトランザクションのコミットとロールバックを実装する方法の詳細な例

最近、データベース データのスケジュールされた移行を実行する必要があります。実行プロセス中に何らかの...

Vue uniapp はセグメンター効果を実現します

この記事では、セグメンター効果を実現するためのvue uniappの具体的なコードを参考までに共有し...