vue项目微信分享代码实现

1、微信分享实现

1、官方文档微信官方JSSDK使用文档说明

2、.首先安装微信js-sdk，针对vue我们就采用npm的安装形式，npm install weixin-js-sdk --save-dev

3、新建wxshare.js模块

import axios from './http'
import url from "./apiconfig"
import wx from 'weixin-js-sdk';
//
		//要用到微信API								
function getJSSDK(shareUrl,dataForWeixin) {
  axios.post(url.wxShare,{shareUrl}).then(res => {
    console.log(res);
    //console.log(typeof(res));
    // let response=JSON.parse(res.data);
    // console.log(response)
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appId, // 必填，公众号的唯一标识
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.noncestr, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名
      jsApiList:[
        'onMenuShareTimeline', 
        'onMenuShareAppMessage'
      ] // 必填，需要使用的JS接口列表
    })
    wx.ready(function () {
        //分享给微信朋友
      wx.onMenuShareAppMessage({
        title: dataForWeixin.title,
        desc: dataForWeixin.des,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        success: function success(res) {
          console.log('已分享');
        },
        cancel: function cancel(res) {
          console.log('已取消');
        },
        fail: function fail(res) {
          alert(JSON.stringify(res));
        }
      });
      // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
      wx.onMenuShareTimeline({
        title: dataForWeixin.title,
        link: dataForWeixin.linkurl,
        imgUrl: dataForWeixin.img,
        success: function success(res) {
          //alert('已分享');
        },
        cancel: function cancel(res) {
          //alert('已取消');
        },
        fail: function fail(res) {
          alert(JSON.stringify(res));
        }
      });
	// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
    //   wx.onMenuShareQQ({
    //     title: dataForWeixin.title,
    //     desc: dataForWeixin.desc,
    //     link: dataForWeixin.linkurl,
    //     imgUrl: dataForWeixin.img,
    //     trigger: function trigger(res) {
    //       //alert('用户点击分享到QQ');
    //     },
    //     complete: function complete(res) {
    //       alert(JSON.stringify(res));
    //     },
    //     success: function success(res) {
    //       //alert('已分享');
    //     },
    //     cancel: function cancel(res) {
    //       //alert('已取消');
    //     },
    //     fail: function fail(res) {
    //       //alert(JSON.stringify(res));
    //     }
    //   });
      // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
    //   wx.onMenuShareWeibo({
    //     title: dataForWeixin.title,
    //     desc: dataForWeixin.desc,
    //     link: dataForWeixin.linkurl,
    //     imgUrl: dataForWeixin.img,
    //     trigger: function trigger(res) {
    //       //alert('用户点击分享到微博');
    //     },
    //     complete: function complete(res) {
    //       // alert(JSON.stringify(res));
    //     },
    //     success: function success(res) {
    //       //alert('已分享');
    //     },
    //     cancel: function cancel(res) {
    //       // alert('已取消');
    //     },
    //     fail: function fail(res) {
    //     // alert(JSON.stringify(res));
    //     }
    //   });
    })
    wx.error(function (res) {
      alert("微信验证失败");
    });
  })
}
export default {
  // 获取JSSDK
  getJSSDK
}

4、在要微信分享的组件内引入

import sdk from "@/wxshare"

5、在组件内created或mounted函数中调用方法，并将需要分享的数据（标题、图片、描述、链接）传入函数中

mounted(){ 
            let wxshare=JSON.parse(localStorage.getItem("wxshare"));
            let obj={
                title:wxshare.projectname,
                des:wxshare.des,
                linkurl: "http://**/static/dist/index.html#/detail/"+localStorage.getItem("projectid"),//分享链接
                img: wxshare.imgUrl,	
            }
            let url = encodeURIComponent(location.href.split('#')[0]);
            sdk.getJSSDK(url, obj) 	
        },

2、遇到问题及解决

1. 请求签名时如果使用Vue的全路径（包括#部分路由）请求时会报签名失败或者无效的签名，因此我们需要使用以下方法来避免此问题

　　- 使用  location.href.split('#')[0] 获取到url中#之前的部分，将获取的url 传给后台请求签名

　　- 请求使用post, 保证传给后台的url是不经过任何加工的

2、给后台的url用encodeURIComponent（）编码，后台解码

3、安卓无效问题：updateAppMessageShareData、updateTimelineShareData这两个接口无效，原有的

wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone

接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的

wx.updateAppMessageShareData、updateTimelineShareData 接口。换回原来的方法就可以了

3、报错

1. invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名）

2. invalid signature签名错误。建议按如下顺序检查：

   1. 确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

   2. 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
   3. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
   4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
   5. 确保一定缓存access_token和jsapi_ticket。
   6. 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
3. the permission value is offline verifying这个错误是因为config没有正确执行，或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查：
   1. 确认config正确通过。
   2. 如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。
   3. 确认config的jsApiList参数包含了这个JSAPI。
4. permission denied该公众号没有权限使用这个JSAPI，或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口需要认证之后才能使用）。