立即體驗

2020-12-29 10:53 更新

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

編寫stml文件 stml(single template markup language)文件是一個專用的文件類型,其結構和Vue的單文件組件 (SFC)相似,用類Html語法描述一個組件/頁面。更多關于stml可參考stml頁面介紹。

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

打開APICloud Studio 3并導入項目,在項目結構的pages目錄上點鼠標右鍵,在彈出的菜單中選擇“新建stml文件”,然后輸入文件名回車確認,這樣就創(chuàng)建了一個默認的空白的stml頁面,我們可以簡單的添加一個text文本。

  1. <template name='tpl'>
  2. <view class="page">
  3. <text>APICloud</text>
  4. </view>
  5. </template>
  6. <script>
  7. export default{
  8. name: 'tpl',
  9. apiready(){//like created
  10. },
  11. data() {
  12. return{
  13. }
  14. },
  15. methods: {
  16. }
  17. }
  18. </script>
  19. <style>
  20. .page {
  21. height: 100%;
  22. }
  23. </style>

預覽stml文件 預覽stml文件效果有以下三種方式:

  • 實時預覽 在stml頁面編輯區(qū)內點鼠標右鍵,選擇“實時預覽”,將會啟動Studio3的內置瀏覽器進行預覽。

  • WiFi真機實時預覽 使用WiFi真機實時預覽時,需要手機端安裝AppLoader或者自定義loader,并在loader內連接Studio。在stml頁面編輯區(qū)內點鼠標右鍵,選擇“WiFi真機實時預覽”,頁面將會自動在已連接Studio的手機端loader里面顯示。

  • WiFi同步 通過WiFi同步將Studio里面代碼同步到手機端loader里面,通過api.openWin、api.openFrame等方法打開stml頁面進行預覽:
    1. api.openWin({
    2. name: 'test',
    3. url: '../pages/test.stml',
    4. avm: true
    5. });
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號