# 全局配置 V1.9.8+
针对组件 props
做全局配置,优先级:全局配置props < 直接设置组件props 。
特别说明
该功能目前仅针对部分常用基础组件处理。
加入部分全局方法调用,引入配置文件后可使用 wx.$fui.xx 调用。
# 配置文件内容
目前支持配置的组件:fui-button、fui-icon、fui-text、fui-input、fui-list-cell、fui-section、fui-white-space、fui-wing-blank、fui-number,可配置的属性值如下:
/*
组件属性全局配置文件。优先级:全局配置文件props < 直接设置组件props
目前支持配置的组件:fui-button、fui-icon、fui-text、fui-input、fui-list-cell、fui-section、fui-white-space、fui-wing-blank、fui-number
*/
// 主色,仅适用无法使用css变量控制颜色的组件使用【保持与fui-theme中一致】
const color = {
primary: '#465CFF',
success: '#09BE4F',
warning: '#FFB703',
danger: '#FF2B2B',
purple: '#6831FF',
link: '#465CFF'
}
//全局方法(V1.9.8+)
const app = {
// 设计稿 375 的宽度
rpx2px(value){
let sys = wx.getSystemInfoSync()
return sys.windowWidth / 750 * value
},
toast: function(text, icon = 'none') {
text && wx.showToast({
title: text,
icon: icon,
duration: 2000
})
},
modal: function(title, content, callback, showCancel, confirmColor, confirmText) {
wx.showModal({
title: title,
content: content,
showCancel: showCancel || false,
cancelColor: "#7F7F7F",
confirmColor: confirmColor || color.primary,
confirmText: confirmText || "确定",
success(res) {
if (res.confirm) {
callback && callback(true)
} else {
callback && callback(false)
}
},
fail(err) {
console.log(err)
}
})
},
href(url, isMain) {
if (isMain) {
wx.switchTab({
url: url
})
} else {
wx.navigateTo({
url: url
});
}
}
}
const fuiConfig = {
//组件名称,小驼峰命名
//如fui-button写成fuiButton
fuiButton: {
//组件属性值
height: '96rpx',
size: 32,
radius: '16rpx'
},
fuiIcon: {
size: 64,
unit: 'rpx'
},
fuiText: {
size: 32,
unit: 'rpx'
},
//v2.3.0+
fuiNumber: {
size: 32,
unit: 'rpx'
},
fuiInput: {
labelSize: 32,
labelColor: '#333',
size: 32,
color: '#333'
},
fuiListCell: {
padding: '32rpx',
arrowColor: '#B2B2B2',
bottomLeft: 32
},
// V1.9.9+
fuiSection: {
size: 32,
color: '#181818',
fontWeight: 600,
descrSize: 28,
descrColor: '#B2B2B2',
descrTop: 12
},
//v2.1.0+
fuiWhiteSpace: {
size: 'default',
//设置了height则size失效
height: 0,
background: 'transparent'
},
//v2.1.0+
fuiWingBlank: {
size: 'default',
//设置了gap则size失效
gap: 0,
background: 'transparent'
},
color,
...app
}
export default fuiConfig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
# 配置文件引入
在根目录app.js中全局引入
import fuiConfig from './components/firstui/fui-config/index'
//组件全局配置,$fui 为约定值不可修改
wx.$fui = fuiConfig
1
2
3
4
2
3
4
# 全局方法调用
引入全局配置文件后,即可使用
//toast 提示
wx.$fui.toast('提示~')
//跳转页面
wx.$fui.href('/pages/common/pageA/pageA')
//modal 弹框
wx.$fui.modal('title','content',(res)=>{
if(res){
// 确定
}else{
// 取消
}
})
//rpx 转 px
const px = wx.$fui.rpx2px(88)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18