ic-vue-share

An module about wechat-share for rapid development.

Install

You can get it from npm.

1$ npm i ic-vue-share || yarn add ic-vue-share

Usage

1import Vue from 'vue'
2import IcShare from 'ic-vue-share'
3
4Vue.use(IcShare, options)

Optional param options

You can passed an optional object as the second param, you can define some useful properties in the options as below:

url

A string value for getting auth from wechat for using jsApi. Required. Throw an error both authFn and url are null.

authFn

Internal, we use a jsonp function to get authentication from the specified url above. You can customize yourself's logic for authentication from server by the authFn function. The function must be return a promise or async function with auth-data from server. We dont supports callback form...

jsApiList

An array of interfaces needed to be auth. More informations is here.

debug

The option is convenient for developing. A boolean which to set by process.env.NODE_ENV. Thats to say, it is false when process.env.NODE_ENV === 'production'. Of course, you can explicitly passed a boolean value to it.

shareDataConfig

Required. An object config jsApiList data.

1    {
2        data () {
3            return {
4                shareDataConfig: {
5                    onMenuShareTimeline: {
6                        title: '',
7                        desc: '',
8                        link: '',
9                        // ...
10                    },
11                    onMenuShareQQ: {
12                        title: '',
13                        desc: '',
14                        imgUrl: '',
15                        // ...
16                    }
17                }
18            }
19        }
20    }

jsApiList

An string array of auth-interfaces. It is optional, once you config jsApi data like above, if you omited it, we get it with Object.keys(shareDataConfig). Actually, we get it from these places:

1jsApiList = jsApiList || options.jsApiList || Object.keys(shareDataConfig)

So a detail example as below:

1Vue.use(IcShare, {
2    // if you specify authFn, than url is optional
3    url: '//path/a/b',
4    // optional
5    jsApi: ['onMenuShareQQ', ...],
6    // optional
7    debug: '',
8    // optional
9    authFn: async () => {
10        // http send and get data from server
11        const authData = await ajax('....')
12        return authData
13    },
14    // optional
15    hideAllMenus: ''
16})

In a component:

1method: {
2    share () {
3        this.$enableWechatShare(this.shareDataConfig)
4    }
5}

$enableWechatShare(shareDataConfig, jsApiList)

In internal, we mounted a method $enableWechatShare to Vue.prototype, so you can use this.$enableWechatShare in pages will be shared.

$setWechatShareUrl

This api for compatibility with ios platform in some special scenarios. We can only use the url of the first opening a page to auth wechat-jsApi once, if you have redirection scenario, you may use the api to set the first url.

For example: Assuming we have three pages, list, home, login. If you have logined and scan a qrcode of login page than redirect to home page, but your shared page is list page. In this case , you should call $setWechatShareUrl in home page as below:

home.vue

1{
2    mounted: {
3        this.$setWechatShareUrl(window.location.href)
4    }
5}

If redirecting to page will be shared directly, you need call $enableWechatShare in that page only.