# 全局配置 V1.9.8+

针对组件 props 做全局配置,优先级:全局配置props < 直接设置组件props 。

特别说明

  • 该功能目前仅针对部分常用基础组件处理。

  • 加入部分全局方法调用,引入配置文件后可使用 wx.$fui.xx 调用。

# 配置文件内容

目前支持配置的组件:fui-button、fui-icon、fui-text、fui-input、fui-list-cell,可配置的属性值如下:
/*
  组件属性全局配置文件。优先级:全局配置文件props < 直接设置组件props
  目前支持配置的组件:fui-button、fui-icon、fui-text、fui-input、fui-list-cell
*/

// 主色,仅适用无法使用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 
	//Button 按钮 组件
	fuiButton: {
		//组件属性值
		height: '96rpx',
		size: 32,
		radius: '16rpx'
	},
	//Icon 图标 组件
	fuiIcon: {
		size: 64,
		unit: 'rpx'
	},
	// Text 文本 组件
	fuiText: {
		size: 32,
		unit: 'rpx'
	},
	//Input 输入框 组件
	fuiInput: {
		labelSize: 32,
		labelColor:'#333',
		size: 32,
		color: '#333'
	},
	//List 列表项 组件
	fuiListCell: {
		padding: '32rpx',
		arrowColor: '#B2B2B2',
		bottomLeft: 32
	},
	// V1.9.9+
	fuiSection: {
		size: 32,
		color: '#181818',
		fontWeight: 600,
		descrSize: 28,
		descrColor: '#B2B2B2',
		descrTop: 12
	},
	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

# 配置文件引入

在根目录app.js中全局引入
import fuiConfig from './components/firstui/fui-config/index'

//组件全局配置,$fui 为约定值不可修改
wx.$fui = fuiConfig
1
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
Last Updated: 10/7/2023, 12:14:41 PM