配置

安装配置

1. 引入miliqk-app、miliqk-login、uv-ui

在项目根目录中的main.js中，引入并使用uv-ui的JS库，注意这两行要放在import Vue之后。

注意！

如下示例，兼容Vue2、Vue3写法。

// main.jsimport App from './App'
import uvUI from '@/uni_modules/uv-ui-tools'
import Request from '@/uni_modules/miliqk-app/libs/util/request/index';
import miliqk from '@/uni_modules/miliqk-app';
import miliqkLogin from '@/uni_modules/miliqk-login';
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'


Vue.use(uvUI)
Vue.use(miliqk)
Vue.use(miliqkLogin)

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

// 引入请求封装
Request(app)

// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'

export function createApp() {
    const app = createSSRApp(App)
    app.use(uvUI);    //引入工具库
    app.use(miliqk);  //安装miliqk插件
    app.use(Request); // 引入请求工具类封装
    app.use(miliqkLogin)
    return {
        app
    }
}
// #endif

2. 在引入全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import "@/uni_modules/miliqk-app/css/theme.scss";

3. 引入miliqk-app、uv-ui基础样式

注意！

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/*每个页面公共css */
	@import 'uni_modules/miliqk-app/css/index.scss';
	@import 'uni_modules/uv-ui-tools/index.scss';
</style>

4. 配置pages.json

此配置需要在项目根目录的pages.json中进行，基于HBuilderX可以不进行任何配置即可直接在页面中使用组件

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    // 插件内容-start
    {
      "path": "uni_modules/miliqk-app/pages/home/home",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "uni_modules/miliqk-app/pages/user/user",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "uni_modules/miliqk-app/pages/user/vip",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "uni_modules/miliqk-app/pages/user/coin/coin",
      "style": {
        "navigationStyle": "custom"
      }
    }
    // 插件内容-end
  ],
  //子包
  "subPackages": [
    {
      "root": "uni_modules/miliqk-app/pages/book/bookInfo",
      "pages": [
        {
          "path": "bookInfo",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/chapter",
      "pages": [
        {
          "path": "chapterInfo",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/search",
      "pages": [
        {
          "path": "search",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/bookshelf",
      "pages": [
        {
          "path": "bookshelf",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/category",
      "pages": [
        {
          "path": "category",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "category-detail",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/list",
      "pages": [
        {
          "path": "channel-list",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "status-list",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "swiper-list",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/bangdan",
      "pages": [
        {
          "path": "bangdan-list",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/history",
      "pages": [
        {
          "path": "history",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    // #ifndef MP-WEIXIN
    {
      "root": "uni_modules/miliqk-app/pages/webview",
      "pages": [
        {
          "path": "webview",
          "style": {
            "navigationBarTitleText": "WebView-浏览器",
            "enablePullDownRefresh": false,
            /* App平台特有配置 */
            "app-plus": {
              "renderer": "native",//App端纯原生渲染模式
              // 去掉uni自带的页面最外层scroll
              "disableScroll": true,
              // 不需要滚动条
              "scrollIndicator": "none" //滚动条显示策略，设置为 "none" 时不显示滚动条
            }
          }
        }
      ]
    },
    // #endif
    //登录公共组件-start
    {
      "root": "uni_modules/miliqk-login/pages",
      "pages": [
        {
          "path": "login/login-withoutpwd",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "login/login-smscode",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "agreements/agreement",
          "style": {
            "navigationBarTitleText": "服务协议"
          }
        },
        {
          "path": "agreements/privacy",
          "style": {
            "navigationBarTitleText": "隐私协议"
          }
        }
      ]
    }
    //登录公共组件-end
  ],
  //...其他配置项
}

注意

• miliqk-login 是一个独立的全平台登录模版包含：第三方、手机短信、微信登录等，后端可以自由接入各种登录服务接口，比如：uniCloud、自建服务、第三方登录等，本插件采用mock方式实现登录流程

uv-ui配置参考官网