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 ファイル システム ノート

推薦する

KVM 仮想マシンのオンライン ホット マイグレーションを実装する方法 (画像とテキスト)

1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...

Vue 名前付きスロットの基本的な使用例

序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....

Flinkのフォールトトレラントメカニズムに関する簡単な説明:ジョブ実行とデーモン

目次1. ジョブ実行のフォールトトレランス1.1 タスクフェイルオーバー戦略1.2 ジョブ再開戦略2...

Mysql SSHトンネル接続を使用するための基本的な手順

序文セキュリティ上の理由から、MySQL の root ユーザーはローカルにのみログインでき、外部ネ...

Docker 経由で CentOS コンテナを作成する手順

目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...

IDEA Maven プロジェクトで Tomcat をデバッグ モードで実行する詳細なチュートリアル

1. pom.xmlに次の依存関係を追加します。 <依存関係> <groupId&...

Linux 仮想マシンの IP アドレスを変更し、ゲートウェイを確認し、ネットワーク環境を構成する方法に関するチュートリアル

仮想マシンの IP アドレスを変更します。 次のインターフェイスに入り、サブネット IP を直接変更...

ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ

注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...

Vueはマルチタブコンポーネントを実装します

効果を直接確認するために、リロード、左を閉じる、右を閉じる、その他の機能を閉じるなどの右クリック メ...

WeChatアプレットトラック再生の実装と遭遇した落とし穴の詳細な説明

WeChat アプレットの軌跡再生では、主に線描画操作にポリラインを使用し、車の移動操作にマーカーを...

Linux で Ceph 分散ソフトウェアをインストールして使用する方法に関するチュートリアル

目次序文1. 基本環境1. サービス配信2. ネットワーク構成(全ノード) 3. SSHパスワードフ...

JavaScript プロトタイプとプロトタイプチェーンの深い理解

目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...

CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装

Apollo オープンソース アドレス: https://github.com/ctripcorp/...

FileZilla Server の FTP サーバー構成と 425 エラーおよび TLS 警告の解決策の詳細な説明

123WORDPRESS.COM では、FileZilla のダウンロード リンクを提供しています:...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...