UIPersonalCenter
概述
UIPersonalCenter 是一个带有图片模糊效果的个人信息展示中心，开发者只需配置相关接口参数即可实现一个原生效果的个人展示中心。本插件宽度默认当前设备屏幕宽度。
open
打开个人中心
open({params}, callback(ret))
params
y ：
- 类型：数字
- 描述：（可选项）个人中心视图上边距屏幕位置
- 默认值：0
h ：
- 类型：数字
- 描述：（可选项）视图的高，不可小于230
- 默认值：230
data：
- 类型：JSON对象
- 描述：插件数据配置
- 内部字段：
{
bg: '', //字符串类型；背景图片路径，支持http、https、widget、fs协议，插件会对图片缓存处理
avatar:'', //（可选项）字符串类型；头像图片路径，支持http、https、widget、fs协议，不传则不显示头像，插件会对图片缓存处理
title:'', //（可选项）字符串类型；用户名；不传则不显示
subtitle:'', //（可选项）字符串类型；子标题；不传则不显示
menuAry:[{ //（可选项）数组类型；底部菜单按钮组成的数组，传几个显示几个按钮，宽度平均分，不传则或传空则不显示底部按钮
title:'', //（可选项）字符串类型；按钮上的标题不传则不显示
subtitle:'' //（可选项）字符串类型；子标题，不传则不显示
}]
}
styles：
- 类型：JSON对象
- 描述：插件样式配置
- 内部字段：
{
blur: 8, //（可选项）数字类型；背景毛玻璃模糊度，推荐取值范围1-100；默认：8
titleColor:'', //（可选项）字符串类型；标题颜色，支持rgb、rgba、#；默认：#FFFFFF
titleSize:'', //（可选项）数字类型；标题大小；默认：13
subtitleColor:'', //（可选项）字符串类型；子标题颜色，支持rgb、rgba、#；默认：#FFFFFF
subtitleSize:'', //（可选项）数字类型；子标题字体大小；默认：13
avatar: { //（可选项）JSON对象；头像样式配置
size:, //（可选项）数字类型；头像大小；默认：
marginTop: //（可选项）数字类型；上边距；默认：10
},
leftBtn: { //（可选项）JSON对象；左边按钮配置，传空则取默认值
title:'', //（可选项）字符串类型；按钮标题；不传则不显示，且icon左右居中显示
titleSize:, //（可选项）数字类型；按钮标题字体大小；默认：11
titleColor:'', //（可选项）字符串类型；按钮标题颜色，支持rgb、rgba、#；默认：#FFFFFF
bg:'', //（可选项）字符串类型；按钮背景图标路径，要求本地路径（widget://、fs://）；不传则不显示
icon:'', //（可选项）字符串类型；按钮图标路径，要求本地路径（widget://、fs://）；不传则不显示，且title左右居中显示
iconSize:, //（可选项）数字类型；按钮图标大小；默认：13
size{
w:, //（可选项）数字类型；按钮宽；默认：80
h:
} //（可选项）数字类型；按钮高；默认：25
marginLeft:, //（可选项）数字类型；按钮左边距；默认：20
marginTop: //（可选项）数字类型；按钮上边距；默认：10
},
rightBtn: { //（可选项）JSON对象；右边按钮配置，传空则取默认值
title:'', //（可选项）字符串类型；按钮标题；不传则不显示，且icon左右居中显示
titleSize:, //（可选项）数字类型；按钮标题字体大小；默认：11
titleColor:'', //（可选项）字符串类型；按钮标题颜色，支持rgb、rgba、#；默认：#FFFFFF
bg:'', //（可选项）字符串类型；按钮背景图标路径，要求本地路径（widget://、fs://）；不传则不显示
corner:, //（可选项）数字类型；按钮圆角大小；默认：5
icon:'', //（可选项）字符串类型；按钮图标路径，要求本地路径（widget://、fs://）；不传则不显示，且title左右居中显示
iconSize:, //（可选项）数字类型；按钮图标大小；默认：13
size:{
w:, //（可选项）数字类型；按钮宽；默认：80
h:
}, //（可选项）数字类型；按钮高；默认：25
marginRight:, //（可选项）数字类型；按钮左边距；默认：20
marginTop: //（可选项）数字类型；按钮上边距；默认：10
},
modBtn:{ //（可选项）JSON对象；头像右下角按钮配置，若不传则不显示，传空则取默认值
size:, //（可选项）数字类型；按钮大小 ,默认:20
img:'' // 字符串类型；按钮图片路径；要求本地路径（widget://、fs://）;不传不显示
},
menuBtn: { //（可选项）JSON对象；底部菜单按钮配置
height: 44, //（可选项）数字类型；按钮高度
borderColor:'', //（可选项）字符串类型；分割线颜色，支持rgb、rgba、#；默认：#ffffff
titleSize: 16, //（可选项）数字类型；按钮标题大小；默认：16
subtitleSize: 13, //（可选项）数字类型；按钮子标题大小；默认：13
normal: { //（可选项）JSON对象；按钮常态样式配置
bg: '', //（可选项）字符串类型；按钮背景色，支持rgb、rgba、#；默认：#636363
titleColor:'', //（可选项）字符串类型；标题色，支持rgb、rgba、#；默认：#ffffff
subtitleColor:''//（可选项）字符串类型；子标题色，支持rgb、rgba、#；默认：#ffffff
},
selected: { //（可选项）JSON对象；按钮选中后的样式配置
bg: '', //（可选项）字符串类型；按钮背景色，支持rgb、rgba、#；默认：#48D1CC
titleColor:'', //（可选项）字符串类型；标题色，支持rgb、rgba、#；默认：#87CEFA
subtitleColor:''//（可选项）字符串类型；子标题色，支持rgb、rgba、#；默认：#87CEFA
},
highlight: { //（可选项）JSON对象；按钮高亮的样式配置
bg: '' //（可选项）字符串类型；按钮背景色，支持rgb、rgba、#；默认：#48D1CC
},
pointer: { //（可选项）JSON对象；按钮下边游标指针配置，若不传则不显示，游标指针为等边三角形，其大小计入插件总高度
size: 6, //（可选项）数字类型；游标指针大小；默认：6 大小不得大于12
color: '' //（可选项）字符串类型；游标指针背景色，支持rgb、rgba、#；默认：#48D1CC
}
}
}
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
fixed:
- 类型：布尔
- 描述：（可选项）插件是否随所属 window 或 frame 滚动
- 默认值：true（不随之滚动）
callback(ret)
ret:
- 类型：JSON 对象
- 内部字段：
{
eventType:'show', //字符串类型；交互事件类型，取值范围如下：
//leftBtn：点击左上角按钮事件
//rightBtn：点击右上角按钮事件
//modBtn：点击头像上修改按钮事件
//menu：点击底部菜单按钮事件
index:0 //数字类型；底部菜单按钮索引，仅当 eventType 为 menu 时有值
}
示例代码
var UIPersonalCenter = api.require('UIPersonalCenter');
UIPersonalCenter.open({
y : 0,
h:230,
data:{
bg: 'widget://image/timg.png',
avatar:'widget://image/timg.png',
title:'夜阑',
subtitle:'听风雨',
menuAry:[{
title:'铁马',
subtitle:'冰河'
},{
title:'草地',
subtitle:'月光'
},{
title:'锄禾',
subtitle:'旱地'
}]
},
styles:{
blur: 8,
titleColor:'#FFFFFF',
titleSize:10,
subtitleColor:'#F00',
subtitleSize:8,
avatar:{
size:120,
marginTop:10,
},
leftBtn:{
title:'银河',
titleSize:10,
titleColor:'#f00',
bg:'widget://image/timg.png',
corner:5,
icon:'widget://res/emotion/Expression_6.png',
iconSize:20,
size:{
w:50,
h:20,
},
marginLeft:20,
marginTop:10,
},
rightBtn: {
title:'玉楼',
titleSize:11,
titleColor:'#F00',
bg:'#FFFFFF',
corner:5,
icon:'widget://res/emotion/Expression_4.png',
iconSize:20,
size: {
w:50,
h:20
},
marginRight:20,
marginTop: 10,
},
modBtn:{
size:30,
img:'widget://res/emotion/Expression_5.png'
},
menuBtn: {
height: 44,
borderColor:'#F00',
titleSize: 16,
subtitleSize: 13,
normal: {
bg: '#4169E1',
titleColor:'#ffffff',
subtitleColor:'#f00'
},
selected: {
bg: '#FFFFFF',
titleColor:'#87CEFA',
subtitleColor:'#87CEFA'
},
highlight: {
bg: 'rgba(0,0,0,1)'
},
pointer: {
size: 6,
color: '#f00'
},
},
}
}, function(ret, err) {
if (ret) {
api.alert({
msg: JSON.stringify(ret)
})
} else {
api.alert({
msg: JSON.stringify(err)
})
}
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
updateValue
刷新个人中心显示数据
updateValue({params})
params
data：
- 类型：JSON对象
- 描述：插件数据配置
- 内部字段：
{
bg: '', //（可选项）字符串类型；背景图片路径，支持http、https、widget、fs协议，插件会对图片缓存处理,不传不更新
avatar:'', //（可选项）字符串类型；头像图片路径，支持http、https、widget、fs协议，不传则不显示头像，插件会对图片缓存处理,不传不更新
title:'', //（可选项）字符串类型；用户名；不传不更新
subtitle:'', //（可选项）字符串类型；子标题；不传不更新
menuAry:[{ //（可选项）数组类型；,不传不更新
title:'', //（可选项）字符串类型；标题，不传不更新
subtitle:'' //（可选项）字符串类型；子标题，不传不更新
}]
}
示例代码
var UIPersonalCenter = api.require('UIPersonalCenter');
UIPersonalCenter.updateValue({
data:{
bg: 'widget://image/head.jpg',
avatar:'http://img.zcool.cn/community/010f87596f13e6a8012193a363df45.jpg@1280w_1l_2o_100sh.jpg',
title:'柚子科技',
subtitle:'哈哈哈',
menuAry:[{
subtitle:'123',
title:'1'
},{
title:'2',
subtitle: '456'
},{
title:'7',
subtitle: '363'
}]
}
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
close
关闭个人中心
close()
示例代码
var UIPersonalCenter = api.require('UIPersonalCenter');
UIPersonalCenter.close();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
getSelect
获取选中按钮
getSelect(callback(ret))
callback(ret)
ret:
- 类型：JSON 对象
- 内部字段：
{
index:0 //数字类型；当前选中项的索引
}
示例代码
var UIPersonalCenter = api.require('UIPersonalCenter');
UIPersonalCenter.getSelect(function(ret){
console.log(ret.index);
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
setSelect
设置选中按钮
setSelect({params})
params
index：
- 类型：数字
- 描述：（可选项）底部菜单按钮选中项的索引
- 默认值：0
示例代码
var UIPersonalCenter = api.require('UIPersonalCenter');
UIPersonalCenter.setSelect({
index: 1
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
show
显示个人中心
show()
示例代码
var UIPersonalCenter = api.require('UIPersonalCenter');
UIPersonalCenter.show();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
hide
隐藏个人中心
hide()
示例代码
var UIPersonalCenter = api.require('UIPersonalCenter');
UIPersonalCenter.hide();
补充说明
隐藏个人中心，并没有从内存里清除
可用性
iOS、Android系统
可提供的1.0.0及更高版本