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

##### 安装工具包 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)
```

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值