记一次微信分享与企业微信分享兼容处理

项目h5最开始已经引入了微信的jssdk，有了微信的分享功能，但是最近有个需求需要在企业微信中分享，刚开始拿到需求的时候啥也没看，直接翻开api开始撸。

采用了静默授权的方式，企微环境进入之后微信会重定向到我们的h5并且带了code，我们拿这个code和location.href去服务端换取appId等配置信息。

//企微redirect_url追加的code
//退出登录时 【不要清 不要清 不要清！！！】 localStorage下的code和state
//退出登录后 query.code没有值
if (/wxwork/i.test(navigator.userAgent) && this.$route.query.code) {
  localStorage.jweixin_code = this.$route.query.code;
  localStorage.jweixin_state = this.$route.query.state;
  let oauthData = await oauth();
  console.log('--oauthData', oauthData);
  if (oauthData.data.authCorpId) {
    //存在登录页面强制刷新时，因code只能被消费一次，此时authCorpId会return null
     localStorage.jweixin_authCorpId = oauthData.data.authCorpId;
  }
}

config配置完成之后，调用分享api，测试的时候发现，卧槽，没生效！

最后发现,企微的sdk和微信sdk时不能同时存在共用的，也是翻到社区大哥的回复才知道的！

社区回复参考： 企业微信jssdk 和微信jssdk 是否一致 | 微信开放社区

总的来说就是企业微信要1.2的版本，微信的目前用的1.6.0，根据环境判断分别引入

大致代码如下：

import { iswxwork } from '@/utils/check.js';
import Vue from 'vue'

let el = {}
if (!iswxwork()) {
    el = require('@/utils/wxShare.js');
    el.createWxEle();

} else {
    el = require('@/utils/wxworkShare.js');
    el.createWxworkEle();
}


Vue.prototype.$commonShare = (shareMes) => {
    if (!iswxwork()) {
        el.getWxConfig(shareMes); //{title, linkUrl, sharePic, sortTitle}
    } else {
        el.wxwork_init(shareMes);
    }
}

/utils/check.js

//判断是企业微信环境
export const iswxwork = () => {
    return /wxwork/i.test(navigator.userAgent)
}

1. 微信内代码如下：【utils/wxShare.js】

import { wxShare } from '@/api/home.js';
import { Toast } from "vant";

//https://developers.weixin.qq.com/community/develop/doc/000e8a9c5f87f8f52ff9593355d800

export const createWxEle = () => {
    window.wx = null;
    window.jWeixin = null;
    if (document.getElementById("wxScriptId")) {
        removeJweixin();
    }
    appendjweixin();
}
export const getWxConfig = (shareMes) => { // {title, linkUrl, sharePic, sortTitle}
    wxShare(location.href)
        .then((res) => {
            // this.artDetail = res.data.data
            let config = res.data;
            window.wx.checkJsApi({
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage'
                ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function (res) {
                    console.log(res);
                }
            });
            window.wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: config.appId, // 必填，公众号的唯一标识
                timestamp: config.timestamp, // 必填，生成签名的时间戳
                nonceStr: config.nonceStr, // 必填，生成签名的随机串
                signature: config.signature, // 必填，签名
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage'
                ] // 必填，需要使用的JS接口列表
            });
            window.wx.error(function (res) {
                // alert('出错了：' + res.errMsg) //这个地方的好处就是window.wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
                console.log(res.errMsg);
            });
            window.wx.ready(() => {
                console.log(1111111111111);
                wx_share(
                    shareMes.title,
                    shareMes.linkUrl,
                    shareMes.sharePic,
                    shareMes.sortTitle
                );
                wx_TimelineShare(
                    shareMes.title,
                    shareMes.linkUrl,
                    shareMes.sharePic,
                    shareMes.sortTitle
                );
            });
        })
        .catch((error) => {
            Toast.fail(error);
        });
}


function appendjweixin () {
    const ele = document.createElement('script');
    ele.type = 'text/javascript';
    ele.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
    ele.id = "wxScriptId"
    document.body.appendChild(ele);
}

function removeJweixin () {
    let ele = document.getElementById("wxScriptId")
    document.body.removeChild(ele)
}


function wx_share (title, link, imgurl, desc) {
    //微信好友
    window.wx.updateAppMessageShareData({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: link, // 分享链接
        imgUrl: imgurl, // 分享图标
        type: 'link', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
}

function wx_TimelineShare (title, link, imgurl) {
    //朋友圈
    window.wx.updateTimelineShareData({
        title: title, // 分享标题
        link: link, // 分享链接
        imgUrl: imgurl, // 分享图标
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
}

1. 企业微信代码如下 【utils/wxworkShare.js】

import { jwxShare } from "@/api/home"

export const createWxworkEle = () => {
    window.wx = null;
    window.jWeixin = null;
    if (document.getElementById("wxworkScriptId")) {
        removewxwork();
    }
    appendwxwork();
}

export const wxwork_init = async (params) => { // {title, linkUrl, sharePic, sortTitle}
    let res = await getAppId()
    console.log('getAppId', res)
    wxwork_setConfig(res, {
        title: params.title,
        desc: params.sortTitle,
        link: params.linkUrl,
        imgUrl: params.sharePic
    });
}

async function getAppId () {
    let config = await jwxShare();
    console.log("config", config);
    return config.data
}

function wxwork_setConfig ({ appId, timestamp, nonceStr, signature }, params) {
    const jsApiList = [
        "onMenuShareAppMessage",
        "onMenuShareWechat",
        "onMenuShareTimeline",
    ]
    window.wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId, // 必填，企业微信的corpID
        timestamp, // 必填，生成签名的时间戳
        nonceStr, // 必填，生成签名的随机串
        signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
        jsApiList // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
    });
    window.wx.checkJsApi({
        jsApiList, // 需要检测的JS接口列表
        success: (res) => {
            console.log("checkJsApi success", res)
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });
    window.wx.ready((r) => {
        console.log('rrr', r)
        wxwork_onMenuShareAppMessage(params)
        wxwork_onMenuShareWechat(params)
        wxwork_onMenuShareTimeline(params)
    })
    window.wx.error((e) => {
        console.log('eee', e)
    })
}
// 转发
function wxwork_onMenuShareAppMessage ({ title, desc, link, imgUrl }) {
    window.wx.onMenuShareAppMessage({
        title, // 分享标题
        desc, // 分享描述
        link, // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
        imgUrl, // 分享图标
        // enableIdTrans: 1, // 是否开启id转译，不填默认为0
    });
}
// 分享到微信
function wxwork_onMenuShareWechat ({ title, desc, link, imgUrl }) {
    window.wx.onMenuShareWechat({
        title, // 分享标题
        desc, // 分享描述
        link, // 分享链接
        imgUrl, // 分享图标
        // enableIdTrans: 1, // 是否开启id转译，不填默认为0
    });
}
// 分享到朋友圈
function wxwork_onMenuShareTimeline ({ title, link, imgUrl }) {
    window.wx.onMenuShareTimeline({
        title, // 分享标题
        link, // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
        imgUrl, // 分享图标
        // enableIdTrans: 1, // 是否开启id转译，不填默认为0
    });
}

function appendwxwork () {//
    const ele = document.createElement('script');
    ele.type = 'text/javascript';
    ele.src = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js';
    ele.id = "wxworkScriptId"
    document.body.appendChild(ele);
}
function removewxwork () {
    let ele = document.getElementById("wxworkScriptId")
    document.body.removeChild(ele)
}

还有一个坑点会导致企微配置config时签名失败，就是 jwxShare这个接口 url记得转义一下

url: encodeURIComponent(location.href)

遇到的其他问题见官方文档即可~