其他分享
首页 > 其他分享> > vue h5 jssdk 微信分享好友和朋友圈

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