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 ドメイン サービスをセットアップおよび構成するための詳細な手順

推薦する

SQLは、隣接する2行のデータに対して加算、減算、乗算、除算の演算を実行します。

SQL は、データを特定の順序で並べ替え、特定のフィールドでグループ化した後、隣接する 2 つのデ...

Tomcatの起動が遅い問題を素早く解決、超簡単

今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...

Linux 環境での Oracle 導入チュートリアル

1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...

Linux でシステム ディスクを初期化した後にデータ ディスクを再マウントする方法

Linuxインスタンスでシステムディスクを初期化した後、データディスクを再マウントするLinux イ...

mysql のインデックスと FROM_UNIXTIME に関する問題

ゼロ、背景今週の木曜日にたくさんのアラートを受け取りました。DBA に確認を依頼したところ、遅いクエ...

JSはクリックドロップ効果を実装します

jsはクリックとドロップの特殊効果を実現します。まずは効果画像を見てみましょうさっそく始めましょう。...

Linux で実行中のバックグラウンド プログラムを表示および終了する方法

Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...

CSS でハニカム/六角形アトラスを実装するためのサンプルコード

理由は分かりませんが、UIではハニカム効果(手を広げたような効果)のデザインが好まれます。 1. 六...

Dockerはnginxをデプロイし、フォルダとファイル操作をマウントします

この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...

MySQLインデックスの作成について知っておくべきこと

目次序文: 1. インデックスメソッドを作成する2. インデックスを作成するために必要な権限序文: ...

フォームの「Enter」、「Submit」、「Enter != Submit」を削除する方法

「Enter != Submit」問題を実装するには、通常、「ボタンの種類」と「入力ボックスの数」か...

HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例

HTMLハイパーリンクaタグのhrefジャンプとonclickの実行関係htmlのaタグのhrefは...

最新の仮想マシン VMware 14 インストール チュートリアル

まず、VMware 14のアクティベーションコードをお渡ししますFF31K-AHZD1-H8ETZ-...