❤Nuclear Pizza Machine

npm

log inorsign up
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    weapp-extrapublic

    需求

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

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

    功能加强，跨页面通讯、跨页面传值、数据响应式、接口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 增强

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

    Keywords

    install

    npm i weapp-extra

    Downloadsweekly downloads

    1

    version

    2.2.15

    license

    ISC

    repository

    githubblog

    last publish

    collaborators

    • avatar

    Test with RunKit