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 をよろしくお願いいたします。