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(+ '结果', e)
      })
     
    //访问http://baidu.com/q
    extra.post('/q',{name:123}).then(e => {
        console.log(+ '结果', 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(+ '结果', e)
      })
      .catch(e => {
        console.error(+ '出错', e)
      })
      .finally(() => {
        console.warn(+ '请求结束')
      })
    }

    Page 增强

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

    install

    npm i weapp-extra

    Downloadsweekly downloads

    1

    version

    2.2.15

    license

    ISC

    repository

    githubblog

    last publish

    collaborators

    • avatar