VUE项目引入微信JSSDK 实现微信自定义分享

VUE项目引入微信JSSDK 实现自定义分享

前端vue、后端php

问题：后端获取config参数所需的url 需要和请求自定义分享页面url一致

一、微信公众号后台添加 js安全域名（白名单）

二、(前端) VUE引入微信JSSDK

1、yarn add weixin-js-sdk或者npm install weixin-js-sdk --save-dev
2、封装wx分享功能
在asset中新建wx.js

import axios from "axios";
import wx from 'weixin-js-sdk';
//初始化微信sdk
const wxShowMenu = shareData => {
    return new Promise((resolve, reject) => {
        axios
            .get("******") //请求你们公司后台的接口 获取相关的配置
            .then(
                res => {
                    var getMsg = res.data;
                    // console.log("微信配置----------")
                    wx.config({
                        debug: false, //生产环境需要关闭debug模式  测试环境下可以设置为true 可以在开发者工具中查看问题
                        appId: getMsg.appId, //appId通过微信服务号后台查看
                        timestamp: getMsg.timestamp, //生成签名的时间戳
                        nonceStr: getMsg.nonceStr, //生成签名的随机字符串
                        signature: getMsg.signature, //签名
                        jsApiList: [ //需要调用的JS接口列表
                            "updateAppMessageShareData", //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） 新接口
                            "updateTimelineShareData", //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） 老接口
                            "onMenuShareTimeline", //分享到朋友圈 老接口
                            "onMenuShareAppMessage",//分享给盆友 老接口
                        ]
                    });
                    wx.error(function (res) {
                        //alert(JSON.stringify(res))
                        console.log(res)
                        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                    });
                    wx.ready(function () {
                        wx.onMenuShareAppMessage({
                            title: shareData.tTitle,
                            link: shareData.timeLineLink,
                            imgUrl: shareData.imgUrl,
                            desc: shareData.tContent,
                            success: function () { }
                        });
                        wx.onMenuShareQQ({
                            title: shareData.tTitle,
                            link: shareData.timeLineLink,
                            imgUrl: shareData.imgUrl,
                            desc: shareData.tContent,
                            success: function () { }
                        });
                        wx.onMenuShareTimeline({
                            title: shareData.tTitle,
                            link: shareData.timeLineLink,
                            imgUrl: shareData.imgUrl,
                            success: function () { }
                        });
                    });
                    resolve(res);
                },
                err => {
                    reject(err);
                }
            );
    });
};
export { wxShowMenu };

3、在要使用自定义分享的页面中引入wx.js，并自定义分享内容

	import { wxShowMenu } from "../assets/wx";
	
	//初始化分享信息
    wxShareInfo(data) {
      var vm = this;
      var shareData = {
        imgUrl: data.share_info.pic, //域名在白名单中
        timeLineLink:data.share_info.url,//域名在白名单中
        tTitle: data.share_info.title,
        tContent: data.share_info.content
      };
      //调用初始化方法
      wxShowMenu(shareData).then(
        res => {
          console.log(res);
        },
        err => {
          console.log(err);
        }
      );
    },

二、(后端)php生成config参数返回

没有使用前端传当前url的形式，直接获取了request 中的REFERER，一层请求可以。
如果有多层调用还是需要用传url的形式！url是页面完整的url，location.href.split(’#’)[0]为了排除微信自己添加的参数，encodeURIComponent处理后传给后端，后端再解析。

后端api接口

define("APPID","***");
define("APPSECRET","*****");
include_once('wx_js_sdk_http.php');
$ourl = $_SERVER['HTTP_REFERER'];
$jssdk = new JSSDK(APPID, APPSECRET,$ourl);
$signPackage = $jssdk->getSignPackage();
echo json_encode($signPackage);

wx_js_sdk_http.php之前写过php脚本式的获取方式
只需要修改几处即可

		//添加$Ourl外部传入的请求url
		public function __construct($appId, $appSecret,$Ourl) {
                $this->appId = $appId;
                $this->appSecret = $appSecret;
                $this->Ourl = $Ourl;
        }
        ....
        //修改使用的url为传入的
        //$protocol = $_SERVER['HTTP_X_FORWARDED_PROTO']=='https'? "https://" : "http://";
        //$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
        $url = $this->Ourl;
		...