UITemplate

init openView hide 附录

概述

该模块用于打开按照微信小程序的语法实现的页面，需要指出的是所有元素采用的是flexbox布局（即默认显示为display:flex），目前支持的CSS属性和微信小程序组件参考文档最后的附录。(本模块为公测版)

模块接口

init

初始化

init({params}, callback(ret))

path：

• 类型：字符串类型
• 默认值：widget://uitemplate
• 描述：（可选项）小程序包的根目录，目录下必须包含app.json文件。若不传将使用默认位置：当前widget目录下的uitemplate文件夹。支持fs://、widget://等相对路径以及绝对路径。

callback(ret, err)

ret:

• 类型：JSON 对象
• 描述：成功的回调

err:

• 类型：JSON 对象
• 描述：失败的回调
• 内部字段：

示例代码

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:

• 类型：字符串类型
• 默认值：无
• 描述：页面名字。

• 类型：字符串类型
• 默认值：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：

• 类型：字符串类型
• 默认值：无
• 描述：页面名字。

示例代码

可用性

Android, iOS

可提供的1.0.0及更高版本

show

show({params})

params

name：

• 类型：字符串类型
• 默认值：无
• 描述：页面名字。

var UITemplate = api.require("UITemplate");
UITemplate.show({
    name: 'index'
});

可用性

Android, iOS

可提供的1.0.0及更高版本

附录

组件

以下是目前支持的小程序组件，组件的属性参考微信小程序开发文档

view
scroll-view
swiper
text
progress
input
slider
switch
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-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）

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                        //规定非中日韩文本的换行规则。

2D/3D 转换属性（Transform）

transform                            //向元素应用 2D 或 3D 转换。

过渡属性（Transition）

demo 示例

• 可在 GitHub 上 下载本模块 DEMO 示例