Skip to content

专门用于SPA场景下的wxjssdk,通过内部的多重机制,来避免SPA最容易遇到的签名失败的问题。

Notifications You must be signed in to change notification settings

liuyunzhuge/spa-wxjssdk-util

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

spa-wxjssdk-util

专门用于SPA场景下的wxjssdk,通过内部的多重机制,来避免SPA最容易遇到的签名失败的问题。

0.2.0已经发布,在使用20来天之后,签名失败的情况仍会出现,但是概率很小。

安装

npm install spa-wxjssdk-util --save
npm install wxjssdk-copy --save

使用

app级别的配置:

SpaWxjssdkUtil.defaults.debug = false
SpaWxjssdkUtil.defaults.jsApiList = [
    'checkJsApi',
    'openLocation',
    'onMenuShareTimeline',
    'onMenuShareAppMessage'
]
SpaWxjssdkUtil.defaults.request = function (url) {
    let _ajax = (appUtil && appUtil.ajax) || Ajax
    return _ajax.get(Service.weixin_jssdk_sign, {
        url: url
    }).then((res) => {
        if (res.code === 200) {
            return res.data
        }
    })
}
SpaWxjssdkUtil.defaults.onSignInvalid = function (error, info) {
    ErrorReporter.makeReport(error, 'invalid sign', info)
}

所有配置项及含义如下:

  • ignoreRejectedState

    {boolean|default: true}

    SpaWxjssdkUtil内部用Promise来处理异步状态,某些逻辑会触发rejected状态,如果不想要这个状态,就把这个option配置为true,避免控制台反复看到unhandled promise之类的错误。

  • signExpiresIn

    {number|default: 5400}

    单位:秒。从官方文档看到说微信jssdk的签名数据是有过期时间的,但是并不清楚过期时间是多少,5400只是一个猜测值。在同一个页面访问状态下,如果签名获取成功了,则签名状态会缓存起来,缓存的失效就是signExpiresIn指定的时长,在这个时长内,通过SpaWxjssdkUtil.prototype.ready发生的调用,都不会再进行签名请求。

  • debug

    这个值将会被直接应用于官方wxjssdk的wx.config({debug: ...})的调用中。

  • jsApiList

    将会被直接应用于官方wxjssdk的wx.config({jsApiList: ...})的调用中。

  • request

    {Promise|default: null}

    通过这个option指定当前单页app用来进行签名数据后端请求的任务,需要返回一个Promise实例。

  • onSignInvalid

    {function|default: noop}

    签名失败的回调函数,可以利用它做一些数据上报。

注意 request返回的promise应该resolve以下的数据结构:

appId: "..."
nonceStr: "..."
signature: "17001437758c36bbda4be3e0b4b4dffaf8ce3803"
timestamp: 1581129406

页面级使用:

let wxjssdkUtil = new SpaWxjssdkUtil()

wxjssdkUtil.ready(wx => {
    if (wx) {
        let shareData = {/*imgUrl link title desc*/};
        wx.onMenuShareTimeline(shareData)
        wx.onMenuShareAppMessage(shareData)
    }
})

用起来很简单,就是先构造一个SpaWxjssdkUtil实例,然后利用这个实例提供的ready方法去使用官方wxjssdk的api:ready方法接收一个回调函数,这个回调函数,会把官方wxjssdk的wx对象传入,如果传入的wx对象为空,则说明wx对象获取失败,通常都是签名失败导致的。

这个实例,在单页场景中,最好一个route对应的页面实例里面,能单独持有一份,因为SpaWxjssdkUtil实例,内部会缓存签名状态。

About

专门用于SPA场景下的wxjssdk,通过内部的多重机制,来避免SPA最容易遇到的签名失败的问题。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published