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 バッチ インストール サーバーをテストする詳細なプロセス

推薦する

URL 内の特殊記号の意味を知っていますか?

1.# # は Web ページ内の場所を表します。右側の文字はその位置の識別子です。たとえば、ht...

MySQL8.0.18 複数マスターと 1 スレーブの構成

目次1. 現実的な背景2. 合意3. マスターを構成する3.1. 起動パラメータの設定3.2. パラ...

2つのVirtualBox仮想ネットワークをブリッジするLinuxブリッジメソッドの手順

この記事は、この時期の「ピーターから奪ってポールに払う」という仕事のスタイルに対する私の不満から生ま...

エコー後に要素編集フォームel-radioが選択できない問題を解決します

目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...

英語: リンクタグはIEでhrefを自動的に補完します

英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...

CentOS 7 に MySQL 8.0.20 データベースをインストールするための詳細なチュートリアル

関連記事: MySQL8.0.20 インストール チュートリアルとインストールの問題に関する詳細なチ...

Windows での MySQL 8.0.16 のインストールと設定方法のグラフィック チュートリアル

この記事は、参考のためにMySQL 8.0.16のインストールグラフィックチュートリアルを記録してい...

MySQLでテーブル名を変更する方法と注意すべき点

目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...

Vueのハッシュジャンプ原理の詳細な説明

目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...

Docker コンテナ アプリケーションで避けるべき 10 の悪い習慣

コンテナが企業の IT インフラストラクチャに欠かせない要素となっていることは間違いありません。コン...

LeetCode の SQL 実装 (181. 従業員は管理職よりも収入が高い)

[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...

MYSQL インストールの解凍バージョンと発生したエラーと解決策

1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...

Vue v-for ループを書く 7 つの方法

目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...

Vue.jsは音楽プレーヤーを実装します

この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...