avm.js 怎么样？

最新推荐文章于 2024-10-15 17:01:40 发布

海阔凭鱼跃_api

最新推荐文章于 2024-10-15 17:01:40 发布

阅读量699

点赞数 1

文章标签： ios android 小程序 vue.js react.js

本文链接：https://blog.csdn.net/ff_888888/article/details/120413599

版权

AVM是APICloud推出的跨端JavaScript 框架。

AVM的几个特点：

1. 一套代码可编译为对应Android 、iOS 、微信小程序、iOS 轻App、H5端的安装包或代码包。

2. 兼容APICloud2.0技术栈，这意味着平台上上千款Android iOS原生模块可供使用。或者在老项目里部分引入3.0的技术，对APP局部进行优化。

3. 原生引擎渲染。如果使用 avm.js 进行开发，App 将使用无 webView 的原生引擎 3.0 进行渲染，所有组件及视图与 Android & iOS 系统原生组件和视图百分百对齐。

4. 类Vue语法和兼容 React JSX。有Vue或React基础的用户可以很快上手。

5. 组件化开发，提升代码复用率。

AVM中的页面介绍：

AVM中的页面称为stml页面，一个典型的 stml 文件代码如下：

<template>
    <view>
        <view class="header">
            <text>{title}</text>
        </view>
        <view class="content">
            <text>{content}</text>
        </view>
        <view class="footer">
            <text>{footer}</text>
        </view>
    </view>
</template>
<style>
    .header {
      height: 45px;
    }
    .content {
      flex-direction:row;
    }
    .footer {
      height: 55px;
    }
</style>
<script>
    export default {
        name: 'api-test',
        
        apiready(){
            console.log("Hello APICloud");
        },

        data(){
            return {
                title: 'Hello App',
                content: 'this is content',
                footer: 'this is footer'
            }
        }
    }
</script>

数据绑定

从上面代码段中可以看到数据绑定方式为{变量},同时支持双大括号、单大括号将变量或表达式包起来，可以用于绑定文本内容或元素属性。

事件绑定

监听事件有两种方式。

使用 on 监听：

<text onclick="doThis">Click me!</text>

使用 v-on 指令以及缩写方式监听：

<text v-on:click="doThis">Click me!</text>
<text @click="doThis">Click me!</text>

事件处理方法

事件的处理方法需要在 methods 中定义，方法默认包含一个参数，可以通过该参数获取 detail、currentTarget 对象等。

<template>
    <text data-name="avm" onclick="doThis">Click me!</text>
</template>
<script>
    export default {
        name: 'test',
        methods: {
            doThis(e){
                api.alert({
                    msg:e.currentTarget.dataset.name
                });
            }
        }
    }
</script>

事件处理方法也可以使用模板的方式，如：

<text onclick={this.doThis}>Click me!</text>

默认组件举几个例子说明，更多组件可查看官方文档。

view 是通用容器组件，内部可以放置任意组件。默认布局方式为flex布局。

注意不要直接在 view 内添加文本，添加文本使用 text 组件。

text 组件用于显示文本信息。

<template>
    <scroll-view class="main" scroll-y>
        <text class="text">普通文本</text>
        <text class="text bold">粗体文本</text>
        <text class="text italic">斜体文本</text>
        <text class="text shadow">Text-shadow 效果</text>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    .text {
        height: 30px;
        font-size: 18px;
    }
    .bold {
        font-weight:bold;
    }
    .italic {
        font-style:italic;
    }
    .shadow {
        text-shadow:2px 2px #f00;
    }
</style>
<script>
    export default {
        name: 'test'
    }
</script>

image 组件用于显示图片。

button 组件定义一个按钮。

input 组件定义一个输入框。

swiper 定义滑动视图，支持上下或左右滑动。其中只可放置 swiper-item 组件。

scroll-view 定义滚动视图。

若需要在垂直方向滚动，则需要指定高度；若在水平方向滚动，则需要指定宽度，否则可能无法显示。

ist-view 定义可复用内容的竖向滚动视图，可以优化内存占用和渲染性能，支持下拉刷新和上拉加载。可使用 scroll-view 的基本属性。

list-view 里面可放置 cell、list-header、list-footer、refresh 等组件，使用 cell 组件作为每项显示内容。

frame 组件用于显示一个frame，效果同 openFrame 方法一致。

frame-group 组件用于显示一个 frame 组，里面的每个 frame 为一个独立的页面。

组件化开发

定义一个组件：

使用stml定义一个组件 api-test.stml：

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'api-test',
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }
</script>
<style scoped>
    .header{
        height: 45px;
    }
</style>

引用组件：

在其他页面或组件引用。

// app-index.stml:

<template>  
    <view class="app">  
        <img src="./assets/logo.png" />  
        <api-test></api-test> 
    </view>  
</template>
<script>
    import './components/api-test.stml'  
    
    export default {  
        name: 'app-index',  
        data: function () {  
            return {
                title: 'Hello APP'
            }
        }  
    }  
</script>  
<style>  
    .app {   
        text-align: center;  
        margin-top: 60px;  
    }  
</style>

使用JS定义一个组件 / 页面，参考官方文档。

组件生命周期

avm.js组件规范符合Web Components规范，生命周期遵循标准Web Components组件的生命周期。同时兼容Vue组件的生命周期。

所有支持的生命周期事件

生命周期函数名	触发时机
apiready	页面运行时环境准备完毕&渲染完毕。当页面未引入组件时，该事件等同于installed。
install	组件被挂载到真实DOM（或App原生界面）之前
installed	组件被挂载到真实DOM（或App原生界面）之后。在页面级别中，该事件等同于apiready。
render	组件开始渲染
uninstall	组件从真实DOM（或App原生界面）移除之前
beforeUpdate	组件更新之前
updated	组件更新完成
beforeRender	组件开始渲染之前