【新手必看】vue如何使用微信jssdk调用微信，朋友圈分享功能

【新手必看】vue如何使用微信jssdk调用微信，朋友圈分享功能

【该分享共分三部分】

1. 微信公众号配置
2. Vue框架调用jssdk
3. 代码示例分享

一、关于公众号配置

微信JS-SDK说明文档

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});

上面是官方示例，在分享前这些配置参数必须保证正确才能分享，下面详细讲解这几个参数

1.	appId 这是你注册公众号就会有的，登录进去->开发者中心可查看
2. 	timestamp 当前时间戳即可
3. 	nonceStr 随机字符串，由开发者设置传入， 加强安全性（若不填写可能被重放请求） 。随机字符串，不长于32位。推荐使用大小写字母和数字，不同添加请求的nonce须动态生成，若重复将会导致领取失败。
4. 	signature 将 api_ticket、timestamp、card_id、code、openid、nonce_str的值拼接成一个字符串进行sha1加密
5. 	jsApiList 就是当前项目所需要的接口列表

上面的signature生成时需要一个api_ticket，这是哪来的呢？

一般这块是需要后端来做，前端人员只需调取接口即可，我们大概说一下。
这里就不得不提到access_token,它是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。它的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效。建议公众号开发者使用中控服务器统一获取和刷新access_token，其他业务逻辑服务器所使用的access_token均来自于该中控服务器，不应该各自去刷新，否则容易造成冲突，导致access_token覆盖而影响业务。

1. 首先拿到appId和appSecret去获取access_token  请求URL：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
2. 再用上面获取的access_token去获取api_tickt 请求URL：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

还有个需要注意的点就是配置域名(项目页面访问域名和接口域名)时必须是已备案的域名，不要带端口号

二、关于Vue框架调用SDK

首先安装jssdk

	npm install weixin-js-sdk --save-dev

然后建一个公共js文件，比如 share.js,在文件中引入

	import wx from 'weixin-js-sdk'

三、代码示例分享

import wx from 'weixin-js-sdk';
import $http from '../businessUtils/HTTP'//这里是我封装好的axios请你接口文件 你也可以用ajax
import sha1 from 'sha1'
import { AppId, WxShareApi } from '../constant/Env.js';//我的env配置文件,appId和接口域名WxShareApi都在这里

   function getWXConfig(dataObj){
        const timeCode = new Date().getTime()
        const nonceStr = Math.random().toString(36).substr(2, 15)
        const wx_localUrl = location.href.split('#')[0]
        $http.post(WxShareApi + "/wechat/getticket",{
            time: timeCode,
            code : sha1('XXXX' + timeCode) ,//与后端定义好的加密方式
        })
        .then(function(response){
            var signatureText = 'jsapi_ticket=' + response.data.data.ticket + '&noncestr=' + nonceStr + '&timestamp=' + timeCode + '&url=' + wx_localUrl;//这里的拼接方式上面有讲，与文档一致即可
            wx.config({
                debug: false,
                appId: AppId, // 必填，公众号的唯一标识
                timestamp: timeCode, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: sha1(signatureText),// 必填，签名，sha1加密哈
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
            });
            wxshare(dataObj)
        })
        .catch(function(error){
            console.log(error);
        });
    }

    function wxshare(dataObj) {
        // console.log('=dataObj==',dataObj)
        wx.ready(function () {
            var shareData = dataObj;
            var sharetitle = shareData.sharetitle||'';
            var sharedesc = shareData.sharedesc||'';
            var shareimg = shareData.shareimg||'';
            var linkUrl = shareData.sharelink||''; // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function (res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                }
            });
            wx.onMenuShareTimeline({
                title: sharetitle, // 分享标题
                desc: sharedesc, // 分享描述
                link: linkUrl,
                imgUrl: shareimg,
                success: function (data) { // 用户点击了分享后执行的回调函数
                    // console.log(222222,data)
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                    // console.log(222222,'cancel')
                }
            });
            wx.onMenuShareAppMessage({
                title: sharetitle, // 分享标题
                desc: sharedesc, // 分享描述
                link: linkUrl,
                imgUrl: shareimg,
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

                success: function (data) { // 用户点击了分享后执行的回调函数
                    // console.log(33333,data)
                },
                cancel: function () { 
                    // 用户取消分享后执行的回调函数
                    // console.log(33333,'cancel')
                }
            });
        });
    }

    export default getWXConfig

需要分享的地方调取示例，将参数传给封装好的方法即可

var wxData = {
        sharetitle: "这里是分享标题",
        sharedesc: "这里是分享的描述",
        shareimg: "这里是分享图片",
        sharelink:"这里是分享链接"
    }
    getWXConfig(wxData);
}

以上就是我在开发中实际的过程，如果对你有帮助请点个赞~~~