立即體驗(yàn)

搭建開發(fā)環(huán)境 在進(jìn)行開發(fā)之前，需要下載安裝APICloud Studio3工具，通過Studio3新建和編寫stml頁(yè)面并預(yù)覽調(diào)試，參考開發(fā)工具。

編寫stml文件 stml（single template markup language）文件是一個(gè)專用的文件類型，其結(jié)構(gòu)和Vue的單文件組件 (SFC)相似，用類Html語(yǔ)法描述一個(gè)組件/頁(yè)面。更多關(guān)于stml可參考stml頁(yè)面介紹。

在創(chuàng)建stml文件之前，我們需要在項(xiàng)目根目錄下新建一個(gè)pages目錄，只有放置在pages目錄下的stml文件才會(huì)被正確編譯。

打開APICloud Studio 3并導(dǎo)入項(xiàng)目，在項(xiàng)目結(jié)構(gòu)的pages目錄上點(diǎn)鼠標(biāo)右鍵，在彈出的菜單中選擇“新建stml文件”，然后輸入文件名回車確認(rèn)，這樣就創(chuàng)建了一個(gè)默認(rèn)的空白的stml頁(yè)面，我們可以簡(jiǎn)單的添加一個(gè)text文本。

<template name='tpl'>
    <view class="page">
        <text>APICloud</text>
    </view>
</template>
<script>
    export default{
        name: 'tpl',
        apiready(){//like created


        },
        data() {
            return{


            }
        },
        methods: {


        }
    }
</script>
<style>
    .page {
        height: 100%;
    }
</style>

預(yù)覽stml文件 預(yù)覽stml文件效果有以下三種方式：

• 實(shí)時(shí)預(yù)覽 在stml頁(yè)面編輯區(qū)內(nèi)點(diǎn)鼠標(biāo)右鍵，選擇“實(shí)時(shí)預(yù)覽”，將會(huì)啟動(dòng)Studio3的內(nèi)置瀏覽器進(jìn)行預(yù)覽。

• WiFi真機(jī)實(shí)時(shí)預(yù)覽 使用WiFi真機(jī)實(shí)時(shí)預(yù)覽時(shí)，需要手機(jī)端安裝AppLoader或者自定義loader，并在loader內(nèi)連接Studio。在stml頁(yè)面編輯區(qū)內(nèi)點(diǎn)鼠標(biāo)右鍵，選擇“WiFi真機(jī)實(shí)時(shí)預(yù)覽”，頁(yè)面將會(huì)自動(dòng)在已連接Studio的手機(jī)端loader里面顯示。

• WiFi同步 通過WiFi同步將Studio里面代碼同步到手機(jī)端loader里面，通過api.openWin、api.openFrame等方法打開stml頁(yè)面進(jìn)行預(yù)覽：

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