项目配置
cook-uni组件和主题的支持全局配置，可以满足项目的个性化需求。
组件配置
方式一：在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,{
config:{
// 在应用cook-uni时配置
img: {
// c-img组件设置默认补充域名
baseUrl: 'https://api.example.com',
},
// ...
}
})
return {
app
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
方式二：使用uni.$c.setConfig(componentName, config)方法
vue
<!--App.vue-->
<script>
export default {
onLaunch() {
// 对c-datetime-select组件进行配置
uni.$c.setConfig('datetimeSelect ', {
placeholder:"请选择日期"
})
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
注意
componentName为组件名称去除前缀c-后的驼峰写法。
除组件配置外，还包含如下配置：
| 名称 | 类型 | 说明 |
|---|---|---|
| designWidth | Number | 设计稿宽度，默认值：375 |
| videoPreviewPage | String | 视频预览页面地址，c-upload的视频预览，默认值：/pages/cook-uni/video，需在pages.json中配置 |
| webviewPage | String | webview页面地址，微信小程序下实现$c.route跳转外部链接，默认值：/pages/cook-uni/webview，需在pages.json中配置 |
| http | Object | http请求配置，详细参考http配置 |
方式三：直接修改uni.$c.config[componentName]
js
// 配置单个属性
uni.$c.config.datetimeSelect.placeholder = '请选择日期';
// 配置多个属性
uni.$c.config.datetimeSelect = {...uni.$c.config.datetimeSelect,{placeholder:'请选择日期',placeholderColor:'#999'}};1
2
3
4
5
2
3
4
5
注意
配置多个属性时，一定要做合并。
尺寸配置
cook-uni的内部尺寸换算逻辑基于设计稿宽度375px，如果你的项目设计稿宽度不是375px，那么你需要对尺寸进行配置。
第一步：配置项中配置designWidth
js
// main.js
CookUni(app,{
config:{
designWidth: 750,
}
})1
2
3
4
5
6
2
3
4
5
6
第二步：在uni.scss中配置$design-width
scss
// uni.scss
$design-width:750;
@import "@/uni_modules/cook-uni/variables.scss";1
2
3
4
5
2
3
4
5
信息
为了保证尺寸的正确性，在书写scss样式时提供toRpx()函数。
vue
<style lang="scss" scoped>
.my-class{
width:toRpx(300);
}
</style>1
2
3
4
5
2
3
4
5
js中使用uni.$c.toRpx()和uni.$c.toPx()函数，详情参考尺寸换算。
主题配置
如果要替换默认主题，需要在uni.scss中替换对应的scss变量即可，详细参考颜色说明。