Cook-uni

外观

安装 ​

下载 ​

Hbuilder X 安装 ​

在uni-app插件市场通过uni_modules的形式进行安装，此安装方式可以方便您后续在uni_modules对cook-uni进行一键升级。

在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。

下载地址：https://ext.dcloud.net.cn/plugin?name=cook-uni

手动下载安装 ​

手动下载cook-uni压缩包，解压到本地项目的uni_modules目录下。

下载地址：https://github.com/xiaopig123456/cook-uni

配置 ​

1、在main.js引入Cook uni库 ​

js
// main.js
import { createSSRApp } from 'vue';
import CookUni from '@/uni_modules/cook-uni'

export function createApp() {
  const app = createSSRApp(App)
  // cook-uni
  CookUni(app);

  return {
    app
  }
}

2、在uni.scss引入Cook uni的全局SCSS主题文件 ​

scss
/* uni.scss */
@import '@/uni_modules/cook-uni/variables.scss';

3、在App.vue引入Cook uni基础样式 ​

vue
<style lang="scss">
  /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
  @import '@/uni_modules/cook-uni/index.scss';
</style>

4、配置manifest.json ​

Cook-uni使用vue3模式，在manifest.json中配置如下：

js
// manifest.json

{
    // 启用vue3模式
    "vueVersion" : "3",

    // 如果开发APP
    // 需设置nvue页面编译模式为“uni-app”
    "app-plus" : {
        "nvueStyleCompiler" : "uni-app",
    }
}

5、其他可选配置 ​

如果需要使用涉及到日期的组件，你还需要额外安装dayjs插件，并挂载。

bash
npm install dayjs --save;

挂载到cook-uni中

js
// main.js
import { createSSRApp } from 'vue';
import CookUni from '@/uni_modules/cook-uni'
import dayjs from 'dayjs';

export function createApp() {
  const app = createSSRApp(App)
  // cook-uni
  CookUni(app,{
    config:{},
    // 挂载dayjs
    dayjs
  });

  return {
    app
  }
}

挂载后你可以在其他地方使用dayjs，如：uni.$c.dayjs()

使用 ​

  1. 在pages.json中globalStyle节点设置navigationStyle为custom，启用自定义导航。
json
// page.json
{
    "pages": [
        // ...
    ],
    "globalStyle": {
        // 设置为空，支付宝小程序下将不显示标题
        "navigationBarTitleText": "",
        // 自定义导航栏
        "navigationStyle": "custom",
        // 支付宝小程序
        "mp-alipay": {
            "transparentTitle": "always",
            "allowsBounceVertical": "NO",
            "titlePenetrate": "YES",
            "enableScrollBar": "NO",
            "gestureBack": "YES"
        },
        // ...
    }
}
  1. 新建一个nvue页面，并使用cook-uni组件，示例代码如下：
vue
<!-- pages/home/index.nvue -->
<template>
<c-page title="首页">
    <view class="c-p-15">
      <c-btn type="primary" text="按钮" c-class="c-mt-20" @click="onClick" />
    </view>
</c-page>
</template>
<script setup>
function onClick() {
    uni.$c.toast('点击了按钮');
}
</script>

重要

使用cook-uni时，不管你开发的是小程序、h5或App，都需要使用nvue页面，且书写css时遵循nvue的css规范。