stml页面

stml介绍 stml（single template markup language）文件是一个专用的文件类型，其结构和Vue的单文件组件 (SFC)相似，用类Html语法描述一个组件/页面。

一个stml文件一般包含三种类型的顶级语言块<template>，<script>和<style>，同时支持引入外部js或者css文件，以及其他stml组件。

stml文件最终被分别编译为APP、小程序代码。

App端加载stml页面的方式

在config.xml中全局配置avm字段。配置后打开页面默认使用原生渲染引擎，当打开标准H5页面时，需将openWin、openFrame等方法的avm参数设置为false。

<preference name="avm" value="true"/>

使用openWin、openFrame等方法打开页面时设置avm参数。

api.openWin({
    name: 'test',
    url: '../pages/test.stml',
    avm: true
});

代码示例

一个典型的.stml文件代码如下：

<template>
    <view>
        <view class="header">
            <text>{this.data.title}</text>
        </view>
        <view class="content">
            <text>{this.data.content}</text>
        </view>
        <view class="footer">
            <text>{this.data.footer}</text>
        </view>
    </view>
</template>
<style>
    .header {
      height: 45px;
    }
    .content {
      flex-direction:row;
    }
    .footer {
      height: 55px;
    }
</style>
<script>
    export default {
        name: 'api-test',
        
        apiready(){
            console.log("Hello APICloud");
        },
        data(){
            return {
                title: 'Hello App',
                content: 'this is content',
                footer: 'this is footer'
            }
        }
    }
</script>

代码块描述 <template>：stml文件允许最多包含一个template块，且template下仅允许包含一个子节点。template块类似于标准HTML中的body标签。

<script>：stml文件允许最多包含一个script块，script块类似于标准Html的script标签。该块内可使用import方式引入外部js，被引入的js内容将被编译到最终的js组件中。例如：

<script>
    import './path/utils.js';
    export default {
        name: 'api-test',
    }
</script>

<style>：stml文件允许包含一个或多个style块，style块类似于标准Html的style标签。该块支持以src的方式引入外部css，被引入的css内容将被编译到最终的js组件中。例如：

<style src='./path/common.css' />
<style>
    .header{
        height: 45px;
    }
</style>

编译器会解析stml文件，提取每个语言块，分别编译导出为APP（JS组件 / 页面）、H5（SPA）、小程序（WXML / WXSS / JS）代码，用于不同终端的渲染。

编译后的App js代码参考：

class ApiTest extends Component {
  
    data = {
        title: 'Hello App',
        content: 'this is content',
        footer: 'this is footer'
    }
    
    apiready () {
        console.log("Hello APICloud");
    }
    render() {
        return (
            <view>
                <view class='header'>
                    <text>{this.data.title}</text>
                </view>
                <view class='content'>
                    <text>{this.data.content}</text>
                </view>
                <view class='footer'>
                    <text>{this.data.footer}</text>
                </view>
            </view>
        );
    }
}
ApiTest.css = {
    '.header': {
        height: '45px'
    },
    '.content': {
        flex: 1
    },
    '.footer': {
        height: '55px'
    }
}
avm.define('api-test', ApiTest);
avm.render(<api-test />, 'body');

该代码为编译中间过程的临时代码，是ES6规范的代码，符合avm.js单语言片段模式要求。在输出之前，还会经过一系列的处理，最终被编译为ES5规范的代码，用于DeepEngine或者标准浏览器执行。

avm.define avm.define函数用于声明或者定义一个组件。接收两个参数，组件名（例如"a-button"）和组件对象。

avm.render avm.render函数用于声明将已定义的组件渲染到某元素上。默认渲染到body，body为窗口或者页面的根元素。