APICloud多端应用开发者文档简介

兼容和继承APICloud所有API、模块、技术栈以及用户体验的基础上,APICloud定义了一套新的代码编写标准(DSL):

基于标准Web Components组件化思想,兼容Vue / React语法特性,通过一次编码,分别编译为APP、小程序代码,实现多端开发。

APP代码使用DeepEngine3.0运行,全翻译式的运行原理提供完全原生的体验和性能。无论是面向APP还是小程序打造应用,本文档都可以提供您所需的指南和API参考。
搭建开发环境
在进行开发之前,需要下载安装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
});

示例代码

本页面演示如何使用avm.js语法的两种模式之一,单文件模式,定义一个页面或者组件,并渲染到终端。
使用单文件模式,stml文件定义一个组件 / 页面
stml组件 / 页面符合Vue单文件组件(SFC)规范,最终被编译为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>

数据绑定:

<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、模块、技术栈以及开发体验,因此,api以及模块的使用及调试方式遵循APICloud现有标准及习惯。
api对象使用:

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'ApiTest',
        apiready(){
            api.toast({msg: '网络错误'});
            this.data.title = '网络错误';
        },
        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>

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页