安裝依賴
npm install xctc-utils@latest
獲取微信 jscode
-
在項目啟動文件，如react項目的App.tsx扔役，VUE項目的App.vue文件中調(diào)用getUrlCode帆喇，該函數(shù)將執(zhí)行流程：
微信 jscode 授權(quán)流程；
通過微信授權(quán)返回的 jscode 執(zhí)行微信登錄
appId： 微信公眾號 appId
http： 執(zhí)行微信登錄方法亿胸， 通過 jscode 和 appId 執(zhí)行微信登錄操作
scope： 網(wǎng)頁授權(quán)類型 scope 默認 snsapi_userinfo
codeKey： 微信授權(quán)返回的 jscode 在本地存儲鍵坯钦，默認存儲sessionStorage,codeKey 默認存儲鍵 weixinAuthCode，默認配置情況下侈玄，獲取本地存儲 jscode方法：useUtils.getSessionStorage("weixinAuthCode")
stateKey： 微信授權(quán)返回鏈接攜帶的 state 在本地存儲鍵婉刀，默認值 weixinAuthState
cryptoiv：將地址欄攜帶參數(shù)進行加密iv值
cryptokey： 將地址欄攜帶參數(shù)進行加密key值
isPassLogin： 微信登錄成功后，是否終止程序繼續(xù)執(zhí)行序仙，在開發(fā)階段可以傳入此參數(shù)進行微信登錄測試
redirectUri： 微信授權(quán)回調(diào)地址突颊，正常情況不需要傳參
appIdKey： appId 傳遞到服務(wù)端的參數(shù)鍵 默認鍵值： app_id，根據(jù)后端的需求傳遞
jsCodeKey： appId 傳遞到服務(wù)端的參數(shù)鍵 默認鍵值： js_code，根據(jù)后端的需求傳遞
debuggerStatus 是否開啟 debugger 彈框提示
cb： 登錄成功后的回調(diào)函數(shù)律秃，如果不傳回調(diào)函數(shù)爬橡，登錄成功后會自動跳轉(zhuǎn)，如果傳入該參數(shù)棒动，則返回值 {res:res服務(wù)端響應(yīng)的數(shù)據(jù)對象 , url:url當前拼接完整的跳轉(zhuǎn)地址 , params: params 前端傳遞給服務(wù)端的數(shù)據(jù)}
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;
}
默認情況下糙申，推薦傳遞參數(shù)如下，其它參數(shù)可不傳船惨，直接使用配置好的默認值柜裸，具體使用如下：
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 執(zhí)行具體的流程
})
})
wx.config接口注入權(quán)限驗證配置
同樣在 項目的 App 文件中調(diào)用該函數(shù)
- appId： 微信公眾號 appId
- http： 執(zhí)行config接口注入權(quán)限驗證方法， 通過 url 和 appId 執(zhí)行微信config權(quán)限操作
- appIdKey： appId 傳遞到服務(wù)端的參數(shù)鍵 默認鍵值： appId粱锐，根據(jù)后端的需求傳遞
- urlKey： url 傳遞到服務(wù)端的參數(shù)鍵 默認鍵值： url疙挺，根據(jù)后端的需求傳遞
- url： 微信config接口注入權(quán)限驗證的域名
- cb： config接口注入權(quán)限成功后的回調(diào)
- jsApiList： 需要授權(quán)的接口
- openTagList： 需要授權(quán)的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 執(zhí)行具體的流程
})
})
微信分享注入
- title： 分享標題
- desc：分享描述
- link：分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號 JS 安全域名一致
- imgUrl：分享圖標地址怜浅，不能是本地地址
- data：微信分享時需要攜帶的數(shù)據(jù)铐然，默認傳鍵值格式{path:"xx",id:"234"}
- iv：分享鏈接中對 state 數(shù)據(jù)加密的iv
- key：分享鏈接中對 state 數(shù)據(jù)加密的 key
- shareUrl：是否攜帶完整的分享鏈接，如果攜帶恶座，直接使用當前鏈接作為分享鏈接
- dbug： 是否需要 alert 彈框锦爵，開發(fā)階段可傳參測試
interface ShareOptions{
title?:string;
desc?:string;
link: '';
imgUrl: '';
data?:any;
iv?:string;
key?:string;
shareUrl?:string;
dbug?:boolean;
}
在需要加載微信分享的頁面，調(diào)用以下函數(shù)奥裸，具體傳參參考：
const { shareReady } = useUtils.weixin
shareReady({
title:"主應(yīng)用首頁分享",
desc:"主應(yīng)用一段描述文字",
imgUrl:"https://xxx.com/7a890b7c.jpeg",
link:"https://xxx.com/"
})
