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

推薦する

Linux における nohup と & の使い方と違いの詳細な説明

例:例として、Python コード loop_hello.py を使用します。このコードは、ループ回...

Linuxで$を#に変更する方法

このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...

HTML フォームタグチュートリアル (3): 入力タグ

HTML フォーム タグのチュートリアル。このセクションでは、主に Web ページで INPUT タ...

ウェブデザインの初心者に役立つ学習教材をいくつかお勧めします

勉強中に読んだ本についてもよく聞かれます。以下は初心者におすすめの本です(私が勉強中に読んだ本です。...

Linuxで現在のスクリプトの実際のパスを取得する方法

1. 現在のスクリプトの実際のパスを取得します。 #!/bin/bash if [[ $0 =~ ^...

mysql 8.0.18.zip のインストールと構成方法のグラフィック チュートリアル (Windows 64 ビット)

以前にインストールされたバージョンのデータベースをアンインストールする方法については、この記事を参照...

MySQL 8.0 でのチェック制約の実装

みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。今回はMySQL 8.0で追...

HTML で点線の境界線を設定する方法

CSSスタイルとHTMLタグ要素を使用するさまざまな HTML タグに点線の境界線を追加するために、...

MySQL Strict Modeの知識ポイントの詳細な説明

I. 厳密モードの説明MySQL 5.0 以降の厳密モード (STRICT_TRANS_TABLES...

MySQL 8.0 の非表示インデックスの詳細な説明

言葉MySQL 8.0 は最初のバージョンから 4 年を経てリリースされました。バージョン 8.0 ...

Dockerコンテナは定期的にデータベースをバックアップし、指定されたメールボックスに送信します(設計アイデア)

目次1. 背景: 2. デザインのアイデア: 3. 起動スクリプトを書く4. イメージを構築する5....

単一の MySQL テーブルで数千万のデータを処理するアイデアを共有する

目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...

Dockerfile echoは、指定されたファイル内の複数行のテキストを実装する方法を指定します。

Dockerfile内の指定されたファイルに複数の行を追加します。echoの後の「$」記号に注意し...

JavaScript における async と await の使い方とメソッド

JS の async 関数と await キーワード 関数ヘルワールド() { 「こんにちは!美しい...

Navicatを使ってMySQLを操作する方法

目次序文: 1. Navicatの紹介2. シンプルなチュートリアルの共有接続管理ライブラリテーブル...