UITemplate

来自于:官方

概述

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

模块接口

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 示例