vue微信分享

Posted on Edited on In

上文 配置环境

这篇主要是分享vue做微信分享

假设本地的开发环境已经准备好了!!! 👍 并且你有一个好的同事为你写好了接口😊

npm的地址

sdk
axios

1
2
3
npm install weixin-js-sdk #微信官方js-sdk

npm install axios #基于Promise的HTTP客户端，用于浏览器和node.js

新建一个js文件(假如他叫wechat_share.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import wx from 'weixin-js-sdk'
import axios from 'axios'

export default ({ title, desc, link, imgUrl }) => {
  let defaultTitle = '默认标题'
  let defaultDesc = '默认描述'
  let defaultLink = window.location.href
  let defaultimgUrl ='默认图片'
  // 通过接口获取签名信息, 传递url过去, url 需要 encodeURIComponent
  axios
    .get(`/xxx/sign?url=${encodeURIComponent(defaultLink)}`)
    .then(res => {
      if (res.status === 200 && '其他判断') {
        let { hash, timestamp, nonce } = res.data.data
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: 'xxxxxx', // 必填，公众号的唯一标识
          timestamp, // 必填，生成签名的时间戳
          nonceStr: nonce, // 必填，生成签名的随机串
          signature: hash, // 必填，签名
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareAppMessage'
          ]
        })
        wx.error(function(res) {
          console.log('wechat error', res)
        })
        wx.ready(function() {
          wx.updateAppMessageShareData({
            title: title || defaultTitle,
            desc: desc || defaultDesc,
            link: link || defaultLink,
            imgUrl: imgUrl || defaultimgUrl,
            success: function() {
              console.log('wechat share success updateAppMessageShareData')
            }
          })
          wx.updateTimelineShareData({
            title: title || desc || defaultTitle,
            link: link || defaultLink,
            imgUrl: imgUrl || defaultimgUrl,
            success: function() {
              console.log('wechat share success updateTimelineShareData')
            }
          })
          // 即将废弃，适配电脑版微信，参考：https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115#10
          wx.onMenuShareAppMessage({
            title: title || defaultTitle,
            desc: desc || defaultDesc,
            link: link || defaultLink,
            imgUrl: imgUrl || defaultimgUrl,
            success: function() {
              console.log('wechat share success onMenuShareAppMessage')
            }
          })
        })
      }
    })
}

封装了一个简单的方法, 用户做微信分享 我们只需要调用方法, 并且传递信息即可, 里面的标题信息可以根据自己的实际情况修改!!!

接下来只需要在使用的地方调用即可(我在全局写了一个)

1
2
3
4
5
6
7
// main.js
import wechatShare from 'wechat_share'
Vue.prototype.$wechatShare = wechatShare

// other.vue xxx used

this.$wechatShare({})

如果每个页面都调用一次那就太麻烦了, 利用router的钩子函数, 然后把方法放入router.js 里面, 使用 router.afterEach 方法(全局后置钩子)

1
2
3
4
5
6
// router.js
import wechatShare from 'wechat_share'

router.afterEach((to, from) => {
  wechatShare({})
})

然后每个页面都会拥有分享功能(😄😄😄😄)

但是这里有一个问题⚠️️️️️⚠️️️️️⚠️️️️️, 切换页面 然后去签名的时候, 微信报错说是无效签名!!!!

原因是因为传递的localhost.href与当前页面不符合!!!

因为router.afterEach是异步的(别人这样说的)然后需要通过this.$nextTick来解决(用setTimeout也可以 但是不太好 你懂的233)

1
2
3
4
5
6
7
8
9
// router.js
import wechatShare from 'wechat_share'
import Vue from 'vue'

router.afterEach((to, from) => {
  Vue.nextTick(() => {
    wechatShare({})
  })
})

在router里面使用讲this.$nextTick修改为Vue.nextTick(这样就可以解决, router.afterEach获取的localhost.href与当前页面不符合的问题

然后就是一个个别页面, 需要定制化内容分享, 调用方法即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 异步
async xx() {
  await xx().then(() => {
      this.$wechatShare({
        title,
        desc,
        imgUrl
      })
  })
}

// 同步
this.$wechatShare({
  title,
  desc,
  imgUrl
})

如果是异步的只需要在调用完方法之后, 调用写入内容即可(🚀🚀🚀)

如果每个页面都想设置怎么办???

解决方案 在router的meta里面配置一些简单的信息即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
router: [
     {
      path: '/',
      name: 'index',
      component: () => import(/* webpackChunkName: "index" */ 'index.vue'),
      meta: {
        title: 'xxxxxxxxxx'
        ....
      }
    },
]
...

router.afterEach((to, from) => {
  Vue.nextTick(() => {
    wechatShare({
      title: to.meta.title
    })
  })
})

在钩子函数afterEach里面设置默认的title: to.meta.title 👍 🚀 🔥

效果图

体验地址 微信打开会自动跳转的

https://matataki.io/

效果图