vue h5 jssdk 微信分享好友和朋友圈

微信分享对于前端还是很简单的， 主要根据文档和后台返回的数据就可以了

1、vue项目中安装weixin-js-sdk （npm install weixin-js-sdk）
2、 方便维护src 下建立weixin 文件夹 ， 其下又建立wxsdk.js 进行初始化设置封装

import wx from 'weixin-js-sdk'
export default {
  /**
   * 
   * @param {*} api  微信公众号api
   * @param {*} fn 回调
   */
   // 分享
  setShare(param = {}, callback) {
    let registerUrl = window.location.href
    // if (isIOS()) {
    //     // 只要根路径
    //     registerUrl = window.location.origin + '/'
    //     console.log(window.location, 'host:')
    // }
    // 需要encodeURIComponent 不然会有问题（调用你们的接口获取到初始化配置的相关信息）
    /**调用你们的接口获取到初始化配置的相关信息----开始---**/
    apiList.getGryJsapiSignerToken({		
        query: {
          url: encodeURIComponent(registerUrl)
        },
        hasLoading: false
      }).then(res => {
        let {
          code,
          data
        } = res
        console.log('请求微信配置成功>>>>', new Date().getTime(), data)
        if (Number(code) === 0) {
        /**调用你们的接口获取到初始化配置的相关信息----结束---**/
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: [
                // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
                'updateTimelineShareData',
                // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
                'updateAppMessageShareData',
                'hideMenuItems',
                'wx-open-launch-weapp'
            ], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
          })
          
          wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
           console.log('配置成功分享:', param.title, param.imageUrl, param.link, param.desc)
            wx.updateTimelineShareData({
                title: param.title, // 分享标题
                link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: param.imageUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                    typeof callback === 'function' && callback()
                }
            })
                // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
            wx.updateAppMessageShareData({
                title: param.title, // 分享标题
                desc: param.desc, // 分享描述
                link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: param.imageUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                    typeof callback === 'function' && callback()
                }
            })
          })
          wx.error(function (res) {
            console.error(res, '>>>>>>>失败')
          })
        }
      })  
  },  
  // 隐藏特定菜单
  hideMenu() {
    // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
    wx.hideMenuItems({
      menuList: [
        "menuItem:share:qq",
        "menuItem:copyUrl",
        "menuItem:openWithQQBrowser",
        "menuItem:openWithSafari",
        "menuItem:share:email"
      ]
    })
  }
}

3、 在需要调用分享的页面引入wxsdk 文件直接调用setShare 方法传入对应参数就可以了

注意： 全局调用和在单个页面中使用也是一样的方式 区别就在于执行的方法不一样
由于公司项目需要全局配置分享相关所以使用了中间键的方式

import wxJsSdk from 'weixin/wxsdk'
import {isWeiXin} from 'utils/tools'
// 区别是否是微信环境下的方法
export const isWeiXin = function () {
    var ua = window.navigator.userAgent.toLowerCase()
    const b = ua.match(/MicroMessenger/i)
    if (b && b.length > 0) {
      return true
    } else {
      return false
    }
  }
  // 在中间键中的afterEachHandle 方法中全局设置就行了
    // 判断是否 微信端 ，定死分享数据
   isWeiXin() && wxJsSdk.setShare({
     title: '', // 分享标题
     desc: '', // 分享描述
     link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
     imageUrl: '', // 分享图标 （https 或者http 不能写本地图片）
   })

4、 最后注意点：微信jssdk 配置参数的大小写问题

标签：function,vue,jssdk,接口,param,调用,朋友圈,分享,wx
来源： https://blog.csdn.net/weixin_43998944/article/details/114011027