WeTouch 开发文档

WeTouch 开发文档

app配置

根目录的app.ui文件中,通过JS部分的config来对App进行全局配置,决定页面文件的路径、窗口表现、设置多 tab 等。 以下是一个包含了常用配置选项的 config

config: {
    "pages": [
      "pages/index",
      "pages/detail"
    ],
    "theme": {
      "theme-color": "#3399ff"
    },
    "window": {
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTextColor": "#666",
      "navigationBarBorderColor":"rgba(231, 231, 231, 0.6)",
      "backgroundColor":"#F4F4F4"
    },
    "tabBar": {
      "color": "#7a7e83",
      "selectedColor": "#39f",
      "borderColor": "rgba(231, 231, 231, 0.6)",
      "backgroundColor": "#fff",
      "list": [
        {
          "pagePath": "pages/index",
          "iconName": "home",
          "text": "首页"
        },
        {
          "pagePath": "pages/user",
          "iconName": "user",
          "text": "我的"
        }
      ]
    }
}

配置项列表

属性 类型 必填 描述
pages String Array 设置页面路径
window Object 设置默认页面的窗口表现
theme Object 主题设置
template Object 更换全局组件的代码模板
tabBar Object 设置底部 tab 的表现
pageTabBars ArrayObject 页面内的 tab 的表现
networkTimeout Object 设置网络超时时间
networkBaseUrl String 设置网络请求根路径
debug Boolean 默认是fasle,设置为true时会把报错信息以alert的方式弹出。多用于APP端错误排查

pages:路由注册

接受一个数组,每一项都是字符串,来指定APP由哪些页面组成。每一项代表对应页面的【路径+文件名】信息。

数组的第一项代表APP的初始页面。APP中新增/减少页面,都需要对 pages 数组进行修改。

路由注册的路径后面的文件名不需要写文件后缀。

Bug & Tip

1、当使用右键菜单“WeTouch新建页面”时,工具会自动将新建文件的路径插入到配置项中,如果是其他方式创建的页面,需要手动加入路径。

2、开发时,随着页面越来越多,路由配置写的路径也会越来越多,这会导致保存和编译过慢。如果希望可以快速保存和编译,可以先把其他的路径先注释或删掉,只留一两个正在做的页面路径,这样会很快。

3、tabBar页面、pageTabBars页面和showDialog API引入的页面都不需要在pages节点中进行注册。不过由于pages节点里的第一条记录是用来指定首页的,所以tabBar的第一个页面是要写在pages中。

4、如果遇到下图所示的情况,有两种可能。(1)链接过去的页面不存在 (2)该页面路径没有正确的写在路由配置中

图片名称

window

用于设置APP的导航条、标题、窗口背景色。

属性 类型 默认值 描述
navigationBarTitleText String 导航栏标题文字内容。当其他页面自身设置了标题栏文字则以页面设置的优先。
navigationStyle String default 导航栏样式,仅支持 default/custom。custom 模式可自定义导航栏。
navigationBarBackgroundColor HexColor 导航栏背景颜色,如"#000000"
navigationBarBackgroundGradient String 导航栏渐变背景色,如"linear-gradient(45deg, #508EFF, #37B9FC)"
navigationBarBorderColor String 导航栏下边框的颜色, 例如black、white或者 rgba(231, 231, 231, 0.6)
navigationBarTextStyle String white 状态栏文字颜色和导航栏文字颜色,只支持black、white
backgroundColor HexColor #ffffff 窗口的背景色
scrollType String div 默认全局为区域滚动,如果设置为 body则全局为整页滚动
showScroller Boolean false 整页滚动模式下是否显示滚动条(在APP端有效)
delay Boolean true app中页面内容是否延迟加载,默认是采用延迟加载,这样的效果就是切换界面时可以让页面先及时的切入再加载页面内容,对于安卓提升操作体验很明显。如果设置false,点击切换时,会先在后台加载好页面再切入进来。
title String touch-ui web端网页标题
cache Boolean false 是否开启全局缓存

注:HexColor(十六进制颜色值),如"#ff00ff"

theme

设置主题。目前只有主题色属性:theme-color,用来控制很多组件的默认颜色。详见文档的:“框架 >> 方案 >> 主题色机制”

比如button的primary状态颜色、switch颜色、swiper分页颜色。当更改了theme-color,这些组件默认的颜色就都变了。此时如果不希望某个组件采用主题色,可以单独调整该组件的相关属性。

属性 类型 必填 默认值 描述
theme-color HexColor 主题色

template

用于更换全局组件的代码模板。目前只有属性:loading,用来更换框架默认loading的代码片段,再配合css即可更改框架的默认loading样式。详见文档的:“框架 >> 样式 >> 自定义框架默认loading”

属性 类型 必填 默认值 描述
loading String 更改loading代码片段

tabBar

如果APP是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性说明:

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderColor String black tabbar上边框的颜色, 例如black、white或者 rgba(231, 231, 231, 0.6)
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String bottom 可选值 bottom、top

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效
iconName String 图标名称,图标使用iconfont,当 postion 为 top 时,此参数无效
selectedIconName String 选中时的图标名称,图标使用iconfont ,当 postion 为 top 时,此参数无效

Bug & Tip

  1. 当设置 position 为 top 时,将不会显示 icon
  2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

更多用法详见文档的“组件 >> 内容切换 >> 底部标签栏”

pageTabBars

tabBar配置只能应对第一级的tab场景, 如果是子页面也需要tabBar,WeTouch提供了pageTabBars配置,用户可以自由地将某些页面作为一组tab。

配置参数和tabBar完全一样。

此外,由于该项配置是一个ArrayObject,我们可以配置多组tabBar。

多组tab配置示例

{
  "pageTabBars": [{
      "list": [{
        "pagePath": "pages/demos/demo-01",
        "iconName": "api-network",
        "text": "演示页面1"
      }, {
        "pagePath": "pages/demos/demo-02",
        "iconName": "setting",
        "text": "演示页面2"
      }]
    },
    {
      "list": [{
        "pagePath": "pages/tests/test-01",
        "iconName": "api-network",
        "text": "测试页面1"
      }, {
        "pagePath": "pages/tests/test-02",
        "iconName": "setting",
        "text": "测试页面2"
      }]
    }
  ]
}

networkTimeout

可以设置各种网络请求的超时时间。

属性说明:

属性 类型 必填 说明
request Number ui.request的超时时间,单位毫秒,默认为:60000

networkBaseUrl

如果设置了networkBaseUrl,在页面使用request请求时,可以只写根路径以外的路径。例如:请求地址为http://www.uileader.com/myrequest.do。那么,baseURL可以设置为http://www.uileader.com/ 。在requst请求中,使用myrequest.do

这样的好处是,当你多个页面都使用request请求时,可以方便的切换测试环境和生产环境。