qj-mini-pages

千匠星云小程序公共页面封装

Usage no npm install needed!

<script type="module">
  import qjMiniPages from 'https://cdn.skypack.dev/qj-mini-pages';
</script>

README

千匠星云小程序公共页面库

适用于千匠星云uni-app项目,easycom模式,打包时自动剔除没有使用的组件,无需担心全局引入体积大的问题。

安装

npm i qj-mini-pages

项目中配置

第一步 main.js

import qjMini from 'qj-mini-pages';

Vue.use(qjMini); 

第二步 pages.json

{
    "easycom": {
        "^qj-mini-(.*)": "qj-mini-pages/components/qj-mini-$1/qj-mini-$1.vue"
    }
}

第三步 App.vue

onLaunch(){
    // 接口请求域名
    this.$qj.domain = this.$domain;
    // 图片域名
    this.$qj.imgDomain = this.$imgDomain;
    // 业务域名
    this.$qj.businessDomain = this.$businessDomain;
    // 自定义Date方法(具体API见下方)
    this.$qj.addDatePrototypes();
    // Object方法
    this.$qj.addObjectPrototype();
    // String方法
    this.$qj.addStringPrototype();
}

至此可以使用公共页面以及公共JS方法。

提供常用API

this.$qj.router

  • 打开一个新页面

    this.$qj.router.push(url, query, { success, fail, complete, stay } = {})

  • 关闭当前页面,打开一个新页面

    this.$qj.router.replace(url, query, { success, fail, complete, stay } = {})

  • 关闭所有页面,打开一个新页面

    this.$qj.router.reOpen(url, query, { success, fail, complete, stay } = {})

  • 返回上一个页面

    this.$qj.router.back(delta = 1, query, { success, fail, complete, stay = 0 } = {})

    参数 类型 是否必传 解释
    url String 页面路径
    query Object 页面传参
    success Function 接口调用成功的回调函数
    fail Function 接口调用失败的回调函数
    complete Function 接口调用结束的回调函数
    stay Number 跳转延迟时间
    delta Number 返回的页面数
  • 注意,传入的url应该是去掉最前面的 ‘pages’ 和最后面的 ‘main’

this.$qj.storage

  • 从本地缓存中同步获取指定key对应的内容

    this.$qj.storage.get(key)

  • 将value存入本地缓存指定的key中,会覆盖掉原来key对应的内容,同步方法

    this.$qj.storage.set(key, value)

  • 移除本地缓存中key,同步方法

    this.$qj.storage.remove(key)

    参数 类型 是否必传 解释
    key String 指定的key
    value String key对应的内容

this.$qj.message

  • 弹窗(uni.showToast)

    this.$qj.message.alert(title, )