Detailed explanation of the front-end framework for low-threshold development of iOS, Android, and mini-program applications

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

For example, the AVM I used recently is a multi-terminal development framework iteratively launched by APICloud. It is based on JavaScript and is compatible with multiple syntaxes. If you are a user of Vue or React, you can get started directly without much learning cost. It has a virtual DOM and can write multi-terminal rendering at one time. Mainly, APICloud has been online for 7 years and is relatively mature, so I have organized some of my own knowledge and practices in combination with the contents of the AVM official documentation, hoping to be helpful to developers who need to use cross-platform development technology.

Why learn the AVM framework?

Combining the introduction on the AVM official website and 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 codes can be compiled into installation packages or code packages corresponding to Android, iOS, WeChat applet, iOS light app, and H5.

2. Compatible with APICloud2.0 technology stack, which means thousands of Android and iOS native modules are available on the platform. Or partially introduce 3.0 technology into the old project and optimize the APP locally.

3. Native engine rendering. If you use avm.js for development, 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 the Android & iOS systems.

4. Vue-like syntax and compatible with React JSX. Users with Vue or React basics can get started quickly.

5. Component-based development improves code reuse.

Page introduction in AVM:

The page in AVM is called stml page. A typical stml file code is as follows:

<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>

Data Binding

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

Event Binding

There are two ways to listen for events.

Use on monitoring:

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

Use the v-on directive and the abbreviation to listen:

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

Event handling methods

The event processing method needs to be defined in methods. The method contains a parameter by default, through which detail, currentTarget object, etc. can be obtained.

<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>

Event handling methods can also use templates, such as:

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

Here are a few examples of default components. For more components, see the official documentation.

View is a general container component, in which any component can be placed. The default layout is flex layout.

Be careful not to add text directly in the view, use the text component to add text.

The text component is used to display text information.

<template>  
    <scroll-view class="main" scroll-y>  
       <text class="text">Normal text</text>  
      <text class="text bold">Bold text</text>  
        <text class="text italic">Italic text</text>  
        <text class="text shadow">Text-shadow effect</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>

The image component is used to display images.

The button component defines a button.

The input component defines an input box.

swiper defines a sliding view that supports sliding up and down or left and right. Only swiper-item components can be placed in it.

scroll-view defines a scroll view.

If you need to scroll vertically, you need to specify the height; if you need to scroll horizontally, you need to specify the width, otherwise it may not be displayed.

ist-view defines a vertical scrolling view of reusable content, which can optimize memory usage and rendering performance, and supports pull-down to refresh and pull-up to load. You can use the basic properties of scroll-view.

Components such as cell, list-header, list-footer, refresh, etc. can be placed in 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 its effect is the same as the openFrame method.

The frame-group component is used to display a frame group, each frame in it is an independent page.

Component-based development

Define a component:

Use stml to define a component 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> 

Reference component:

Referenced in other pages or components.

// 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> 

Use JS to define a component/page, refer to the official documentation.

Component Lifecycle

The avm.js component specification complies with the Web Components specification, and its 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

For more details about the life cycle, refer to the official documentation

In general, the APICloud development framework is closer to the native programming experience. It separates the application's user interface, business logic, and data model through a simple mode, which is suitable for highly customized projects. In addition, the APICloud website provides many modules, examples, and tool source code downloads. Interested front-end friends may wish to click here to try it out.

This concludes this article about the low-threshold front-end framework for developing iOS, Android, and mini-program applications. For more relevant content on low-threshold front-end framework development, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!