示例代碼

本頁面演示如何使用avm.js語法的兩種模式之一，單文件模式，定義一個頁面或者組件，并渲染到終端。

使用單文件模式，stml文件定義一個組件 / 頁面

?stml組件 / 頁面符合Vue單文件組件(SFC)規(guī)范，最終被編譯為JS組件 / 頁面，渲染到不同終端。

定義頁面或組件：

// api-test.stml:


<template>  
    <view>
        <text>Hello APP</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest'
    }
</script>

添加樣式：

<template>  
    <view class='header'>
        <text>Hello APP</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest'
    }
</script>
<style>
    .header{
        height: 45px;
    }
</style>

數(shù)據(jù)綁定：

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest',
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }
</script>
<style>
    .header{
        height: 45px;
    }
</style>

stml定義組件 / 頁面在被編譯為js組件過程中，會自動生成渲染代碼。

API和模塊使用

?avm.js兼容和繼承APICloud所有API、模塊、技術棧以及開發(fā)體驗，因此，api以及模塊的使用及調(diào)試方式遵循APICloud現(xiàn)有標準及習慣。

api對象使用：

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest',
        apiready(){
            api.toast({msg: '網(wǎng)絡錯誤'});
            this.data.title = '網(wǎng)絡錯誤';
        },
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }
</script>
<style>
    .header{
        height: 45px;
    }
</style>

模塊使用：

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest',
        apiready(){
            var mam = api.require('mam');
            mam.checkUpdate(function(ret, err){
                if (ret) {
                    api.toast({msg: '成功'});
                } else {
                    api.toast({msg: '失敗'});
                }
            });
        },
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }
</script>
<style>
    .header{
        height: 45px;
    }
</style>