h5 公众号 vue项目 分享

描述

h5 公众号 vue项目 分享 使用插件,方便快捷
这是修改浏览器上面...(3个点点点)的配置信息
jweixin-module 链接里的README.md文件有教程

安装

npm install jweixin-module --save

封装

• 新建一个 wechat_share.js 文件

export async function shareConfiguration(
  jweixin,
  wstitle = '分享的标题', //标题
  wsdesc = '分享的描述信息', //描述信息
  wslink = location.href,  //跳转的路径
  wsimg = location.origin + '/images/logo_1024.png'  //分享的图片
) {
  jweixin.ready(function() {
    // 分享到朋友圈
    jweixin.onMenuShareTimeline({
      title: wstitle,
      link: wslink,
      imgUrl: wsimg
    })

    // 分享给朋友
    jweixin.onMenuShareAppMessage({
      title: wstitle,
      desc: wsdesc,
      link: wslink,
      imgUrl: wsimg
    })

    // 分享到QQ
    jweixin.onMenuShareQQ({
      title: wstitle,
      desc: wsdesc,
      link: wslink,
      imgUrl: wsimg
    })

    // 微信到腾讯微博
    jweixin.onMenuShareWeibo({
      title: wstitle,
      desc: wsdesc,
      link: wslink,
      imgUrl: wsimg
    })

    // 分享到QQ空间
    jweixin.onMenuShareQZone({
      title: wstitle,
      desc: wsdesc,
      link: wslink,
      imgUrl: wsimg
    })
  })
}

使用

<script>
import { shareConfiguration } from '@/utils/wachat_share'
const jweixin = require('jweixin-module')
export default {
  mounted() {
  const url = location.href  //是当前的路径可以不传
    shareConfiguration(jweixin, '我是一个标题', '我是一个描述信息',url)
  },
}
</script>

其他

• 发现一个也是分享的插件share.js
  PS:这个插件本人没有测试过,看到应该可以使用,很多star(3.3K)

动动手指点赞

如果这篇文章对你有用,请给我点个赞,让我更加有动力写下去,谢谢