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 🙏

© 2025 – Pkg Stats / Ryan Hefner

weapp-extra

v2.4.0

Published

微信小程序API接口加强版,接口Promise化,发起登录授权,支持要求强制开启API权限,跨页面通讯,数据响应式,mixins等

Downloads

1

Readme

需求

因小程序迭代太快了,很多接口都要兼容处理,

比如网络请求、拦截、下载文件等接口有并发限制,

功能加强,跨页面通讯、跨页面传值、数据响应式、接口Promise化、 mixins 等,

还有一些接口如果用户第一时间没有同意授权会无法正常使用,

该库就是为了处理这些情况而生。


依赖


安装

npm install --save weapp-extra

mpvue

main.js

import Vue from 'vue'
import App from './index'
import Zls from 'weapp-extra'

Vue.prototype.$zls = Zls

const app = new Vue(App)
app.$mount()
app.app = getApp()
export default {
    config: {
        navigationBarTitleText: '首页'
    }
}

index.vue

<template>
  <div>
      ...
  </div>
</template>

<script>
  export default {
    components: {},
    methods: {},
    data() {
      return {}
    },
    created() {
      this.$zls.get('http://baidu.com/?q=程序猿又死一个?')
      //监听一个userAuth的自定义事件
      this.$zls.on('userAuth',(e)=>{
        console.log('收到',e)
      })

      //在其他页触发 userAuth 事件
      //this.$zls.emit('userAuth','hi')

      //this.$zls
    }
  }
</script>

<style lang='less' scoped>
  @import '../../utils/vars';
</style>

原生示例脚手架

请先安装构建工具 - zls-cli

npm install -g zls-cli

zls new weapp-template ProjectFolder

cd ProjectFolder

npm run dev

执行API接口

突破了网络请求、下载文件等接口有并发限制,支持大量网络请求

extra.api(wxapi, options, ...params)

参说明数

wxapi: 接口名称(如'getLocation','getUserInfo')

options: 微信接口OBJECT参数

...params: 微信接口其参数

返回值

Promis对象


执行权限API接口

extra.authApi (wxapi, scope = null, must = 1, tip = {}, errorText = {}, options, ...params)

参说明数

wxapi: 接口名称(如'getLocation','getUserInfo')

scope: scope(包含scope.,如'scope.userLocation')/false(不验证scope权限执行)

must: 执行方式 -1:必须开启权限执行(必须设置scope)/0:静默执行没有权限不提示/1:没权限下提示一次

tip: 没有权限时候的提示弹窗/false不显示弹窗

errorText: 开启权限失败的提示弹窗/false不显示弹窗

...params: 微信接口其参数

返回值

Promis对象


用户授权接口

extra.login(successCb, errorCb, ignorecheck = false)

参说明数

successCb: 用户授权成功回调方法,successCb(res:用户授权信息,v:login信息用于与服务器传递获取sessionKey)

errorCb 用户还没授权回调方法

ignorecheck 是否忽略判断sessionKey是否过期

通知用户授权情况

由于现在微信小程序不能主动弹出用户授权窗口,必须用<button open-type="getUserInfo" bindgetuserinfo='getUserInfo'>登录</button>来触发,那么我们有两种选择

  1. 如果用户没有授权在页面显示一个授权按钮

  2. 建立一个授权专用的页面里面放置一个授权按钮,当用户没有授权的时候跳转到该页面

然后当用户点击了 按钮 会触发 getUserInfo 事件,我们在该事件中调用通知extra.emitLogin(data),具体看下面 “获取用户信息” 示例。

示例

获取用户信息

//首页

const app = getApp()
const extra = require("../../utils/extra")

Page({
  data: {
  },
  onLoad() {
    extra.login((e, loginCode) => {
          console.log('登录成功', e, loginCode)
        }, e => {
          console.log('没有登录成功,跳转到授权页面/或显示登录按钮吧')
          wx.navigateTo({
            url: '/pages/login/index'
          })
        })
  }
})

//登录页

//login.js
const app = getApp()
const extra = require("../../utils/extra")

Page({
  data: {
  },
  getUserInfo(e) {
    if (extra.emitLogin(e)) {
      console.log('授权成功.返回上一页吧')
      wx.navigateBack()
    }
  },
  onUnload() {
    //防止用户没有授权就返回上一页面
    extra.emitLogin(false)
  }
})
<!--index.wxml-->
<view class="container">
  <button open-type="getUserInfo" bindgetuserinfo='getUserInfo'>登录</button>
</view>

获地理位置

//index.js
const app = getApp()
const extra = require("../../utils/extra")

Page({
  data: {
    location: false
  },
  onLoad() {
    extra
      .authApi("getLocation", "scope.userLocation", 1, "请开启地理位置功能")
      .then(e => {
        console.log("获取成功", e)
        this.setData({
          location: e
        })
      })
      .catch(err => {
        console.warn("获取失败", err)
      })
  }
})

发起请求

设置请求域名

设置了以下的post,get都可以忽略域名部分

extra.setConfig({host:'https://baidu.com/'})

前置拦截(发起请求前)

this.$zls.setConfig({
  requestBefore(e) {
    e.header = Object.assign(e.header || {}, { Authorization: '授权Authorization' })
    return e
  }
})

后置拦截(收到返回数据后)

this.$zls.setConfig({
  requestAfter(e) {
    //可以在这里进行数据的过滤整理
    return e
  }
})

发起POST、GET

//访问http://baidu.com
extra.get('/').then(e => {
    console.log(i + '结果', e)
  })

//访问http://baidu.com/q
extra.post('/q',{name:123}).then(e => {
    console.log(i + '结果', e)
  })

同时发起30个请求

for (let i = 1; i <= 30; i++) {
  extra.api('request', {
    url: 'http://baidu.com', //仅为示例,并非真实的接口地址
    data: {},
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    }
  })
  .then(e => {
    console.log(i + '结果', e)
  })
  .catch(e => {
    console.error(i + '出错', e)
  })
  .finally(() => {
    console.warn(i + '请求结束')
  })
}

Page 增强

内部对 setData 进行了性能优化

//替换掉 Page()
extra.page({
  data: {
    text: "Hello World",
    text2: "Hello World",
    text3: "Hello World",
  },
  onLoad() {
    //自动更新data数据
    this.$data.text = 'In the work overtime'
    this.get('http://baidu.com/?q=程序猿又死一个?')

    //先缓存起来
    this.$data.$cache()
    this.$data.text2 = 'xxxx'
    this.$data.text3 = 'oooo'
    //数据一起更新
    this.$data.$commit(()=>{
      // 更新ok
    })

  }
})