Low threshold development iOS Android small program application front end framework details
- 2021-11-29 05:48:18
- OfStack
Nowadays, cross-platform development technology is not a new topic, and there are some open source frameworks to choose from in the market. However, there are not many platforms with mature technology and sound products and services, and there are also many new frameworks worthy of attention.
For example, the recently used AVM, a multi-terminal development framework iteratively launched by APICloud, is based on JavaScript and compatible with multiple syntax. If it is a user of Vue and React, it can be used directly, with no learning cost, virtual DOM, and multi-terminal rendering can be written at one time; The main reason is that APICloud has been on the line for 7 years and is relatively mature, so I have sorted out my own cognition and practice in combination with the contents of AVM official documents, hoping to help developers who need to use cross-platform development technology.
Why learn the AVM framework?
Combined with the introduction of AVM official website and my own practical experience, I summarized the characteristics of a series of AVM, which I think is enough for you to take the initiative to learn AVM framework.
1. 1 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 APICloud 2.0 technology stack, which means that thousands of Android 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 avm. js is used for development, App will render using Native Engine 3.0 without webView, and all components and views are the same as Android & The native components of the iOS system are 100% aligned with the view.
4. Vue-like syntax and React-compatible JSX. Users with Vue or React foundation can get started quickly.
5. Component development to improve code reuse rate.
Page introduction in AVM:
The pages in AVM are called stml pages, and 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, you can see that the data binding method is {variable}, and double braces are supported. Single braces wrap variables or expressions, which can be used to bind text content or element attributes.
Event binding
There are two ways to listen to events.
Monitor with on:
<text onclick="doThis">Click me!</text>Listen using the v-on directives and abbreviations:
<text v-on:click="doThis">Click me!</text>
<text @click="doThis">Click me!</text>Event handling method
Event processing method needs to be defined in methods, and the method contains 1 parameter by default, through which detail, currentTarget objects 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>Default components are illustrated by several examples, and more components can be seen in official documents.
view is a common container component, and any component can be placed inside. The default layout is flex layout.
™ Be careful not to add text directly within view, adding text using text components.
The text component is used to display text information.
<template>
<scroll-view class="main" scroll-y>
<text class="text"> Ordinary 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 pictures.
The button component defines 1 button.
The input component defines 1 input box.
swiper defines a sliding view that supports sliding up and down or left and right. Only swiper-item components can be placed.
scroll-view defines a scrolling view.
If you need to scroll in the vertical direction, you need to specify the height; If you scroll horizontally, you need to specify a width, otherwise it may not be displayed.
ist-view defines a vertical scrolling view of reusable content, optimizes memory footprint and rendering performance, and supports pull-down refresh and pull-up loading. scroll-Basic properties of view can be used.
cell, list-header, list-footer, refresh and other components can be placed in list-view, and cell components are used as each display content.
The frame component is used to display one frame, and the effect is the same as that of openFrame method 1.
The frame-group component is used to display 1 frame group, each frame being a separate page.
Component-based development
Define 1 component:
Use stml to define 1 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:
Reference on 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>
Define 1 component/page using JS, refer to official documentation.
Component life cycle
The avm. js component specification conforms to the Web Components specification, and the lifecycle follows the lifecycle of the standard Web Components component. At the same time, it is compatible with the life cycle of Vue components.
All Supported Lifecycle Events
|
生命周期函数名 |
触发时机
|
|
apiready
|
页面运行时环境准备完毕&渲染完毕。当页面未引入组件时，该事件等同于installed。
|
|
install
|
组件被挂载到真实DOM（或App原生界面）之前
|
|
installed
|
组件被挂载到真实DOM（或App原生界面）之后。在页面级别中，该事件等同于apiready。
|
|
render
|
组件开始渲染
|
|
uninstall
|
组件从真实DOM（或App原生界面）移除之前
|
|
beforeUpdate
|
组件更新之前
|
|
updated
|
组件更新完成
|
|
beforeRender
|
组件开始渲染之前
|
Refer to the official documents for more details of the life cycle
Generally speaking, APICloud, a development framework, is close to the native programming experience, separating the user interface, business logic and data model of the application through a concise mode, which is suitable for highly customized projects. In addition, APICloud website provides many modules, examples and tool source code downloads. Interested front-end partners may wish to click here to try it.