创建页面

提示

注册新页面时需要在 pages 目录下创建文件夹，用于放置同名 js 文件、dss（如果需要编写样式）和 dml 文件：

myproject
    └── pages
            │
            └── newpage
                ├── newpage.dml
                ├── newpage.dss
                └── newpage.js

编写页面

dml文件

页面模板文件，用来定义MVVM模式下的视图层，类html写法和Vue template一致的语法，同时增加做了部分写法上的简化和dm-开发指令, 所有x-的标签都是cabinx提供的组件，可以直接用缩略写法去掉x-。更多模板语法请查看模板语法介绍。

dml中根标签必须是 <page>，且页面有且只有一个<page>组件。

<page>
    <!-- 放置其他组件 -->
</page>

js文件

js 文件中通过 XPage()方法注册一个CabinX页面，入参是个对象，包含data以及生命周期方法：

// 一个标准页面生命周期 以及data 绑定
export default XPage({
    keepAlive:true,// 页面data 缓存 默认为true
    data : {
        message : 'page data'
    },
    show : function() {
        // 页面出现时执行
    },
    hide : function() {
        // 页面销毁时执行
    }
    // 其他自定义方法
});

dss文件

一般研发无需编写dss文件，如有样式改动需要，可以在dss文件中编写，语法同scss，样式会被编译成css文件，放置在对应的目录下。为了做样式隔离，会通过当前页面路由生成命名空间。

.test {
    background-color: #fff;
}

静态资源引用

• 相对路径，~表示项目根目录。

.test {
   background-image: url('../../../static/bg.png');
}
.test1 {
   background-image: url('~/static/bg.png');
}

• 绝对路径

提示

目前仅dss文件支持静态资源使用相对路径引用，其他文件中请使用绝对路径。

XPage配置

pageTitle

页面默认标题，类型为String。标题需要变动时，可以调用this.setTitle('新的页面标题')手动修改。

提示

不同于WEB端<page title="标题">和XPage中的pageTile设置的标题在浏览器展示的位置不同，移动端<page title="标题">、pageTitle和this.setTitle()的设置都会在页面顶部展示。

所以在移动端，建议使用一种方式设置页面标题。

data

data是页面初次渲染使用的初始数据，data必须是可转成 JSON 的类型：字符串、数字、布尔值、对象、数组。获取data的数据可以通过this.data获取。

警告

data 值不支持方法！！

如下所示：

export default XPage({
    keepAlive:true,//页面data 缓存 默认为true
   // data 的key v 不支持赋值一个方法！！！
    data : {
        message : ()=>{
          return 'page data'
        }
    },
});

修改data时必须使用 setData 方法，直接修改 this.data 无法改变页面值。

//在方法中修改data 值

export default XPage({
    keepAlive:true,//页面data 缓存 默认为true
    pageTitle:'页面标题',
    data : {
        message : 'page data',
        objData:{
          name:'objName'
        },
        list:[]
    },
    // 其他自定义方法
    changeMessage(){
      this.setData({
        message:'new page data'
      },()=>{
        //赋值后 回调函数
      })
      // 支持 链式赋值
      this.setData({
      'objData.name':'new objName',
      'list[1].name' : 20
      })
    }
});

keepAlive

keepAlive 主要控制data 值的缓存,默认值为true。

信息

当每次进入当前页面的时候data 值为上次离开当前页面的值； 当值为false时 每次进入当前页面的值为逻辑定义时候的值

show/hide 生命周期钩子函数

// 一个标准页面生命周期 以及data 绑定
export default XPage({
    keepAlive:true,//页面data 缓存 默认为true
    data : {
        message : 'page data'
    },
    show : function() {
        // 页面出现时执行
    },
    hide : function() {
        // 页面销毁时执行
    }
    // 其他自定义方法
});

XPage通用API

XPage中的this指向XPage实例，可以通过this调用XPage的通用API，支持的API如下:

setData

修改data中的数据使用。

this.setData({
    message : 'new page data'
});

getComponent

获取X标记组件

<x-page>
    <x-form x="myform">
<!--other code-->
    </x-form>
</x-page>

export default XPage({
  show(){
    this.getCompoent('myform')
  }
})

loading

全局loading

export default XPage({
  show(){
    this.loading()
  }
})

hideLoading

关闭全局loading

export default XPage({
  show(){
    this.hideLoading()
  }
})

setTitle

设置页面标题

export default XPage({
  show(){
    this.setTitle('自定义标签名')
  }
})

notice

仅在page 下生效

export default XPage({
  show(){
    this.notice('自定义标签名')
  }
})

hideNotice

仅在page 下生效

export default XPage({
  show(){
    this.hideNotice()
  }
})

路由

CabinX中通过 CabinX.go() CabinX.replace() 方法控制页面跳转:

/ 跳转到某个页面
CabinX.go( '#layout/projectname/pagename' );

// 回退
CabinX.go( -1 );

// 重定向页面
CabinX.replace( url );

模块化

CabinX允许以模块化方式组织 js 代码，通过 import 方式我们可以引入相关文件：

myproject
    └── dev
         └── myproject
                └── pages
                │     │
                │     └── newpage
                │          ├── newpage.dml
                │          ├── newpage.js
                │          └── pagemodule.js
                │
                └── utils
                      ├── utils.js
                      └── other.js

• newpage.js :

// 通过相对路径引入文件
import utilsNickname from '../../utils/utils';
import moduleNickname from './pagemodule';

XPage( {
    show : function() {
        utilsNickname.fixNumber();
        console.log( utils.name );
    }
} );

• utils.js :

let utils = {
    name : 'utils',
    fixNumber : function() {
        console.log( 'do something' );
    }
}

export default utils;

获取组件对象

对于实现 x 属性的组件， js 可以通过 getComponent 方法获取组件对象，通过组件对象我们可以直接调用组件一些API或属性。

<page title="my page">
    <actions>
        <!-- 通过 bind+eventname 方式组件可以绑定自定义事件 -->
        <button text="唤醒pop" bindclick="showPop"/>
    </actions>

    <pop x="mypop" title="my pop" height="200px">
        <actions>
            <button text="取消"/>
            <button text="提交" status="primary" bindclick="closePop"/>
        </actions>
    </pop>
</page>

XPage( {
    data : {},
    show : function() {},
    showPop : function() {
        let pop = this.getComponent( 'mypop' );
        pop.show(); // show方法是pop的一个公共API方法
    }
} );