微信公众号开发

前端如何低门槛开发iOS、Android、小程序多端应用

本文主要是介绍前端如何低门槛开发iOS、Android、小程序多端应用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

现如今跨平台开发技术已不是什么新鲜话题了,在市面上也有一些开源的框架可供选择,然而技术成熟、产品服务健全的平台并不多,其中也不乏推陈出新的框架值得关注。

比如最近使用的AVM,由APICloud迭代推出的多端开发框架,基于JavaScript,兼容多语法,如果是Vue、React的用户,可直接上手,没什么学习成本,具备虚拟DOM,可一次编写多端渲染;主要是APICloud上线已有7年,相对已经成熟,所以我把自己的一些认知和实践结合AVM官方文档的内容做了一下整理,希望能对需要使用跨平台开发技术的开发者有所帮助。

为什么学习AVM框架?

结合AVM官网的介绍和我自己的一些实践经验,我总结了一系列AVM的特性,我想这些内容足以让你主动去学习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 文件代码如下:

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>

数据绑定

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

事件绑定

监听事件有两种方式。
使用 on 监听:
Click me!

使用 v-on 指令以及缩写方式监听:
Click me!
<text @click="doThis">Click me!

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

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>  

事件处理方法也可以使用模板的方式,如:
Click me!

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

• 注意不要直接在 view 内添加文本,添加文本使用 text 组件。
text 组件用于显示文本信息。

1.	<template>  
2.	    <scroll-view class="main" scroll-y>  
3.	        <text class="text">普通文本</text>  
4.	        <text class="text bold">粗体文本</text>  
5.	        <text class="text italic">斜体文本</text>  
6.	        <text class="text shadow">Text-shadow 效果</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>  

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:

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>  

引用组件:
在其他页面或组件引用。

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>  

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

所有支持的生命周期事件

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

『每个页面都应实现apiready,并在apiready后处理业务逻辑;installed属于组件级别生命周期,在页面加载组件过程中即被触发,其触发时机早于apiready』

总体而言,APICloud这款开发框架,比较趋近于原生的编程体验,通过简洁的模式来分离应用的用户界面、业务逻辑和数据模型,适合高度定制化的项目,另外APICloud网站上提供了很多模块、实例和工具源码的下载,感兴趣的前端小伙伴不妨去试试。

这篇关于前端如何低门槛开发iOS、Android、小程序多端应用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!