UITemplate
来自于：官方
概述
该模块用于打开按照微信小程序的语法实现的页面，需要指出的是所有元素采用的是flexbox布局（即默认显示为display:flex），目前支持的CSS属性和微信小程序组件参考文档最后的附录。(本模块为公测版)
模块接口
init
初始化
init({params}, callback(ret))
params
path：
- 类型：字符串类型
- 默认值：widget://uitemplate
- 描述：（可选项）小程序包的根目录，目录下必须包含app.json文件。若不传将使用默认位置：当前widget目录下的uitemplate文件夹。支持fs://、widget://等相对路径以及绝对路径。
callback(ret, err)
ret:
- 类型：JSON 对象
- 描述：成功的回调
err:
- 类型：JSON 对象
- 描述：失败的回调
- 内部字段：
{
msg: '' // 错误信息
}
示例代码
var UITemplate = api.require("UITemplate");
UITemplate.init({
path: 'widget://uitemplate'
}, function(ret,err){
if(ret){
alert(JSON.stringify(ret));
}else{
alert(JSON.stringify(err));
}
});
可用性
Android, iOS
可提供的1.0.0及更高版本
setData
向页面中设置数据，效果和在页面中调用this.setData方法一致。
setData({params})
params
name：
- 类型：字符串类型
- 默认值：无
- 描述：页面名字。
data:
- 类型：JSON对象
- 默认值：无
- 描述：设置到页面的数据。
示例代码
var UITemplate = api.require("UITemplate");
UITemplate.setData({
name: 'index',
data: {
index: 1
}
});
可用性
Android, iOS
可提供的1.0.0及更高版本
openView
打开页面
在打开的页面中可以通过callApi方法回调数据，数据会回调给本方法传入的callback。
openView({params}, callback(ret, err))
params
name:
- 类型：字符串类型
- 默认值：无
- 描述：页面名字。
url：
- 类型：字符串类型
- 默认值：app.json中pages字段中的第一个
- 描述：（可选项）页面路径。若不传，则使用app.json中配置的pages字段的第一个。
data:
- 类型：JSON对象
- 默认值：无
- 描述：（可选项）页面初始化数据。
rect：
- 类型：JSON 对象
- 默认值：见内部字段
- 描述：（可选项）页面的位置和大小，设置margin后，在不同手机上面会保持与父页面的各方向边距一致，而中间区域会自动扩充。建议使用margin布局，可以完美适配带smartBar的手机。
- 内部字段：
{
x:0, //左上角x坐标，默认0
y:0, //左上角y坐标，默认0
w:320, //宽度，默认'auto'，页面从x位置开始自动充满父页面宽度
h:480 //高度，默认'auto'，页面从y位置开始自动充满父页面高度
marginLeft:0, //相对父页面左外边距的距离，默认0
marginTop:0, //相对父页面上外边距的距离，默认0
marginBottom:0, //相对父页面下外边距的距离，默认0
marginRight:0 //相对父页面右外边距的距离，默认0
}
level:
- 类型：字符串类型
- 默认值：normal
- 描述：页面显示的层级。
- 取值范围：
normal // 普通层级，页面添加到window、frame上面
alert // 和系统alert一样的层级，显示到当前页面的最上层
fixedOn：
- 类型：字符串类型
- 默认值：无
- 描述：（可选项）视图添加到指定frame的名字，若不传则添加到当前window。
fixed：
- 类型：字符串类型
- 默认值：true
- 描述：（可选项）视图是否固定在frame、window上面不随页面滚动。
callback(ret, err)
ret:
- 类型：JSON 对象
- 描述：页面中调用callApi方法后回调的数据。
err:
- 类型：JSON 对象
- 描述：错误信息。
示例代码
var UITemplate = api.require("UITemplate");
UITemplate.openView({
name: 'index',
url: 'pages/index/index',
data: {
index: 0
}
}, function(ret, err){
if (ret){
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
Android, iOS
可提供的1.0.0及更高版本
closeView
关闭页面
closeView({params})
params
name：
- 类型：字符串类型
- 默认值：无
- 描述：页面名字。
示例代码
var UITemplate = api.require("UITemplate");
UITemplate.closeView({
name: 'index'
});
可用性
Android, iOS
可提供的1.0.0及更高版本
hide
隐藏页面
hide({params})
params
name：
- 类型：字符串类型
- 默认值：无
- 描述：页面名字。
示例代码
var UITemplate = api.require("UITemplate");
UITemplate.hide({
name: 'index'
});
可用性
Android, iOS
可提供的1.0.0及更高版本
show
显示页面
show({params})
params
name：
- 类型：字符串类型
- 默认值：无
- 描述：页面名字。
示例代码
var UITemplate = api.require("UITemplate");
UITemplate.show({
name: 'index'
});
可用性
Android, iOS
可提供的1.0.0及更高版本
附录
组件
以下是目前支持的小程序组件，组件的属性参考微信小程序开发文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/。
view
scroll-view
swiper
text
progress
input
slider
switch
textarea
image
CSS属性
以下是目前支持的CSS属性：
CSS 背景属性（Background）
background-color: //设置元素的背景颜色。
background-image: //设置元素的背景图像。
CSS 边框属性（Border）
border //在一个声明中设置所有的边框属性。
border-bottom //在一个声明中设置所有的下边框属性。
border-bottom-color //设置下边框的颜色。
border-bottom-style //设置下边框的样式。
border-bottom-width //设置下边框的宽度。
border-color //设置四条边框的颜色。
border-left //在一个声明中设置所有的左边框属性。
border-left-color //设置左边框的颜色。
border-left-style //设置左边框的样式。
border-left-width //设置左边框的宽度。
border-right //在一个声明中设置所有的右边框属性。
border-right-color //设置右边框的颜色。
border-right-style //设置右边框的样式。
border-right-width //设置右边框的宽度。
border-style //设置四条边框的样式。
border-top //在一个声明中设置所有的上边框属性。
border-top-color //设置上边框的颜色。
border-top-style //设置上边框的样式。
border-top-width //设置上边框的宽度。
border-width //设置四条边框的宽度。
border-radius //简写属性，设置所有四个 border-*-radius 属性。
border-top-left-radius //定义边框左上角的形状。
border-top-right-radius //定义边框右下角的形状。
border-bottom-left-radius //定义边框左下角的形状。
border-bottom-right-radius //定义边框右下角的形状。
box-shadow //向方框添加一个或多个阴影。
Color 属性
opacity: //设置元素的不透明度。
CSS 尺寸属性（Dimension）
height //设置元素高度。
max-height //设置元素的最大高度。
max-width //设置元素的最大宽度。
min-height //设置元素的最小高度。
min-width //设置元素的最小宽度。
width //设置元素的宽度。
可伸缩框属性（Flexible Box）
flex-direction //指定了弹性子元素在父容器中的排列方向。
justify-content //应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
align-items //设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap //指定弹性盒子的子元素换行方式。
align-content //用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-self //设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex //用于指定弹性子元素如何分配空间。
flex-grow //定义弹性盒子元素的扩展比率。
flex-shrink //定义弹性盒子元素的收缩比率。
flex-basis //定义弹性盒子元素的默认基准值。
CSS 字体属性（Font）
font-family //规定文本的字体系列。
font-size //规定文本的字体尺寸。
font-style //规定文本的字体样式。
font-variant //规定是否以小型大写字母的字体显示文本。
font-weight //规定字体的粗细。
CSS 外边距属性（Margin）
margin //在一个声明中设置所有外边距属性。
margin-bottom //设置元素的下外边距。
margin-left //设置元素的左外边距。
margin-right //设置元素的右外边距。
margin-top //设置元素的上外边距。
CSS 内边距属性（Padding）
padding //在一个声明中设置所有内边距属性。
padding-bottom //设置元素的下内边距。
padding-left //设置元素的左内边距。
padding-right //设置元素的右内边距。
padding-top //设置元素的上内边距。
CSS 定位属性（Positioning）
position //规定元素的定位类型。
bottom //设置定位元素下外边距边界与其包含块下边界之间的偏移。
left //设置定位元素左外边距边界与其包含块左边界之间的偏移。
right //设置定位元素右外边距边界与其包含块右边界之间的偏移。
top //设置定位元素的上外边距边界与其包含块上边界之间的偏移。
visibility //规定元素是否可见。
CSS 文本属性（Text）
color //设置文本的颜色。
direction //设置文本方向。
letter-spacing //设置字符间距
line-height //设置行高。
text-align //规定文本的水平对齐方式。
text-decoration //规定添加到文本的装饰效果。
text-shadow //规定添加到文本的阴影效果。
text-overflow //规定当文本溢出包含元素时发生的事情。
unicode-bidi //设置或返回文本是否被重写
white-space //规定如何处理元素中的空白。
word-break //规定非中日韩文本的换行规则。
word-wrap //允许对长的不可分割的单词进行分割并换行到下一行。
2D/3D 转换属性（Transform）
transform //向元素应用 2D 或 3D 转换。
过渡属性（Transition）
transition //简写属性，用于在一个属性中设置四个过渡属性。
transition-property //规定应用过渡的 CSS 属性的名称。
transition-duration //定义过渡效果花费的时间。
transition-timing-function //规定过渡效果的时间曲线。
transition-delay //规定过渡效果何时开始。
demo 示例
可在 GitHub 上 下载本模块 DEMO 示例