アルバムと写真をアルバムに保存するための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をベースにホスト間コンテナ通信を実装する

推薦する

Vueは小さな天気予報アプリケーションを実装します

これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...

TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル

tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...

Dockerの高可用性構成の詳細な説明

Docker の作成Docker Compose は、管理対象コンテナをプロジェクト、サービス、コン...

CSS クラスと ID の一般的な命名規則

ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...

MySql COALESCE 関数の使用コード例

COALESCE は、各パラメータ式 (expression_1、expression_2、...、...

CSS3 FlexBox の伸縮自在なレイアウトを 10 分で理解する

基本的な紹介特徴Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイ...

OracleデータをMySQLデータベースに抽出する実装プロセス

Oracle データベースから MySQL データベースへの移行では、Oracle データベース モ...

npm 淘宝ミラー変更説明

1. トップレベルの使用法1. cnpmをインストールする npm i -g cnpm --regi...

MySQL でテーブルスペースの断片化を解消する詳細な例

MySQL でテーブルスペースの断片化を解消する詳細な例断片化の原因(1)テーブルのストレージは断片...

Jenkins + Docker + ASP.NET Core の自動デプロイメントの問題について (落とし穴を避ける)

このブログを書くつもりはなかったのですが、実際の操作中に、ネットワークの問題に圧倒されたこと (ネッ...

Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

目次1. 親コンポーネントが子コンポーネントにデータを渡す1.1. 親コンポーネントコード1.2. ...

JSのバイナリファミリーについての簡単な説明

目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...

Mac で Docker を使用して Oracle をデプロイする方法

Mac で Docker を使用して Oracle をデプロイする方法まずdockerをインストール...

シンプルなカウントダウン効果を実現するJavaScript

この記事の例では、カウントダウン効果を実現するためのJavaScriptの具体的なコードを参考までに...