AVM(Application-View-Model)是APICloud推出的一个跨端的高性能 JavaScript框架,更趋近于原生的编程体验,它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型 AVM(Application-View-Model)是APICloud基于标准H5子集设计的DSL中间语言编程框架,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完全兼容 Web Components标准,同时兼容Vue和React语法编写代码,编译工具将Vue和React相关语法糖编译转换为avm.js代码。 Avm核心库只关注终端差异、虚拟DOM、组件化和数据绑定,与其他重量级框架不同的是,Avm不需要太多的外部依赖,仅需要组件化、数据驱动等更现代化框架的能力。其可具备如下能力: 1. APICloud DSL使用Vue方式定义组件或页面: Avm.js跨端框架的优势配图1.png APICloud DSL使用兼容React JSX方式定义组件或页面: Avm.js跨端框架的优势配图2
*本文来自沐瑶派投稿 前段时间跟朋友一起搞了一个预约的项目,前端用的APICloud的AVM框架做的,后端用的php开发的,用的tp5框架,没几天就搞出来了。 2、AVM框架的使用 为什么选择AVM? 易用:有 Vue、React 基础,可快速上手,配套专用的开发工具APICloud Studio3。 多端:一次开发,多端渲染,一个技术栈搞定移动端开发。 index=4&subIndex=0 原来有一个叫流浪男的做的AUI框架,还不错,后来就是用一些简单的大公司的框架,这个看自己了。好多UI都是自己设计,自己写一些UI。字体图标用的阿里字体图标。 CSS框架,要是没啥选择推荐可以用AUI,这个框架有CSS基础的一看就知道写的啥,而且特别好修改。实在不行了直接改源码。 四、项目后台 这块是自己写的php后台,用的tp5框架。 tp5下的fastadmin框架,可以根据fastadmin一键生成简单后台,数据库文件为: 后台接口代码 <?
今天用APICloud AVM框架打造数字滚动组件。组件中用到的核心功能点是,background-position属性设置背景图像的起始位置。 this.data.roundStyle.length; index++) {this.data.roundStyle[index]='background-position: 0px -'+ Math.floor( Math.random()*10
AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具, 完全兼容Web Components标准,同时兼容Vue和React语法糖编写代码,编译工具将Vue和React相关语法糖编译转换为avm.js代码。 script><style>.easy-notice-bar_container {flex-flow: row nowrap;justify-content: flex-start;padding: 10px
效果展示 APICloud的AVM官方框架中有一个 frame-group的组件,在此组件的基础上,将栏目导航中view标签换成了 scroll-view标签,并设置成允许横向滚动。 e.target.dataset.index; if(index>6){ navView.scrollTo({ x:(index-6)*this.data.itemWith+10 }) } else if(index==6){ navView.scrollTo({ x:10 }) } else{ index = e.detail.index; if(index>6){ navView.scrollTo({ x:(index-6)*this.data.itemWith+10 }) } else if(index==6){ navView.scrollTo({ x:10 }) } else{
Date(year, month + 1, 0).getDay()); return new Date(year, month + 1, 0).getDay(); }, // 对小于 10 的数字,前面补 0 pad(str) { return str < 10 ? 10px 0 10px; background-color:#3c40c6; border-top-left-radius: 10px; border-top-right-radius: 10px; max-height: 400px; } .calendar-toolbar { padding: 10px 10px; flex-flow: row nowrap; 10px; flex-flow: row wrap; justify-content: space-around; align-items: center; } .calendar-item
script> <style> .page { height: 100%; background-color: #ffffff; } .nav{ margin: 0 10px ; padding: 0 10px; } .nav-title{ font-size: 20px; } .box{ flex-flow: row nowrap; justify-content : flex-start; align-items: center; margin: 10px; border-bottom: 1px solid #ccc; padding-bottom : 10px; } .right{ padding-left: 20px; } .bt{ flex-flow: row nowrap; justify-content: flex-start font-size: 14px; color: #666666; padding-left: 20px; } .right-nav{ position: absolute; right: 10px
今天介绍APICloud AVM框架封装滑动单元格组件的实例。 width: 100%;left: 0;right: 0;top: 0;bottom: 0;z-index: 1000;transition: 0.6s;min-height: 50px;padding: 10px
AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具, 完全兼容Web Components标准,同时兼容Vue和React语法糖编写代码,编译工具将Vue和React相关语法糖编译转换为avm.js代码。 ;}</style>组件使用说明本组件是基于AVM.js开发的多端组件,通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。 通过控制平台右上方的模块Store进入,然后选择AVM组件。编辑编辑找到对应模块进入,也可通过搜索栏,通过组件名称关键字进行检索。编辑 进入模块详情,点击立即下载下载完整的组件安装包。 #f6f6f6;}.item{background-color: #ffffff;margin: 15px;padding: 15px;border-radius: 5px;}</style>如果在AVM
一、效果展示二、功能实现的思路本项目基于APICloud的AVM多端框架编写,因此需要想办法去构造特定数据、然后再改变数据,本项目核心业务就是课程数据的处理,难点就是课表的添加。 周三', '周四', '周五', '周六'][date.getDay()]; this.currentMonth = month; if (month < 10 ) { month = '0' + month; } if (day < 10) { day = '0' + day; } return { "week": :10' }, { 'jie': '3节', 'time': '10:25-11:10' }, { 'jie': '4节', 'time': '11:20-12 ', 'time': '16:50-17:35' }, { 'jie': '9节', 'time': '17:45-18:30' }, { 'jie': '10
APP开发采用的APICloud平台的AVM多端应用开发框架,使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致;现有 api 直接映射兼容小程序接口,延续已有开发习惯;后台使用的PHP的thinkphp框架 AVM框架里官方就集成了websocket。 clearCache(){api.clearCache(() => {this.data.cache=0.0;api.toast({msg:'清除完成'})});}AVM组件使用项目中使用了很多的AVM ;}.item-ico{width: 35px;}.btn-box{margin-top: 50px;margin-left: 10px;margin-right: 10px;}.btn{background-color
avm.js 是APICloud 推出的多端开发框架。 使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染 } .cell { width: 100%; height: 70px; } .img { height: 50px; width: 50px; margin-left: 10px 100%; } .cell{ width: 100%; height: 70px; } .img{ height: 50px; width: 50px; margin-left: 10px
今天介绍用APICloud AVM框架封装省市区级联选择弹框。 20px;justify-content: center;}.area-cascader_box-nav-item--selected{font-size: 16px;padding-bottom: 10px : 16px;padding-bottom: 13px;border-bottom: 0;}.area-cascader_pane{padding-left: 15px;padding-right: 10px 组件使用demo-area-cascader.stml<template><view class="page"><safe-area></safe-area><text style="padding:<em>10</em>px ;border-radius: 5px;background-color: #f0f0f0;padding: <em>10</em>px;}.more{width: 20px;}</style>
四、功能实现的思路 本项目基于APICloud AVM框架编写,因此思路要转变下比如标签的用法、CSS样式表的写法、项目的目录结构、dom的操作等都不一样了,完全是Vue、React的编程思维。
App开发采用APICloud AVM框架,后台采用PHP。 }.item-box{background-color: #fff;margin: 5px;}.item{border-bottom: 1px solid #efefef;margin: 0 10px {font-size: 13PX;color: #666;margin: 10px 0;}.item-sub{justify-content:space-between;flex-direction:row /user/login.stml',title: '',hideNavigationBar:true});}api.hideProgress();});}}8、表单提交、回显表单使用的事AVM官方的 from if (ret) {if(ret.eventType=='click'){photoBrowser.close();}} else {api.toast({msg:'图片预览失败'})}});}});}10
JSON.stringify(ret)) // console.log(JSON.stringify(err)) }); } }); } Flex布局 flex布局在AVM www.ruanyifeng.com/blog/2015/07/flex-grammar.html 通知公告 由于通知公告的内容是在后台通过富文本编辑器编辑的内容,其中会有样式布局的元素,不再是单纯的文字展示,这里使用了AVM background-color: #fff; margin: 5px 5px; } .item{ border-bottom: 1px solid #efefef; margin: 0 10px ; } .item-info{ font-size: 13PX; color: #666; margin: 10px 0; } .item-sub{ justify-content 300px; margin-bottom: 50px; } .header{ height: 300px; width: 100%; } .item-box{ margin: 10px
开发工具采用 APICloud Studio3,基于VSCode的(PS:比基于Atom的autio2好用太多); 数据库采用sqllite,没有使用UI框架,个人觉得AVM本身支持的flex布局配合自写 CSS样式,完全可以实现市面上所有的UI框架的元素,这个取决于个人功力。 APICloud强大之处在这里进行了淋漓尽致的体现,通过AVM及原生模块无法实现的功能,可以再用H5的方式来实现!牛逼!!!! JSON.stringify(err) }) } }); 10 ); } else { api.closeWidget({ silent : true }); } }); 13、应用动态权限 安卓10
现如今跨平台开发技术已不是什么新鲜话题了,在市面上也有一些开源的框架可供选择,然而技术成熟、产品服务健全的平台并不多,其中也不乏推陈出新的框架值得关注。 比如最近使用的AVM,由APICloud迭代推出的多端开发框架,基于JavaScript,兼容多语法,如果是Vue、React的用户,可直接上手,没什么学习成本,具备虚拟DOM,可一次编写多端渲染;主要是 为什么学习AVM框架? 结合AVM官网的介绍和我自己的一些实践经验,我总结了一系列AVM的特性,我想这些内容足以让你主动去学习AVM框架了。 api.alert({ 10. data(){ 10. return { 11.
框架分析(10)-SQLAlchemy 主要对目前市面上常见的框架进行分析和总结,希望有兴趣的小伙伴们可以看一下,会持续更新的。希望各位可以监督我,我们一起学习进步。
1.1 React Native RN 是Facebook于2015年4月开源的跨平台移动应用开发框架,到现在已经发展了6年多了,目前最新版本是0.66,2021年12月10日还有更新发布小版本,整体来看框架还是非常有生命力的 37%-43% 0m21.336s Ionic 138M 49%-65% 0m55.549s NativeScript 147M 19%~20% 0m27.862s AVM 122MB 6%-10% 其他使用 JavaScript 技术开发的框架,AVM,RN,Ionic 其实都还不错。 而且纵观所有框架,文档写的最细致还是 RN 和 Flutter,AVM这三家。 其他框架中 AVM和 Ionic 各有优势,但是从使用体验,上手难度,社区情况来看,国内的 AVM 肯定更适合国内开发者一些,毕竟有本土化,云端集成,而且debug体验也很惊艳。