npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

spa-wxjssdk-util

v0.2.0

Published

A simple library that helps to better use wxjssdk in SPA situation.

Downloads

5

Readme

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实例,内部会缓存签名状态。