Vueでブラウザ共有機能を呼び出す方法

Vueでブラウザ共有機能を呼び出す方法

序文

Vue(発音は /vjuː/、view に似ています)は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。正式にはプログレッシブフレームワークと説明されており、この記事では主に vue の呼び出しブラウザ共有に関する関連情報を紹介します。詳しい紹介を見てみましょう。

手順は次のとおりです。

1. 開発環境 vue+vant

2. コンピュータシステム Windows 10 Professional Edition

3. Vue 開発の過程で、共有に遭遇することがよくあります。以下に私の方法を共有しますので、お役に立てば幸いです。

4. まず効果の画像を見てください:

5. NativeShare.jsを使用して上記の機能を実現する

// インストール npm install nativeshare

6. 対応するコンポーネントを導入する

'nativeshare' から NativeShare をインポートします

7. 共有アイコンをクリックし、メソッドに対応するコードを追加します。

cshare() {
 (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) の場合 {
 this.ui.showToast('写真やテキストを共有するには、QQ ブラウザを開いてください', 2)
 } それ以外 {
 試す {
 this.nativeShare.setShareData({
 // リンク: 'http://192.168.3.82:8080/#/pages/index/itest',
 タイトル: 'title111',
 説明: 'desc11',
 // アイコン: 'https://t12.baidu.com/it/u=751929707,172094732&fm=76',
 })
 this.nativeShare.call('デフォルト')
 } キャッチ (エラー) {
 コンソール.log(エラー)
 this.ui.showToast('このブラウザはジャンプをサポートしていません')
 }
 }
 },

8. NativeShare.js を選ぶ理由は何ですか?

互換性(間違いなく最も互換性のあるブラウザプラグイン)

問題点:

1.UC Androidでアイコンを設定できない

2. BaiduブラウザAndroidでは共有を指定できない

9. NativeShare には 3 つの強力なメソッドしかありません。

getShareData() 共有テキストを取得します setShareData() 共有テキストを設定します call(command = 'default', [options]) ブラウザのネイティブ共有コンポーネントを呼び出します

10.ShareDataはコピーのフォーマットを次のように設定します。

{
 アイコン: ''、
 リンク: ''、
 タイトル: ''、
 説明: ''、
 から: ''、
 // 以下のコールバックは現在 WeChat と QQ でのみサポートされています。success: noop,
 失敗: 何もしない、
 キャンセル: noop、
 トリガー: noop、
}

11. call メソッドを呼び出すとき、最初のパラメータは共有コンポーネントを呼び出すために使用するコマンドを指定します。現在 6 つのコマンドがサポートされています。彼らです:

デフォルト デフォルトでは、下部の共有コンポーネントが呼び出されます。このコマンドは、他のコマンドがサポートされていない場合にも呼び出されます。
タイムラインをMomentsに共有
アプリメッセージ WeChatの友達と共有
qq QQ友達と共有
qZone QQゾーンにシェア
weibo Weiboにシェア

要約する

Vue がブラウザ共有機能を呼び出す方法についてはこれで終わりです。Vue がブラウザを呼び出してコンテンツを共有する方法についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySql5.7.18 の文字セット構成の詳細なグラフィック説明

>>:  Linux カーネル デバイス ドライバー proc ファイル システム ノート

推薦する

MySQL学習データベース検索文DQL小百章

目次1. データの簡単な取得2. データの並べ替えと取得2.1. 基本構文2.2. ソート方向を指定...

シンプルなID生成戦略: MySQLテーブルからグローバルに一意のIDを生成する実装

グローバル ID を生成する方法は多数あります。ここでは簡単な解決策を紹介します。MySQL の自動...

mysql バッチで大量のデータを削除する

mysql バッチで大量のデータを削除する1000万件のレコードを持つテーブル(syslogs)があ...

CSSマウスを画像の上に置いたときにマスクレイヤー効果を追加する実装

まず効果を見てみましょう: マウスを画像の上に移動すると、影の効果とテキスト/アイコンが追加されます...

Zabbixで指定時間内の変化値を設定する方法の詳細な説明

背景説明: 既存の負荷分散装置には、付加価値状態にある指標があります (増加するだけで減少しないため...

MySQL 5.7.13 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...

MySQL 8.0 のインデックス スキップ スキャン

序文MySQL 8.0.13 では、インデックス スキップ スキャン (インデックス ジャンプ スキ...

正規表現に基づくあいまい文字列置換を実装するMySQLの方法の分析

この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...

Vueは下部のポップアップウィンドウで複数選択を実装します

この記事の例では、下部のポップアップウィンドウで複数選択を実装するためのVueの具体的なコードを共有...

HTMLチェックボックス説明テキストをクリックして状態を選択/チェック解除します

Web 開発では、チェックボックスは小さく、ユーザーにとって操作があまり便利ではないため、ユーザーが...

VirtualBox は CentOS7 仮想マシンと拡張ツールをインストールします (画像とテキスト)

コンピュータシステム: win7この記事は主に写真に基づいており、多くの写真が含まれていますCent...

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

HTML のテキストエリア タグ

<textarea></textarea> は、複数行を入力できるテキスト ...

パゴダパネルとドッカーを使用して Gogs をインストールするプロセス全体

目次1 Baota Software StoreにDockerをインストールする2 ゴグスイメージを...

MYSQL 文字列強制変換メソッドの例

序文2 つのテーブル内の同じフィールドの型が異なっていたり、エンコード タイプが異なっていたりするた...