WeChatミニプログラムはuni-appを通じて世界中に共有されます

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ページずつ設定されます。

公式サイト共有紹介: https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

共有する必要がある各ページは個別に記述する必要があります

コピーエクスポート デフォルト {
//友達に送信 onShareAppMessage(res) {
    if (res.from === 'button'){// ページ内の共有ボタンから console.log(res.target)
    }
    戻る {
      タイトル: 「共有タイトルをカスタマイズ」
      パス: '/pages/test/test?id=123'
    }
  },
  //Momentsに共有 onShareTimeline(res) {
     戻る {
      タイトル: 「共有タイトルをカスタマイズ」
      パス: '/pages/test/test?id=123'
    }
  }
}

コードが繰り返されるだけでなく、混乱して誤ってパラメータを見逃したり、変更し忘れたりすることも非常に起こりやすくなります。

共有パラメータ設定の概要:

グローバル共有

各ページのコードの重複を減らし、グローバルに共有コードを設定します。

まず新しいディレクトリにutilsフォルダを作成し、wxShare.jsを作成します。

作成が成功したら、main.jsにwxShare.jsをインポートします。

//共有設定
'./utils/wxShare.js' から share をインポートします。
Vue.mixin(共有)

wxShare.js の紹介

dataonShareAppMessageonShareTimelineを含む基本的な js ページを作成します。

data :共有パラメータ設定:初期設定図を参照してください

onShareAppMessage : WeChat友達に共有する設定

onShareTimeline : Momentsへの共有設定

コピーエクスポート デフォルト {
    データ() {
        戻る {
            共有:
                // 転送されたタイトル(デフォルトのタイトル)
                タイトル: 'デフォルトのタイトル - 共有タイトル',
                // デフォルトは現在のページです。これは '/' で始まるフルパスである必要があります。パス: ''
                //カスタムイメージパス。ローカルファイルパス、コードパッケージファイルパス、またはネットワークイメージパスにすることができます。
                //PNG と JPG をサポートします。imageUrl が渡されない場合、デフォルトのスクリーンショットが使用されます。表示される画像のアスペクト比は5:4です
                画像URL: ''
            }
        }
    },
    // 友達に送信 onShareAppMessage(res) {
         戻る {
          タイトル: 「友達に送る」
          パス: '/pages/test/test'
        }
    },
    //Momentsに共有 onShareTimeline(res) {
         戻る {
          タイトル:「瞬間を共有」
          パス: '/pages/test/test'
        }
    }
}

これで、最も基本的なグローバル共有が完了しました。注意深い人は、データ内のパラメータが使用されていないこと、共有されている各パラメータが固定されていて動的に設定できないことに気付くかもしれません。これは、理想的なグローバル共有とは大きく異なります。

getCurrentPages()関数

getCurrentPages()関数は、現在のページ スタックのインスタンスを取得するために使用されます。このインスタンスは、スタックの順序に従った配列の形式で提供されます。最初の要素はホームページで、最後の要素は現在のページです。

注意: getCurrentPages()はページ スタックを表示するためにのみ使用されます。ページ ステータス エラーを回避するために、ページ スタックを変更しないでください。

公式サイト紹介: https://uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages

onShareAppMessageを最適化して友達と共有する

コピー//友達に送信 onShareAppMessage(res) {
    // 読み込まれたページを取得する let pages = getCurrentPages(),
        // 現在のページのオブジェクトを取得します。view = pages[pages.length - 1];
    //共有ページパス this.share.path = `/${view.route}`;
    // 転送パラメータは this.share を返します。
},

ページパスを動的に取得して共有します。

現時点では明らかな問題があります。ミニプログラムのタイトルを直接取得する方法が現在ありません。

ページ共有タイトルを設定する

共有する必要がある各ページのタイトルを動的に設定することで、国を救う方法を見つけましょう

コピーエクスポート デフォルト {
    オンロード() {
        /*
            共有するページのライフサイクルで現在のページ共有タイトルを設計します。this.share は wxShare.js で定義された共有データを取得するために使用されます*/
       this.share.title = "現在のページの共有タイトル"
    },
}

エフェクト表示

ボタン友達に共有

<button open-type="share"> )

コードは上記と変わりませんが、構成パラメータ用の別の領域がある点が異なります。

コピー//友達に送信 onShareAppMessage(res) {
    // ページ内のボタンから転送 if (res.from == 'button') {
        console.log("ボタン転送 - 構成");
    } 
    // 読み込まれたページを取得する let pages = getCurrentPages(),
        // 現在のページのオブジェクトを取得します。view = pages[pages.length - 1];
    //共有ページパス this.share.path = `/${view.route}`;
    // 転送パラメータは this.share を返します。
}

onShareTimelineを最適化してMomentsに共有する

設定は基本的に友達と共有する場合と同じです。

copy//Momentsに共有 onShareTimeline(res) {
    // 読み込まれたページを取得する let pages = getCurrentPages(),
        // 現在のページのオブジェクトを取得します。view = pages[pages.length - 1];
    // console.log("読み込まれたページを取得する", pages);
    //console.log("現在のページのオブジェクト", view);
    this.share.path = `/${view.route}`;
    // 転送パラメータは this.share を返します。
}

グローバル共有の基本的な構成は上記の通りです。

動的変更ページ パスの共有には問題はありませんが、動的共有パスとパラメータの構成にはまだ問題があります。

wxShare.js コード

コピーエクスポート デフォルト {
    データ() {
        戻る {
            共有:
                // 転送されたタイトル(デフォルトのタイトル)
                タイトル: 'デフォルトのタイトル - 共有タイトル',
                // デフォルトは現在のページです。これは '/' で始まるフルパスである必要があります。パス: ''
                //カスタムイメージパス。ローカルファイルパス、コードパッケージファイルパス、またはネットワークイメージパスにすることができます。
                //PNG と JPG をサポートします。imageUrl が渡されない場合、デフォルトのスクリーンショットが使用されます。表示される画像のアスペクト比は5:4です
                画像URL: ''
            }
        }
    },
    /*
     共有するページのライフサイクルで現在のページ共有タイトルをデザインする onLoad() {
         this.share.title = "現在のページの共有タイトル"
     },
     */
    // 友達に送信 onShareAppMessage(res) {
        // ページ内のボタンから転送 if (res.from == 'button') {
            console.log("ボタン転送 - 構成");
        }
        // 読み込まれたページを取得する let pages = getCurrentPages(),
            // 現在のページのオブジェクトを取得します。view = pages[pages.length - 1];
        this.share.path = `/${view.route}`;
        
        // 転送パラメータは this.share を返します。
    },
    //Momentsに共有 onShareTimeline(res) {
        // 読み込まれたページを取得する let pages = getCurrentPages(),
            // 現在のページのオブジェクトを取得します。view = pages[pages.length - 1];
        // console.log("読み込まれたページを取得する", pages);
        console.log("現在のページのオブジェクト", view);
        this.share.path = `/${view.route}`;
        // 転送パラメータは this.share を返します。
    }
}
wxShare.js

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

以下もご興味があるかもしれません:
  • uni-appを使用してWeChatアプレットの落とし穴レコードを生成する
  • uni-app WeChatアプレット認証ログイン実装手順
  • uni-app WeChatアプレットのログイン認証の実装
  • WeChat アプレットをユニアプリ プロジェクトに変換する方法の例
  • uni-app、WeChatアプレットの位置決め機能を開発

<<:  DIV、テーブル、XHTML のウェブサイト構築の違いの分析と説明

>>:  VMware を使用して PXE バッチ インストール サーバーをテストする詳細なプロセス

推薦する

MySQL の日付型の単一行関数コードの詳細な説明

MySQL の日付型単一行関数: CURDATE()またはCURRENT_DATE()は現在の日付を...

Node はあいまい検索用の検索ボックスを実装します

この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...

抽選効果を実現するJavaScript

この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有...

Reactでwindow.print()を使用した際にページが応答しなくなる問題の解決記録について

目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...

CentOS 8が利用可能になりました

CentOS 8 が利用可能になりました! CentOS 8 と RedHat Enterprise...

MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル

私は頻繁にシステムをインストールするので、インストールのたびにいくつかのソフトウェアを再インストール...

ろうそくを溶かす(水滴)サンプルコードを実現する純粋な CSS

成果を達成する実装のアイデアフィルターのコントラストとぼかしを利用して溶ける効果を実現します。親要素...

MySQLの大規模テーブル最適化ソリューションについての簡単な説明

背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...

MySQLのスリープ関数の特殊現象例の詳しい説明

序文MySQL のスリープ システム機能は、実用的な適用シナリオが少なく、通常は実験的なテストに使用...

MySQL公式パフォーマンステストツールmysqlslapの使い方の紹介

目次導入説明書実際の経験まとめ導入MySQL は最も人気のあるオープンソース データベースとして、さ...

Vue3 Vue イベント処理ガイド

目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...

CSS で垂直方向の中央揃えを実装するいくつかの方法の概要

フロントエンドのレイアウト プロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は ma...

テーブルを作成するための MySQL SQL ステートメントの詳細な概要

mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...