# 全局配置 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

# 配置文件引入

在根目录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: 11/11/2023, 1:55:41 PM