前端wx-jssdk的运用及企微和微信下分享等功能自定义处理

9KmCyT · 发表于 2022-12-30 15:04:49

前端wx-jssdk的使用及企微战微疑下分享等功用自界说处置

1、前端wx-jssdk的使用

wx-jssdk使用需要微疑公家仄台内乱截至树立（加入公家号树立的“功用树立”里挖写“JS交心宁静域名“的操纵）及后端共同才气真实使用，下文是报告前端怎样使用。
wx-jssdk的交心文档
一、导包

正在main.ts中（以vite+react名目中为例），为何正在main.ts中截至使用呢？其实在index.html文献中挪用也是能够的，因为尔要用到一点儿大众办法，而且包管要完毕减载正在线wx-jssdk包完后，再截至挂载等步，完毕同步变共步处置更便利，便搁正在main.ts中。搁正在index.html 并包管同步变共步完整减载完wx-jssdk包便止，即：撑持使用 AMD/CMD规范模块减载办法减载

import React from'react';import ReactDOM from'react-dom';import{ BrowserRouter }from'react-router-dom';import App from'./app';import{ getEnv，WECHAT_ENV}from'@/utils';//import '@/utils/setup.ts';//import '@/assets/css/reset.less';//import '@/assets/css/base.less';//import '@/assets/font/iconfont.css';const script = document.createElement('script');// @ts-ignore
script.crossorigin ='anonymous';const sdkVerion =getEnv()===WECHAT_ENV.qyWechat ?'jweixin-1.2.0.js':'jweixin-1.6.0.js';// 开辟情况战线上情况的wxsdk的路子有所区分// script.src = process.env.NODE_ENV === 'development' ? `./public/lib/${sdkVerion}` : `./lib/${sdkVerion}`;
script.src =`https://res.wx.qq.com/open/js/${sdkVerion}`;
script.onerror=()=>{
console.log('qy-wx-sdk:loadError');};
script.onload=()=>{
console.log({ wx });//必需等wxsdk 减载完以后,才气衬着页里
ReactDOM.render(<BrowserRouter basename={`/${import.meta.env.VITE_APP_NAME}`}><App /></BrowserRouter>,
document.getElementById('root'));};
document.head.appendChild(script);

复造代码

二、使用

wx-jssdk供给了企微战微疑情况下的一点儿办法截至使用：（wx-jssdk的交心文档、企业微疑-wxjssdk）

启拆的getTicket

import ajax from'@/utils/ajax';import{ ConfigOptions, JSApiList }from'wx-jssdk';import{ getEnv，WECHAT_ENV}from'@/utils';// 一般署名exportconstgetTicket=async(jsApiList, callback, isShowError =true, maxRequestCount =3)=>{// 开辟+实机调试情势，要初初化JS_SDK if(process.env.NODE_ENV==='development'&&!process.env.WX_JS_SDK_ENABLED)return;let url ='';//假设是 iOS 装备，则使用第一次加入App时的 URL 来恳求 wxConfig，否则的话会招致 iOS 平分享的链交描绘疑息大概图标不合错误if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)&& env ===2){
url =encodeURIComponent(localStorage.getItem('entryUrl'));// 有保留正在localstorage中的页里路子}else{// console.log('署名地点=======================', window.location.href)
url =encodeURIComponent(window.location.href);}const params ={
appId: newAppId || appId,
corpId: env ===2? authCorpId : currentCorpId,
wechatType: env,
jsUrl: url,
agentId,};
console.log('getTicket',`path=${location.pathname} url=${decodeURIComponent(params.jsUrl)}`);try{const res =awaitajax('getTicket', params, isShowError);// 后端界说的交心那里的ajax是自界说的const{ retdata ={}}= res;const{ appId, noncestr, signature, timestamp, nextUpdateTime }= retdata;const obj ={
debug:false,// 可否启开调试情势
appId,// appid
timestamp,//时间戳
nonceStr: noncestr,// 随机字符串
signature,// 署名
jsApiList,
openTagList:['wx-open-launch-weapp'],};if(env ===1){
obj.beta =true;
obj.appId = currentCorpId;}
wx.config(obj);
wx.ready(function(){if(typeof callback ==='function')callback(jsApiList);});
wx.error((res)=>{
console.log('%c zjs wx.error res:','color: #0e93e0;background: #aaefe5;', res);if(typeof callback ==='function'&& maxRequestCount >0)callback(newError('error'));});}catch(e){
console.log('%c zjs getTicket err:','color: #0e93e0;background: #aaefe5;', e);setTimeout(()=>{
maxRequestCount >0&&getTicket(jsApiList, callback, isShowError,--maxRequestCount);},1000);}};// 企业微疑下一点儿自修使用署名exportconst agentConfig =async(
jsApiList: JSApiList[],
callback: Function,
shareUrl ='',
isShowError =true,
maxRequestCount =3)=>{getTicket([...jsApiList,'agentConfig'],async(error: string)=>{if(error ==='error'){//过时大概署名毛病从头获得setTimeout(()=>{
maxRequestCount >0&&agentConfig(jsApiList, callback, shareUrl, isShowError,--maxRequestCount);},1000);}else{const params ={
type:WECHAT_ENV.qyWechat,
jsUrl: window.location.href,};const res =awaitajax({ api:'getTicket', params });const{ retdata ={}}= res;const{ corpId: corpid, noncestr: nonceStr, agentid, signature, timestamp }: any = retdata;
wx.checkJsApi({
jsApiList:['agentConfig'],success(res){
console.log(res);},});const obj ={
corpid,// 必挖，企业微疑的corpid，必需取目前登录的企业不合
agentid,// 必挖，企业微疑的使用id
timestamp,// 必挖，天生署名的时间戳
nonceStr,// 必挖，天生署名的随机串
signature,// 必挖，署名，睹附录1
jsApiList,// openTagList: ['wx-open-launch-weapp'],success:(res: ILooseStrObj)=>{
console.log('agentConfig ok', res);if(typeof callback ==='function')callback(jsApiList);},fail(res: ILooseStrObj){
console.log('agentConfig fail', res);if(typeof callback ==='function')callback('error');},};
console.log('agentConfig obj', obj);
wx.agentConfig(obj);}},
shareUrl
);};

复造代码

上面专用的一点儿办法

exportconstWECHAT_ENV={
qyWechat:1,// 企业微疑
wechat:2,// 微疑};// 鉴别目前是微疑情况仍是企业微疑情况exportconstgetEnv=()=>{const ua = window.navigator.userAgent.toLowerCase();// eslint-disable-next-lineif(Boolean(ua.match(/MicroMessenger/i))&&Boolean(ua.match(/wxwork/i))){// 企业微疑// console.log('企业微疑情况-1')returnWECHAT_ENV.qyWechat;// eslint-disable-next-line}elseif(Boolean(ua.match(/micromessenger/i))){// 微疑// console.log('微疑情况-2')returnWECHAT_ENV.wechat;}};// 鉴别是pc端仍是挪动端exportconst isPC =!/Android|webOS|iPhone|iPod|BlackBerry|SymbianOS|Windows Phone/i.test(navigator.userAgent);/**
* [changeSearch description]
* @param {[type]} oldName 需要改正的search字段
* @param {[type]} newStr交流的新串
* @param {[type]} url以后要交流的link地点没有传默认是 window.location.search
* @return {[type]} [description]
*/exportconstchangeSearch=(oldName: string, newStr: string, url: string)=>{const jsonObj: any =searchToJson(url || window.location.search);if(!oldName){return url;}
jsonObj[oldName]= newStr;const linkUrl = url.split('?')[0]+jsonToSearch(jsonObj);return linkUrl;};/** 将url的search部门转移为json
* @param url:String -- url地点
* @param codeURI:Boolean -- 可否解码
*/exportconstsearchToJson=(url = window.location.href, codeURI =false)=>{let setUrl: string = url ||'';const search = setUrl.split('?');let result ={};
search.forEach((item, index)=>{if(index !==0){
result = item.split('&').reduce((obj, item)=>{const arr = item.split('=');return{...obj,[arr[0]]: codeURI ?decodeURIComponent(arr[1]): arr[1]};}, result);}});return result;};// 获得url参数exportconstgetUrlQueryString=(search: string, name: string)=>{const reg =newRegExp('(^|&)'+ name +'=([^&]*)(&|$)');const r = search.substr(1).match(reg);if(r !==null){return r[2];}return'';};

复造代码

留神bug

布景：正在使用到那个ssdk过程当中（尔使用js-weixin的包是1.2.0版原），尔碰到了一个兼容Android战ios的成就，即是正在挪用jssdk不管是ios仍是Android均可以挪用，可是当正在企业微疑中使用到分享相干的api时，正在ios是没法挪用，正在Android是不成就的，
处置计划：变动挪用的js-weixin包，将js-weixin包改成1.0.0的包，二个包地点是纷歧样的：
https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js
https://res.wx.qq.com/open/js/jweixin-1.2.0.js
2、处置体系分享进来自定题目、描绘、布景及相干体系功用禁用等

场景一：使用体系照顾的分享等功用，但是自界说分享的题目、描绘等外容

正在使用体系戴的分享功用时，需要自界说分享进来的布景、布景图、描绘及分享的链交时，能够将上面的shareFuc导进，初初化（搁componentDidMount或者useEffect中）照顾对于应的参数便可。

const shareObj ={
title:'客户认证',
desc:'客户自己完毕认证',
imgUrl:'',
linkUrl:``,//分享的链交，可照顾一点儿参数};useEffect(()=>{shareFuc(shareObj);//上面启拆已经给出},[userId]);

复造代码

场景两：弃用体系自戴的分享，自己写弹框，触收分享API

呈现那个场景，一圆里可以可客户需要，另外一圆里，可以是分享要截至埋面，记载分享进来的次数。
完毕：写一个弹框（以下），将上面每一个分享或者转收挪用响应的API

// 微疑密友constforwardWeChat=()=>{const shareConfig ={
title,// 分享题目
desc,// 分享描绘
link:"linkUrl",// 分享链交
imgUrl:"imgUrl",// 分享启里};
console.log('企微-微疑密友 shareConfig', shareConfig);
wx.invoke('shareWechatMessage', shareConfig,(res: any)=>{
console.log('企微分享微疑密友-分享回调', res);if(res.err_msg ==='shareWechatMessage:ok'){//}});};

复造代码

import{ JSApiList }from'wx-jssdk';import{ agentConfig }from'@/utils/getTicket';//上面有启拆// 群收客户群constgroupShareGroup=async(e: any)=>{const arrAgent: JSApiList[]=['shareToExternalChat'];agentConfig(
arrAgent,()=>{wxInvokeShare('shareToExternalChat',{
title,// 分享题目
desc,
link:"linkUrl",// 分享链交
imgUrl:"imgUrl",// 分享启里});},
linkUrl
);};

复造代码

场景三：禁用小我私家微疑或者企微左上角分享等功用

睹以下办法：

函数启拆shareFuc、企微战小我私家微疑体系分享等功用禁用启拆

// @ts-nocheckimport globalData from'@/config/globalData';import keyDict from'@/config/keyDict';import point from'@/config/point';import{ changeSearch, getEnv, searchToJson, getUrlQueryString, isPC， WECHAT_ENV}from'@/utils';//上面专用办法import ajax from'@/utils/ajax';import{ getTicket }from'@/utils/getTicket';//上面界说启拆处置import{ JSApiList }from'wx-jssdk';interfaceIShareProps{
title: string;
desc: string;
linkUrl: string;
imgUrl: string;
userId: string;
cb?:()=>void;}interfaceIShareFunProps{
shareObj: IShareProps;
jsApiList: JSApiList[];
maxRequestCount: number;}/**
* [shareFuc description]
* @param {[type]} shareObj { title: 题目, desc: 描绘, linkUrl: 分享地点（会对于地点干拼交，默认没有传为目前url）, imgUrl: 分享icon, staffId: 司理id，拼交给分享地点}
* @param {Array} [jsApiList=[微疑api]]
* @return {Promise} [description]
* @param {type} maxRequestCount 最年夜失利恳求次数，默认为 3次
*/exportconstshareFuc=async(shareObj: IShareProps, jsApiList =[], maxRequestCount =3)=>{// console.log('shareObj===》', shareObj);const defaultJsApi: JSApiList[]=['onMenuShareAppMessage','onMenuShareTimeline','getLocation','previewImage'];// 没有撑持正在PC端微疑使用js-sdk功用if(isPC)return;const ua = navigator.userAgent.match(/MicroMessenger\/([\d\\.]+)/i);const lowerWeChat = ua ? ua[1]<'6.7.2':true;// 微疑if(getEnv()===2){
defaultJsApi.push('updateAppMessageShareData','updateTimelineShareData');}getTicket([...defaultJsApi,...jsApiList],async(error: string)=>{if(error ==='error'){//过时大概署名毛病从头获得setTimeout(()=>{if(maxRequestCount >0){
maxRequestCount =--maxRequestCount;shareFuc(shareObj, jsApiList, maxRequestCount);}},1000);}else{// 企业微疑（微疑）下躲藏部门没有需要的菜单功用--如分享到共事吧，珍藏，转收，微疑，朋友圈if(getEnv()===2){
wx.hideOptionMenu();
wx.showMenuItems({
menuList:['menuItem:copyUrl',// 复造链交],// wx.hideMenuItems({// menuList: [// // 'menuItem:setFont', // 字体// // 'menuItem:openWithSafari', // Safari// // 'menuItem:share:email', // 邮件// // 'menuItem:openWithQQBrowser', // QQBrowser// // 'menuItem:share:appMessage', // 转收// // 'menuItem:share:timeline', // 朋友圈// // 'menuItem:share:wechat', // 微疑// ], // 要躲藏的菜单项// });});}const{ title ='', desc ='', imgUrl ='', linkUrl, cb }= shareObj;//团体微疑处置if(getEnv()===2){// 分享给朋友if(wx.updateAppMessageShareData &&!lowerWeChat){
wx.updateAppMessageShareData({
title,// 分享题目
desc,// 分享描绘
link: linkUrl,// 分享链交，该链交域名或者路子必需取目前页面临应的公家号JS宁静域名不合
imgUrl,// 分享图标success:()=>{
console.log('微疑分享给朋友,新Api,不胜利回调');},});}else{
wx.onMenuShareAppMessage({
title,// 分享题目
desc,// 分享描绘
link: linkUrl,// 分享链交，该链交域名或者路子必需取目前页面临应的公家号JS宁静域名不合
imgUrl,// 分享图标
type:undefined,// 分享范例,music、video或者link，没有挖默觉得link
dataUrl:'',//假设 type是music或者video，则要供给数据链交，默觉得空success:()=>{// 用户面打了分享后施行的回调函数
console.log('微疑分享给朋友,旧Api');},});}// 分享给朋友圈if(wx.updateTimelineShareData &&!lowerWeChat){
wx.updateTimelineShareData({
title,// 分享题目
link: linkUrl,// 分享链交，该链交域名或者路子必需取目前页面临应的公家号JS宁静域名不合
imgUrl,// 分享图标success:()=>{// 树立胜利
console.log('微疑分享给朋友圈,新Api');},});}else{
wx.onMenuShareTimeline({
title,// 分享题目
link: linkUrl,// 分享链交，该链交域名或者路子必需取目前页面临应的公家号JS宁静域名不合
imgUrl,// 分享图标success:()=>{// 树立胜利
console.log('微疑分享给朋友圈,旧Api');},});}}else{// 企业微疑
wx.onMenuShareAppMessage({
title,// 分享题目
desc,// 分享描绘
link: linkUrl,// 分享链交，该链交域名或者路子必需取目前页面临应的公家号JS宁静域名不合
imgUrl,// 分享图标success:()=>{},cancel:()=>{},});
wx.onMenuShareTimeline({
title,// 分享题目
link: linkUrl,// 分享链交，该链交域名或者路子必需取目前页面临应的公家号JS宁静域名不合
imgUrl,// 分享图标success:()=>{// 树立胜利
console.log('企业微疑分享给朋友圈,旧Api');},cancel:()=>{// 用户打消分享后施行的回调函数
console.log('企业微疑分享给朋友圈,旧Api,cancel');},});}// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
cb &&cb();}},
shareObj.linkUrl,false,
maxRequestCount
);};/**
* 避免企业微疑左上角分享（新版原企微是下圆）
* **/let wxConfigTimer: number;exportconsthiddenWxQyShareOption=()=>{if(getEnv()===WECHAT_ENV.qyWechat){
wxConfigTimer &&clearTimeout(wxConfigTimer);
wxConfigTimer = window.setTimeout(()=>{getTicket([],()=>{
console.log('企业微疑情况屏障左上角分享');
wx.hideOptionMenu();
wx.showMenuItems({
menuList:['menuItem:copyUrl'],//保存复造链交});});},200);}};/** 避免微疑左上角分享按钮 */exportconsthiddenWxShareOption=()=>{if(getEnv()===WECHAT_ENV.wechat){
console.log('禁用微疑左上角分享战形状栏');if(typeof WeixinJSBridge ==='undefined'){// 那个能够禁用安卓体系的左上角分享（只针对于微疑端）
document.addEventListener('WeixinJSBridgeReady',function(){WeixinJSBridge.call('hideToolbar');WeixinJSBridge.call('hideOptionMenu');},false);}else{// 那个能够禁用ios体系的左上角分享（只针对于微疑端）WeixinJSBridge.call('hideToolbar');WeixinJSBridge.call('hideOptionMenu');}}};

复造代码

JS交心列表

type JSApiList =|'agentConfig'|'updateAppMessageShareData'|'updateTimelineShareData'|'onMenuShareTimeline'|'onMenuShareAppMessage'|'onMenuShareQQ'|'onMenuShareWeibo'|'onMenuShareQZone'|'startRecord'|'stopRecord'|'onVoiceRecordEnd'|'playVoice'|'pauseVoice'|'stopVoice'|'onVoicePlayEnd'|'uploadVoice'|'downloadVoice'|'chooseImage'|'previewImage'|'uploadImage'|'downloadImage'|'translateVoice'|'getNetworkType'|'openLocation'|'getLocation'|'hideOptionMenu'|'showOptionMenu'|'hideMenuItems'|'showMenuItems'|'hideAllNonBaseMenuItem'|'showAllNonBaseMenuItem'|'closeWindow'|'scanQRCode'|'chooseWXPay'|'openProductSpecificView'|'addCard'|'chooseCard'|'openCard'|'shareToExternalContact'|'shareToExternalChat'|'selectExternalContact'|'navigateToAddCustomer';

复造代码