示例代碼

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

使用單文件模式，stml文件定義一個(gè)組件 / 頁(yè)面

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

定義頁(yè)面或組件：

// 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定義組件 / 頁(yè)面在被編譯為js組件過(guò)程中，會(huì)自動(dòng)生成渲染代碼。

API和模塊使用

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

api對(duì)象使用：

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest',
        apiready(){
            api.toast({msg: '網(wǎng)絡(luò)錯(cuò)誤'});
            this.data.title = '網(wǎng)絡(luò)錯(cuò)誤';
        },
        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>