stml頁面

stml介紹 stml（single template markup language）文件是一個專用的文件類型，其結(jié)構(gòu)和Vue的單文件組件 (SFC)相似，用類Html語法描述一個組件/頁面。

一個stml文件一般包含三種類型的頂級語言塊<template>，<script>和<style>，同時支持引入外部js或者css文件，以及其他stml組件。

stml文件最終被分別編譯為APP、小程序代碼。

App端加載stml頁面的方式

在config.xml中全局配置avm字段。配置后打開頁面默認(rèn)使用原生渲染引擎，當(dāng)打開標(biāo)準(zhǔn)H5頁面時，需將openWin、openFrame等方法的avm參數(shù)設(shè)置為false。

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

使用openWin、openFrame等方法打開頁面時設(shè)置avm參數(shù)。

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下僅允許包含一個子節(jié)點。template塊類似于標(biāo)準(zhǔn)HTML中的body標(biāo)簽。

<script>：stml文件允許最多包含一個script塊，script塊類似于標(biāo)準(zhǔn)Html的script標(biāo)簽。該塊內(nèi)可使用import方式引入外部js，被引入的js內(nèi)容將被編譯到最終的js組件中。例如：

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

<style>：stml文件允許包含一個或多個style塊，style塊類似于標(biāo)準(zhǔn)Html的style標(biāo)簽。該塊支持以src的方式引入外部css，被引入的css內(nèi)容將被編譯到最終的js組件中。例如：

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

編譯器會解析stml文件，提取每個語言塊，分別編譯導(dǎo)出為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規(guī)范的代碼，符合avm.js單語言片段模式要求。在輸出之前，還會經(jīng)過一系列的處理，最終被編譯為ES5規(guī)范的代碼，用于DeepEngine或者標(biāo)準(zhǔn)瀏覽器執(zhí)行。

avm.define avm.define函數(shù)用于聲明或者定義一個組件。接收兩個參數(shù)，組件名（例如"a-button"）和組件對象。

avm.render avm.render函數(shù)用于聲明將已定義的組件渲染到某元素上。默認(rèn)渲染到body，body為窗口或者頁面的根元素。