uniapp WeChatミニプログラムのグローバル共有を実装するためのサンプルコード

uniapp WeChatミニプログラムのグローバル共有を実装するためのサンプルコード

uniapp は、WeChat アプレットの友達へのグローバル転送/Moments への共有機能を実装します。主に Vue.js のグローバル ミックスイン コンセプトを使用します。

実装手順とコードは次のとおりです。

グローバル共有コンテンツファイルを作成する

1. グローバルに共有される js ファイルを作成します。サンプル ファイル パスは@/common/share.jsで、グローバル共有コンテンツが定義されています。

エクスポートデフォルト{
	データ() {
		戻る {
			//デフォルトのグローバル共有コンテンツ共有: {
				タイトル: 「グローバルに共有されるタイトル」
				path: '/pages/home/home', // グローバル共有パス imageUrl: '../../static/imgs/fenxiang-img.png', // グローバル共有画像 (ローカルまたはネットワーク)
			}
		}
	},
	// グローバル共有を定義する // 1. 友達に送信する onShareAppMessage(res) {
        戻る {
			タイトル: this.share.title,
			パス: this.share.path、
			画像URL: this.share.imageUrl、
		}
    },
	//2. モーメントに共有 onShareTimeline(res) {
        戻る {
			タイトル: this.share.title,
			パス: this.share.path、
			画像URL: this.share.imageUrl、
		}
    },
}

ファイルをインポートしてグローバルに登録する

2. share.js ファイルをプロジェクトの main.js ファイルにインポートし、Vue.mixin() メソッドを使用してグローバルにミックスインします

// グローバル共有メソッドをインポートしてマウントします import share from '@/common/share.js'
Vue.mixin(共有)

グローバルシェアリング効果を見てみましょう。

ページ共有コンテンツをカスタマイズする

3.特定のページで共有コンテンツをカスタマイズする必要がある場合は、ページのonShareAppMessage() メソッドonShareTimeline()メソッドを使用して共有コンテンツをカスタマイズできます。グローバル共有は、ページで定義された共有コンテンツによって上書きされます。次に例を示します。

    onLoad() {},
 
    // このページを友達に転送するカスタマイズ (すでにグローバル共有メソッドが存在しますが、ここで上書きされます)
	onShareAppMessage(res) {
	    戻る {
	      title: '共有されたページのタイトル',
	      パス: '/pages/my/my',
		  画像 URL: '../../static/imgs/mylogo.png'
	    }
	  },
	  // カスタムページをMomentsに共有する onShareTimeline(res) {
		戻る {
			title: '共有されたページのタイトル',
			パス: '/pages/my/my',
			画像 URL: '../../static/imgs/mylogo.png'
		}
	},

注: onShareAppMessage() および onShareTimeline() メソッドは、 onLoad やメソッドなどと同じレベルにあります。

これで、uniappのWeChatミニプログラムのグローバル共有のサンプルコードに関するこの記事は終了です。より関連性の高いuniappミニプログラムのグローバル共有コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)
  • ユニアプリとミニプログラム(画像とテキスト)を下請けする方法を教えます
  • ユニアプリミニプログラム開発でグローバルフローティングボタンを実装する方法

<<:  Webフロントエンド開発におけるエラーを見つけるための基本的な考え方

>>:  Centos8 で NIS ドメイン サービスをセットアップおよび構成するための詳細な手順

推薦する

CentOS8 で MySQL 8.0 をインストールしてデプロイする方法

MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...

Jenkins+tomcat の自動ホットデプロイメント/再起動と発生した問題の解決策 (推奨)

1. 背景同社のプロジェクトは、これまでは手動で Maven でパッケージ化し、サーバーにアップロ...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...

MySQLスローログクエリの詳細な説明

遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...

表示しているページのスナップショットを Baidu が保存できないように設定する方法

今日、Baidu でページを検索したところ、ページが削除されていたため、当然 Baidu スナップシ...

JSはキャンバス技術を使用してeChartsの棒グラフを模倣します

Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...

MySQL で準備、実行、割り当て解除ステートメントを使用するチュートリアル

序文MySQLでは、準備、実行、割り当て解除を正式にはPREPARE STATEMENTと呼びます。...

VMware Tools を最初からインストールするための詳細な手順 (グラフィック チュートリアル)

VMware Tools は VMware 仮想マシンに付属するツールで、VirtualBox (...

Ubuntu 上の Apache で SSL (https 証明書) を設定する正しい方法の詳細な説明

まず、Alibaba Cloud の公式チュートリアルをご覧ください。ファイルの説明: 1. 証明書...

docker を使用して Kong クラスター操作を構築する

docker コンテナの下に kong クラスターを構築するのは非常に簡単です。公式サイトの紹介も非...

Docker - コンテナマウントディレクトリを変更する3つの方法のまとめ

方法 1: 設定ファイルを変更する (docker サービスを停止する必要があります) 1. doc...

MySQLデータベースインデックスの詳細な紹介

目次マインドマップシンプルな理解インデックスモデルの進化二分探索木自己バランス型二分木BツリーB+ ...

MySQLは重複しないデータ挿入を実装するためにUNIQUEを使用する

SQL UNIQUE制約UNIQUE 制約は、データベース テーブル内の各レコードを一意に識別します...

CSS3 を使用した背景ぼかし効果の 3 つの例

導入から始めず、いきなり本題に入りましょう。通常の背景ぼかし効果は次のとおりです。 プロパティを使用...

MySQLデータベースインデックスの左端一致原則

目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...