H5微信分享(好友、朋友圈)工具包

178 阅读2分钟
安装工具包 npm i xctc-utils
项目中引入 import utils from "xctc-utils"
在项目启动文件中调用启动方法,如在react项目的APP.tsx文件中初始化使用
微信分享等相关涉及加密的地方,通过 crypto-js 进行加密
微信跳转授权及登录配置加载:weixinUrlCode
weixinUrlCode方法通过检测地址栏是否带有 code 参数进行微信授权跳转,授权成功后截取 code 参数,并进行本地临时存储。
 const config = {
    appId:AppConfig.appId, // 当前项目关联的微信公众号 appid
    http:serve.deft.wxLogin, // 执行微信登录的 http 方法,前端传输数据格式为 obj
    scope:"", // 授权类型 默认 snsapi_userinfo
    codeKey:"", // 地址栏截取的| code 存储键,本地临时缓存 code数据,如:code="xxxxx"
    stateKey:"", // 微信分享时,前端在地址栏携带的参数,通过加密的方式进行携带,如:state="sdfsdfds", stateKey 为当前state存储键
    cryptoiv:"", // crypto-js加密 iv 值,按照该加密库要求进行传值
    cryptokey:"",// crypto-js加密 key 值,按照该加密库要求进行传值
}
微信登录时,config中的http方法参数格式,前端传输、后端接收数据为:
let obj = {
     "app_id": appId ,
     "js_code":code
}
utils.weixinUrlCode(config)
微信分享配置接口加载:weixinShareConfig,在APP.tsx文件中初始化使用

const shareConfig = {
    appId:AppConfig.appId,
    http:serve.deft.weixinShareConfig,
    cb:()=>{ 
        // 回调方法,非必传,微信分享配置接口成功后调用
    },
    jsApiList?:string[],//需要开启的jsApiList列表,工具包已有默认值
}
微信分享配置接口(http)参数格式为:param,其中url自动截取,appId为shareConfig配置参数
let param = {
    url:url,
    appId:config.appId,
}
utils.weixinShareConfig(shareConfig)
各页面中微信分享调用:
interface ShareOptions = {
    title?:string, // 分享标题
    desc?:string, // 分享描述
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    data?:any,//微信分享时需要携带的数据,默认传键值格式
    iv?:string, // 分享链接中对 state 数据加密的iv
    key?:string, // 分享链接中对 state 数据加密的 key
}
如:
let shareConfig = {
    title:"分享标题",
    desc:"分享描述",
    link:"https://www.xx.com",
    imgUrl:"https://www.xx.com/image/logo.png",
    iv:"",
    key:"",
    data:{
        id:id,// 指定页面需要的参数,点击分享链接,会自动拼接到 path 参数后,
        path:"/service/employment-index" // 微信分享后,用户点击分享链接后跳转到的页面
    }
}
// 其中 iv和key 必须和weixinUrlCode方法中传的cryptoiv和cryptokey保持一致,否则无法解密分享地址中的state参数
utils.weixinShareInit(shareConfig)