项目名称

api-integration-ny

项目描述

1. 图片缓存的初步封装
2. api集合的初步封装
3. indexedDB 的初步封装
4. 兼容APP和WEB
5. 只支持特定项目

项目命令

打包

  npm run build 

发布

  npm run push 

项目的使用

安装

npm

  npm i api-integration-ny

yarn

  yarn add api-integration-ny

ApiIntegration 是API的集合相关的功能

mian.js

import {ApiIntegration} from 'api-integration-ny' //引入api集合

普通vue项目

//PC的配置
/**
 * 注意 这里的api需要设置notAuthVersion 和notAuth 的2个api地址
 */
//初始化 http pc为直接赋值 api
ApiIntegration.api = api;
//初始化 http pc为直接赋值 http
ApiIntegration.http = http;
ApiIntegration.versionFinsh = true;
Vue.prototype.$ApiIntegration = ApiIntegration;

uni-app项目

mian.js

//uni-app的配置
/**
 * 注意 这里的需要api.js文件夹内提供getNotAuthVersion 和notAuth 2个请求方法
 */
ApiIntegration.api = api;
// 需要配置isUniapp 为true
ApiIntegration.isUniapp = true;
// #ifdef H5
ApiIntegration.versionFinsh = true;
// #endif
Vue.prototype.$ApiIntegration = ApiIntegration;

App.vue

//因为APP需要先获取域名池,所以需要再域名获取完毕并配置好以后,再进行初始化
this.$config.host = host;
this.$server.setConfigHost(host);
// #ifdef APP-PLUS
this.$ApiIntegration.device = 'app'
this.$ApiIntegration.versionFinsh = true;
// #endif

使用方式

  //注册一个监听器
  this.$ApiIntegration.register(async (i)=>{
    //这里可以直接获取数据 ,这里传入需要获取的api的 key=string,注意是异步
    const data = await i.getDataByStorage(key)
    //API
    //手动设置数据,除非特殊需要,否则不要手动设置
    i.setDataStorage(key,resData)
    //再需要时,重新运行监听器,除非特殊需要,否则不要手动运行
    i.integrationMain.run()
    //重新获取默认数据,除非特殊需要,否则不要手动运行
    i.getData()
  });

imgStorage 是图片缓存的相关功能

可以使用它封装img组件,用来替代默认的img标签,请自行尝试

普通vue项目

mian.js

  import {ImgStorage} from 'api-integration-ny' //引入图片缓存
  Vue.prototype.$ImgStorage = ImgStorage

App.js

  //需要this.#config已经配置完成后才能使用
  this.$ImgStorage.setVersion(this.$config)

使用方式

// 在需要的地方使用
  this.$ImgStorage.initRunsToRun( (i)=>{
    //这里传入src,以及错误回调
    const url = i.getImg(src,()=>{console.log('图片加载失败')})
    // ...
  })

uni-app项目

mian.js

  import {createImgStorage} from 'api-integration-ny' //引入图片缓存
  // #ifdef APP-PLUS
  const ImgStorageI = createImgStorage('app')
  Vue.prototype.$ImgStorage = ImgStorageI
  // #endif
  // #ifdef H5
  Vue.prototype.$ImgStorage = createImgStorage()
  // #endif

使用方式

// 在需要的地方使用
  this.$ImgStorage.initRunsToRun( (i)=>{
    //这里传入src,以及错误回调
    const url = i.getImg(src,()=>{console.log('图片加载失败')})
    // ...
  })

indexedDB 是indexedDB的相关功能

普通vue项目

!!!注意:只有浏览器可以使用!!!

mian.js

  import {IndexDB} from 'api-integration-ny' //引入indexedDB

  // 创建需要连接的数据库
  const db= new IndexDB('testDB',1,'testStore')
  // 初始化完成后执行
  db.then((dbInstance)=>{
    console.log('数据库初始化完成,实例:',dbInstance)
 })
  //初始化数据库
  db.init()

uni-app项目

!!!注意:只有H5端可以使用!!!

  // #ifdef H5
  import {IndexDB} from 'api-integration-ny' //引入indexedDB
  // #endif

使用方式

  // 创建需要连接的数据库
  const db= new IndexDB('testDB',1,'testStore')
  // 初始化完成后执行
  db.then((dbInstance)=>{
    console.log('数据库初始化完成,实例:',dbInstance)
  })
  //初始化数据库
  db.init()

/** 
*API
*/

  //添加数据
  db.add('test',{name:'test'})
  //修改数据
  db.update('test',{name:'test1'})
  //删除数据
  db.deleteById('test')
  //查询数据
  db.getById('test')
  //查询所有数据
  db.getAll()
  //获取当前仓库的事项数量
  db.getDBSize()
  //清空当前仓库的所有数据
  db.clear()