UITemplate

来自于：官方

init setData openView closeView hide show 附录

概述

该模块用于打开按照微信小程序的语法实现的页面，需要指出的是所有元素采用的是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 对象
  • 描述：失败的回调
  • 内部字段：
  1. {
  2.     msg: ''       // 错误信息
  3. }

示例代码

  1. var UITemplate = api.require("UITemplate");
  2. UITemplate.init({
  3.     path: 'widget://uitemplate'
  4. }, function(ret,err){
  5.     if(ret){
  6.         alert(JSON.stringify(ret));
  7.     }else{
  8.         alert(JSON.stringify(err));
  9.     }
  10. });

可用性

Android, iOS

可提供的1.0.0及更高版本

setData

向页面中设置数据，效果和在页面中调用this.setData方法一致。

setData({params})

params

name：

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

data:

  • 类型：JSON对象
  • 默认值：无
  • 描述：设置到页面的数据。

示例代码

  1. var UITemplate = api.require("UITemplate");
  2. UITemplate.setData({
  3.     name: 'index',
  4.     data: {
  5.         index: 1
  6.     }
  7. });

可用性

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的手机。
  • 内部字段：
  1. {
  2.     x:0,             //左上角x坐标，默认0
  3.     y:0,             //左上角y坐标，默认0
  4.     w:320,           //宽度，默认'auto'，页面从x位置开始自动充满父页面宽度
  5.     h:480            //高度，默认'auto'，页面从y位置开始自动充满父页面高度
  7.     marginLeft:0,    //相对父页面左外边距的距离，默认0
  8.     marginTop:0,    //相对父页面上外边距的距离，默认0
  9.     marginBottom:0,    //相对父页面下外边距的距离，默认0
  10.     marginRight:0    //相对父页面右外边距的距离，默认0
  11. }

level:

  • 类型：字符串类型
  • 默认值：normal
  • 描述：页面显示的层级。
  • 取值范围：
  1. normal            // 普通层级，页面添加到window、frame上面
  2. alert            // 和系统alert一样的层级，显示到当前页面的最上层

fixedOn：

  • 类型：字符串类型
  • 默认值：无
  • 描述：（可选项）视图添加到指定frame的名字，若不传则添加到当前window。

fixed：

  • 类型：字符串类型
  • 默认值：true
  • 描述：（可选项）视图是否固定在frame、window上面不随页面滚动。

callback(ret, err)

ret:

  • 类型：JSON 对象
  • 描述：页面中调用callApi方法后回调的数据。

err:

  • 类型：JSON 对象
  • 描述：错误信息。

示例代码

  1. var UITemplate = api.require("UITemplate");
  2. UITemplate.openView({
  3.     name: 'index',
  4.     url: 'pages/index/index',
  5.     data: {
  6.         index: 0
  7.     }
  8. }, function(ret, err){
  9.     if (ret){
  10.         alert(JSON.stringify(ret));
  11.     } else {
  12.         alert(JSON.stringify(err));
  13.     }
  14. });

可用性

Android, iOS

可提供的1.0.0及更高版本

closeView

关闭页面

closeView({params})

params

name：

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

示例代码

  1. var UITemplate = api.require("UITemplate");
  2. UITemplate.closeView({
  3.     name: 'index'
  4. });

可用性

Android, iOS

可提供的1.0.0及更高版本

hide

隐藏页面

hide({params})

params

name：

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

示例代码

  1. var UITemplate = api.require("UITemplate");
  2. UITemplate.hide({
  3.     name: 'index'
  4. });

可用性

Android, iOS

可提供的1.0.0及更高版本

show

显示页面

show({params})

params

name：

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

示例代码

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

可用性

Android, iOS

可提供的1.0.0及更高版本

附录

组件

以下是目前支持的小程序组件，组件的属性参考微信小程序开发文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/。

  1. view
  2. scroll-view
  3. swiper
  4. text
  5. progress
  6. input
  7. slider
  8. switch
  9. textarea
  10. image

CSS属性

以下是目前支持的CSS属性：

CSS 背景属性（Background）

  1. background-color:                //设置元素的背景颜色。
  2. background-image:                //设置元素的背景图像。

CSS 边框属性（Border）

  1. border                                //在一个声明中设置所有的边框属性。
  2. border-bottom                        //在一个声明中设置所有的下边框属性。
  3. border-bottom-color                //设置下边框的颜色。
  4. border-bottom-style                //设置下边框的样式。
  5. border-bottom-width                //设置下边框的宽度。
  6. border-color                        //设置四条边框的颜色。
  7. border-left                        //在一个声明中设置所有的左边框属性。
  8. border-left-color                //设置左边框的颜色。
  9. border-left-style                //设置左边框的样式。
  10. border-left-width                //设置左边框的宽度。
  11. border-right                        //在一个声明中设置所有的右边框属性。
  12. border-right-color                //设置右边框的颜色。
  13. border-right-style                //设置右边框的样式。
  14. border-right-width                //设置右边框的宽度。
  15. border-style                        //设置四条边框的样式。
  16. border-top                        //在一个声明中设置所有的上边框属性。
  17. border-top-color                    //设置上边框的颜色。
  18. border-top-style                    //设置上边框的样式。
  19. border-top-width                    //设置上边框的宽度。
  20. border-width                        //设置四条边框的宽度。
  21. border-radius                        //简写属性，设置所有四个 border-*-radius 属性。
  22. border-top-left-radius            //定义边框左上角的形状。
  23. border-top-right-radius            //定义边框右下角的形状。
  24. border-bottom-left-radius        //定义边框左下角的形状。
  25. border-bottom-right-radius        //定义边框右下角的形状。
  26. box-shadow                        //向方框添加一个或多个阴影。

Color 属性

  1. opacity:                            //设置元素的不透明度。

CSS 尺寸属性（Dimension）

  1. height                                //设置元素高度。
  2. max-height                        //设置元素的最大高度。
  3. max-width                            //设置元素的最大宽度。
  4. min-height                        //设置元素的最小高度。
  5. min-width                            //设置元素的最小宽度。
  6. width                                //设置元素的宽度。

可伸缩框属性（Flexible Box）

  1. flex-direction                    //指定了弹性子元素在父容器中的排列方向。
  2. justify-content                    //应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
  3. align-items                        //设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
  4. flex-wrap                            //指定弹性盒子的子元素换行方式。
  5. align-content                        //用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
  6. align-self                        //设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
  7. flex                                //用于指定弹性子元素如何分配空间。
  8. flex-grow                            //定义弹性盒子元素的扩展比率。
  9. flex-shrink                        //定义弹性盒子元素的收缩比率。
  10. flex-basis                        //定义弹性盒子元素的默认基准值。

CSS 字体属性（Font）

  1. font-family                        //规定文本的字体系列。
  2. font-size                            //规定文本的字体尺寸。
  3. font-style                        //规定文本的字体样式。
  4. font-variant                        //规定是否以小型大写字母的字体显示文本。
  5. font-weight                        //规定字体的粗细。

CSS 外边距属性（Margin）

  1. margin                                //在一个声明中设置所有外边距属性。
  2. margin-bottom                        //设置元素的下外边距。
  3. margin-left                        //设置元素的左外边距。
  4. margin-right                        //设置元素的右外边距。
  5. margin-top                        //设置元素的上外边距。

CSS 内边距属性（Padding）

  1. padding                            //在一个声明中设置所有内边距属性。
  2. padding-bottom                    //设置元素的下内边距。
  3. padding-left                        //设置元素的左内边距。
  4. padding-right                        //设置元素的右内边距。
  5. padding-top                        //设置元素的上内边距。

CSS 定位属性（Positioning）

  1. position                            //规定元素的定位类型。
  2. bottom                                //设置定位元素下外边距边界与其包含块下边界之间的偏移。
  3. left                                //设置定位元素左外边距边界与其包含块左边界之间的偏移。
  4. right                                //设置定位元素右外边距边界与其包含块右边界之间的偏移。
  5. top                                    //设置定位元素的上外边距边界与其包含块上边界之间的偏移。
  6. visibility                        //规定元素是否可见。

CSS 文本属性（Text）

  1. color                                //设置文本的颜色。
  2. direction                            //设置文本方向。
  3. letter-spacing                    //设置字符间距
  4. line-height                        //设置行高。
  5. text-align                        //规定文本的水平对齐方式。
  6. text-decoration                    //规定添加到文本的装饰效果。
  7. text-shadow                        //规定添加到文本的阴影效果。
  8. text-overflow                        //规定当文本溢出包含元素时发生的事情。
  9. unicode-bidi                        //设置或返回文本是否被重写 
  10. white-space                        //规定如何处理元素中的空白。
  11. word-break                        //规定非中日韩文本的换行规则。
  12. word-wrap                            //允许对长的不可分割的单词进行分割并换行到下一行。

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

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

过渡属性（Transition）

  1. transition                        //简写属性，用于在一个属性中设置四个过渡属性。
  2. transition-property                //规定应用过渡的 CSS 属性的名称。
  3. transition-duration                //定义过渡效果花费的时间。
  4. transition-timing-function        //规定过渡效果的时间曲线。
  5. transition-delay                    //规定过渡效果何时开始。

demo 示例