codecamp

立即体验

搭建开发环境 在进行开发之前,需要下载安装APICloud Studio3工具,通过Studio3新建和编写stml页面并预览调试,参考开发工具。

编写stml文件 stml(single template markup language)文件是一个专用的文件类型,其结构和Vue的单文件组件 (SFC)相似,用类Html语法描述一个组件/页面。更多关于stml可参考stml页面介绍。

在创建stml文件之前,我们需要在项目根目录下新建一个pages目录,只有放置在pages目录下的stml文件才会被正确编译。

打开APICloud Studio 3并导入项目,在项目结构的pages目录上点鼠标右键,在弹出的菜单中选择“新建stml文件”,然后输入文件名回车确认,这样就创建了一个默认的空白的stml页面,我们可以简单的添加一个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>

预览stml文件 预览stml文件效果有以下三种方式:

  • 实时预览 在stml页面编辑区内点鼠标右键,选择“实时预览”,将会启动Studio3的内置浏览器进行预览。

  • WiFi真机实时预览 使用WiFi真机实时预览时,需要手机端安装AppLoader或者自定义loader,并在loader内连接Studio。在stml页面编辑区内点鼠标右键,选择“WiFi真机实时预览”,页面将会自动在已连接Studio的手机端loader里面显示。

  • WiFi同步 通过WiFi同步将Studio里面代码同步到手机端loader里面,通过api.openWin、api.openFrame等方法打开stml页面进行预览:
    api.openWin({
    name: 'test',
    url: '../pages/test.stml',
    avm: true
    });
多端开发简介
示例代码
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }