How to call the browser sharing function in Vue

Preface

Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Officially described as a progressive framework, this article mainly introduces the relevant information about vue calling browser sharing. Let's take a look at the detailed introduction.

Here are the steps:

1. Development environment vue+vant

2. Computer system Windows 10 Professional Edition

3. In the process of using Vue development, we often encounter sharing. Let me share my method below, I hope it will be helpful to you.

4. Look at the effect picture first:

5. Use NativeShare.js to achieve the above functions

// Install npm install nativeshare

6. Introduce in the corresponding component

import NativeShare from 'nativeshare'

7. Click the share icon and add the corresponding code in methods:

cshare() {
 if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
 this.ui.showToast('Please open QQ browser to share pictures and texts', 2)
 } else {
 try {
 this.nativeShare.setShareData({
 // link: 'http://192.168.3.82:8080/#/pages/index/itest',
 title: 'title111',
 desc: 'desc11',
 // icon: 'https://t12.baidu.com/it/u=751929707,172094732&fm=76',
 })
 this.nativeShare.call('default ')
 } catch (err) {
 console.log(err)
 this.ui.showToast('This browser does not support jump')
 }
 }
 },

8. Why choose NativeShare.js?

Compatibility (without a doubt the most compatible browser plugin)

Problems:

1.UC Android cannot set icon

2. Baidu Browser Android cannot specify sharing

9. NativeShare has only three powerful methods:

getShareData() Get the shared text setShareData() Set the shared text call(command = 'default', [options]) Call the browser's native sharing component

10.ShareData sets the format of the copy as

{
 icon: '',
 link: '',
 title: '',
 desc: '',
 from: '',
 // The following callbacks are currently only supported in WeChat and QQ. success: noop,
 fail: noop,
 cancel: noop,
 trigger: noop,
}

11. When calling the call method, the first parameter specifies the command to use to call the shared component. Currently 6 commands are supported. They are:

default By default, the sharing component at the bottom is called. This command will also be called when other commands are not supported
Share timeline to Moments
appMessage Share with WeChat friends
qq Share with QQ friends
qZone Share to QQ Zone
weiBo Share to Weibo

Summarize

This is the end of this article about how Vue calls the browser sharing function. For more relevant Vue calls the browser to share content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!