HiUi

Appearance

引入 HiUi 主样式（必需） ​

在 App.vue 中引入 HiUi 主样式

scss
<style lang="scss">
    // 引入 hi-ui 主样式
    @import "@/uni_modules/hi-ui/index.scss";
</style>

引入 HiUi 主文件（必需） ​

在 main.js 中引入 HiUi 主文件。

js
// 引入 hi-ui 主文件
import "@/uni_modules/hi-ui/index";

配置扩展图标库（可选） ​

在 main.js 中配置扩展图标前缀。

js
// 配置扩展图标前缀
uni.$hi.config.icon.prefix = ["app-iconfont"];

安装依赖包（可选） ​

下方列出了 HiUi 的依赖包，若未使用相关组件，可以不用安装对应的依赖包。

shell
# numeral.js -> hi-price 组件依赖
npm install numeral.js

建议配置 ​

建议在 manifest.json 中配置如下配置项。

json
/* 微信小程序 */
"mp-weixin": {
    // 合并组件虚拟节点外层属性（目前仅支持 style、class 属性），uni-app 3.5.1+ 开始支持
    "mergeVirtualHostAttributes": true
},

/* 支付宝小程序 */
"mp-alipay": {
    // 合并组件虚拟节点外层属性（目前仅支持 style、class 属性），uni-app 3.5.1+ 开始支持
    "mergeVirtualHostAttributes": true,
    // 组件样式隔离方式，具体配置选项参见：[组件样式隔离](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)
    // - isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
    // - apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
    // - shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
    // 微信小程序在组件 options 中配置，支付宝小程序在 manifest.json -> mp-alipay 中配置
    "styleIsolation": "shared"
},