Nowadays, cross platform development technology is not a new topic. There are also some open source frameworks to choose from on the market. However, there are not many platforms with mature technology and sound products and services, among which there are some frameworks that are worthy of attention.

For example, the recently used AVM, a multi terminal development framework launched iteratively by apiccloud, is based on JavaScript and compatible with multiple grammars. If you are a user of Vue and React, you can start directly without learning cost. It has virtual DOM and can write multi terminal rendering at one time; The main reason is that apiccloud has been online for 7 years and is relatively mature, so I have sorted out some of my cognition and practice in combination with the contents of AVM official documents, hoping to be helpful to developers who need to use cross platform development technology.

Why learn AVM framework?

Combined with the introduction of the AVM official website and some of my own practical experience, I have summarized a series of AVM features. I think these contents are enough for you to take the initiative to learn the AVM framework.

1. A set of code can be compiled into the installation package or code package corresponding to Android, iOS, wechat applet, iOS light App and H5.
2. Compatible with apicloud2 0 technology stack, which means that thousands of Android iOS native modules on the platform are available. Or partially introduce 3.0 technology into the old project to optimize part of the APP.
3. Native engine rendering. If AVM JS, the App will be rendered using the native engine 3.0 without webView, and all components and views will be 100% aligned with the native components and views of Android & IOS system.
4. Class Vue syntax and compatible with React JSX. Users with Vue or React foundation can get started quickly.
5. Component development to improve code reuse rate.

Page introduction in AVM:

The page in AVM is called stml page, and a typical stml file code is as follows:

1.	<template>  
2.	    <view>  
3.	        <view class="header">  
4.	            <text>{title}</text>  
5.	        </view>  
6.	        <view class="content">  
7.	            <text>{content}</text>  
8.	        </view>  
9.	        <view class="footer">  
10.	            <text>{footer}</text>  
11.	        </view>  
12.	    </view>  
13.	</template>  
14.	<style>  
15.	    .header {  
16.	      height: 45px;  
17.	    }  
18.	    .content {  
19.	      flex-direction:row;  
20.	    }  
21.	    .footer {  
22.	      height: 55px;  
23.	    }  
24.	</style>  
25.	<script>  
26.	    export default {  
27.	        name: 'api-test',  
28.	          
29.	        apiready(){  
30.	            console.log("Hello APICloud");  
31.	        },  
32.	  
33.	        data(){  
34.	            return {  
35.	                title: 'Hello App',  
36.	                content: 'this is content',  
37.	                footer: 'this is footer'  
38.	            }  
39.	        }  
40.	    }  
41.	</script>

Data binding

From the above code snippet, we can see that the data binding method is {variable}. At the same time, double braces and single braces are supported to wrap variables or expressions, which can be used to bind text content or element attributes.

Event binding

There are two ways to listen for events.

Use on listening:

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

Listen using the v-on command and abbreviations:

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

<text @click="doThis">Click me!</text>

Event handling method

The event processing method needs to be defined in methods. By default, the method contains a parameter, which can be used to obtain detail, currentTarget object, etc.

1.	<template>  
2.	    <text data-name="avm" onclick="doThis">Click me!</text>  
3.	</template>  
4.	<script>  
5.	    export default {  
6.	        name: 'test',  
7.	        methods: {  
8.	            doThis(e){  
9.	                api.alert({  
10.	                    msg:e.currentTarget.dataset.name  
11.	                });  
12.	            }  
13.	        }  
14.	    }  
15.	</script>  

Event handling methods can also use templates, such as:

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

view is a general container component, and any component can be placed inside. The default layout method is flex layout.

• be careful not to add text directly in the view. Add text using the text component.

The text component is used to display text information.

1.	<template>  
2.	    <scroll-view class="main" scroll-y>  
3.	        <text class="text">Plain text</text>  
4.	        <text class="text bold">Bold text</text>  
5.	        <text class="text italic">Italic text</text>  
6.	        <text class="text shadow">Text-shadow effect</text>  
7.	    </scroll-view>  
8.	</template>  
9.	<style>  
10.	    .main {  
11.	        width: 100%;  
12.	        height: 100%;  
13.	    }  
14.	    .text {  
15.	        height: 30px;  
16.	        font-size: 18px;  
17.	    }  
18.	    .bold {  
19.	        font-weight:bold;  
20.	    }  
21.	    .italic {  
22.	        font-style:italic;  
23.	    }  
24.	    .shadow {  
25.	        text-shadow:2px 2px #f00;  
26.	    }  
27.	</style>  
28.	<script>  
29.	    export default {  
30.	        name: 'test'  
31.	    }  
32.	</script>  

The image component is used to display pictures.

The button component defines a button.

The input component defines an input box.

swiper defines a sliding view and supports sliding up, down, left and right. Only the wiper item component can be placed.

Scroll view defines a scroll view.

If you need to scroll in the vertical direction, you need to specify the height; If you scroll horizontally, you need to specify the width, otherwise it may not be displayed.

Ist view defines the vertical scrolling view of reusable content, which can optimize memory consumption and rendering performance, and support pull-down refresh and pull-up loading. You can use the basic properties of scroll view.

Cell, list header, list footer, refresh and other components can be placed in the list view, and the cell component is used as the display content of each item.

The frame component is used to display a frame, and the effect is consistent with the openFrame method.

The frame group component is used to display a frame group in which each frame is an independent page.

Component development

Define a component:

Use STML to define a component API test stml:

1.	<template>    
2.	    <view class='header'>  
3.	        <text>{this.data.title}</text>  
4.	    </view>    
5.	</template>    
6.	<script>  
7.	    export default {    
8.	        name: 'api-test',  
9.	        data(){  
10.	            return {  
11.	                title: 'Hello APP'  
12.	            }  
13.	        }  
14.	    }  
15.	</script>  
16.	<style scoped>  
17.	    .header{  
18.	        height: 45px;  
19.	    }  
20.	</style>  

Reference component:

References in other pages or components.

1.	// app-index.stml:  
2.	  
3.	<template>    
4.	    <view class="app">    
5.	        <img src="./assets/logo.png" />    
6.	        <api-test></api-test>   
7.	    </view>    
8.	</template>  
9.	<script>  
10.	    import './components/api-test.stml'    
11.	      
12.	    export default {    
13.	        name: 'app-index',    
14.	        data: function () {    
15.	            return {  
16.	                title: 'Hello APP'  
17.	            }  
18.	        }    
19.	    }    
20.	</script>    
21.	<style>    
22.	    .app {     
23.	        text-align: center;    
24.	        margin-top: 60px;    
25.	    }    
26.	</style>  

Component lifecycle

avm.js component specification conforms to the Web Components specification, and the life cycle follows the life cycle of standard Web Components components. It is also compatible with the life cycle of Vue components.

All supported lifecycle events