微信公众号H5授权登录，微信分享好友、朋友圈完整流程

安装依赖

npm install xctc-utils@latest

获取微信 jscode

• 在项目启动文件，如react项目的App.tsx，VUE项目的App.vue文件中调用getUrlCode，该函数将执行流程：

• 微信 jscode 授权流程；

• 通过微信授权返回的 jscode 执行微信登录

• appId： 微信公众号 appId

• http： 执行微信登录方法， 通过 jscode 和 appId 执行微信登录操作

• scope： 网页授权类型 scope 默认 snsapi_userinfo

• codeKey： 微信授权返回的 jscode 在本地存储键，默认存储sessionStorage,codeKey 默认存储键 weixinAuthCode，默认配置情况下，获取本地存储 jscode方法：useUtils.getSessionStorage("weixinAuthCode")

• stateKey： 微信授权返回链接携带的 state 在本地存储键，默认值 weixinAuthState

• cryptoiv：将地址栏携带参数进行加密iv值

• cryptokey： 将地址栏携带参数进行加密key值

• isPassLogin： 微信登录成功后，是否终止程序继续执行，在开发阶段可以传入此参数进行微信登录测试

• redirectUri： 微信授权回调地址，正常情况不需要传参

• appIdKey： appId 传递到服务端的参数键 默认键值： app_id，根据后端的需求传递

• jsCodeKey： appId 传递到服务端的参数键 默认键值： js_code，根据后端的需求传递

• debuggerStatus 是否开启 debugger 弹框提示

• cb： 登录成功后的回调函数，如果不传回调函数，登录成功后会自动跳转，如果传入该参数，则返回值 {res:res服务端响应的数据对象 , url:url当前拼接完整的跳转地址 , params: params 前端传递给服务端的数据}

interface configOption {
    appId?:string;
    http?:any;
    scope?:string;
    codeKey?:string;
    stateKey?:string;
    cryptoiv?:string;
    cryptokey?:string;
    isPassLogin?:boolean;
    redirectUri?:string;
    appIdKey?:string;
    jsCodeKey?:string;
    debuggerStatus?:boolean;
    cb?:any;
}

默认情况下，推荐传递参数如下，其它参数可不传，直接使用配置好的默认值，具体使用如下：

import useUtils from "xctc-utils"
const { getUrlCode } = useUtils.weixin
getUrlCode({
    appId:"wx2sdfsdfd1d2",
    http:weixinLogin,
    scope:"snsapi_base",
    appIdKey:"AppId",
    jsCodeKey:"JsCode",
    cb:(data:any)=>{
       // todo 执行具体的流程
    })
})

wx.config接口注入权限验证配置

同样在 项目的 App 文件中调用该函数

• appId： 微信公众号 appId
• http： 执行config接口注入权限验证方法， 通过 url 和 appId 执行微信config权限操作
• appIdKey： appId 传递到服务端的参数键 默认键值： appId，根据后端的需求传递
• urlKey： url 传递到服务端的参数键 默认键值： url，根据后端的需求传递
• url： 微信config接口注入权限验证的域名
• cb： config接口注入权限成功后的回调
• jsApiList： 需要授权的接口
• openTagList： 需要授权的dom标签

interface ShareConfig{
    http?:any;
    cb?:any;
    appId:string;
    jsApiList?:string[];
    openTagList?:string[];
    url?:string;
    urlKey?:string ;
    appIdKey?:string;
}

const { configReady } = useUtils.weixin
configReady({
    appId:"wxsfsdfdsfd2",
    http:weixinShareReady,
    url:"https://xxx.com/",
    cb:(data:any)=>{
       // todo 执行具体的流程
    })
})

微信分享注入

• title： 分享标题
• desc：分享描述
• link：分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
• imgUrl：分享图标地址，不能是本地地址
• data：微信分享时需要携带的数据，默认传键值格式{path:"xx",id:"234"}
• iv：分享链接中对 state 数据加密的iv
• key：分享链接中对 state 数据加密的 key
• shareUrl：是否携带完整的分享链接，如果携带，直接使用当前链接作为分享链接
• dbug： 是否需要 alert 弹框，开发阶段可传参测试

interface ShareOptions{
    title?:string;
    desc?:string;
    link: '';
    imgUrl: '';
    data?:any;
    iv?:string;
    key?:string; 
    shareUrl?:string;
    dbug?:boolean; 
}

在需要加载微信分享的页面，调用以下函数，具体传参参考：

const { shareReady } = useUtils.weixin
shareReady({
     title:"主应用首页分享",
     desc:"主应用一段描述文字",
     imgUrl:"https://xxx.com/7a890b7c.jpeg",
     link:"https://xxx.com/"
})