美文网首页
vue全局封装微信公众号分享模块

vue全局封装微信公众号分享模块

作者: 一页莲子 | 来源:发表于2020-10-20 10:23 被阅读0次

    1.新建一个文件夹,这里我以vxshare.js文件为例。

    //安装 微信JSDK插件
    npm install weixin-js-sdk -D 
    
    //安装 jquery 这里以ajax为例 (不需要的小伙伴可以使用axios 原理其实是一样的)
    npm install jquery -D
    
    // 封装分享方法
    export function shareUrl(daurl) {
      var url = ''
      $.ajax({
        url: process.env.VUE_APP_BASE_API + '后端分享的API地址',
        type: 'post',
        // 是否需要设置请求头,这里不需要。
        // headers: {
        //   'Content-Type': 'text/plain'
        // },
        // 设置的是请求参数
        data: { shareUrl: daurl },
        // 用于设置响应体的类型 注意 跟 data 参数没关系!!!
        dataType: 'json',
        // eslint-disable-next-line space-before-function-paren
        success: function (res) {
          // 一旦设置的 dataType 选项,就不再关心 服务端 响应的 Content-Type 了
          // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
          // res 为后端响应返回的内容 具体需要根据你项目中后端返回的内容为主!!!
          url = res.data.url
          wx.config({
            debug: false, // 开启调试模式,
            appId: res.data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
            timestamp: res.data.timestamp, // 必填,生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
            signature: res.data.signature, // 必填,签名,见附录1
            jsApiList: ['onMenuShareAppMessage', 'hideMenuItems'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
          })
          wx.ready(function () {
            wx.hideMenuItems({
              menuList: [
                'menuItem:copyUrl',
                'menuItem:openWithSafari',
                'menuItem:openWithQQBrowser',
                'menuItem:originPage'
              ] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
            })
            wx.onMenuShareAppMessage({
              // updateAppMessageShareData
              title: '', // 分享标题
              desc: '', // 分享描述
              link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: ``,
              success: function () {
                /*.... doing somethings */
              },
              cancel: function () {
                console.log('用户取消分享')
                // 用户取消分享后执行的回调函数
              }
            })
          })
        }
      })
    }
    

    2.其他文件引入与使用

    //引入
    import { shareUrl } from '@/文件存放路径/vxshare.js'
    // 使用 这里最好加个异步延迟器 因为可能存在wx.config注入该当前文件分享时校验的问题
       setTimeout(()=>{
      //encodeURIComponent 将你的URL进行转译一下,因为微信分享出去后会带有多余用不到的参数
          shareUrl(encodeURIComponent('你需要分享的URL')) 
        },1000)
    

    tips:如果不知道微信JSDK使用的话,可点击微信jsdk文档进行访问查看

    相关文章

      网友评论

          本文标题:vue全局封装微信公众号分享模块

          本文链接:https://www.haomeiwen.com/subject/wnwrmktx.html