実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 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をインポートします。
wxShare.js の紹介
コピーエクスポート デフォルト { データ() { 戻る { 共有: // 転送されたタイトル(デフォルトのタイトル) タイトル: 'デフォルトのタイトル - 共有タイトル', // デフォルトは現在のページです。これは '/' で始まるフルパスである必要があります。パス: '' //カスタムイメージパス。ローカルファイルパス、コードパッケージファイルパス、またはネットワークイメージパスにすることができます。 //PNG と JPG をサポートします。imageUrl が渡されない場合、デフォルトのスクリーンショットが使用されます。表示される画像のアスペクト比は5:4です 画像URL: '' } } }, // 友達に送信 onShareAppMessage(res) { 戻る { タイトル: 「友達に送る」 パス: '/pages/test/test' } }, //Momentsに共有 onShareTimeline(res) { 戻る { タイトル:「瞬間を共有」 パス: '/pages/test/test' } } } これで、最も基本的なグローバル共有が完了しました。注意深い人は、データ内のパラメータが使用されていないこと、共有されている各パラメータが固定されていて動的に設定できないことに気付くかもしれません。これは、理想的なグローバル共有とは大きく異なります。
注意: 公式サイト紹介: 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 = "現在のページの共有タイトル" }, } エフェクト表示 ボタン友達に共有
コードは上記と変わりませんが、構成パラメータ用の別の領域がある点が異なります。 コピー//友達に送信 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: DIV、テーブル、XHTML のウェブサイト構築の違いの分析と説明
>>: VMware を使用して PXE バッチ インストール サーバーをテストする詳細なプロセス
1.# # は Web ページ内の場所を表します。右側の文字はその位置の識別子です。たとえば、ht...
目次1. 現実的な背景2. 合意3. マスターを構成する3.1. 起動パラメータの設定3.2. パラ...
この記事は、この時期の「ピーターから奪ってポールに払う」という仕事のスタイルに対する私の不満から生ま...
目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...
バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...
英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...
関連記事: MySQL8.0.20 インストール チュートリアルとインストールの問題に関する詳細なチ...
この記事は、参考のためにMySQL 8.0.16のインストールグラフィックチュートリアルを記録してい...
目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...
目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...
コンテナが企業の IT インフラストラクチャに欠かせない要素となっていることは間違いありません。コン...
[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...
1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...
目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...
この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...