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位置开始自动充满父页面高度
  6. marginLeft:0, //相对父页面左外边距的距离,默认0
  7. marginTop:0, //相对父页面上外边距的距离,默认0
  8. marginBottom:0, //相对父页面下外边距的距离,默认0
  9. marginRight:0 //相对父页面右外边距的距离,默认0
  10. }

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