App开发本质上涉及到多方面的知识:html css js java php mysql.......;从底层技术开始学周期太长,并不适用,特别是对于非计算机出生的同学。本课程的目的希望能够在选择合适的开发工具的基础上,自顶向下进行学习,以尽早实现app案例开发为目标,先入门然后进行更深入的学习。
当前app开发的趋势:无代码开发与低代码开发
无代码开发的代表:ivx,氚云,简道云,牛刀......2021盘点:国内外10大低代码开发平台,哪个更值得一试? - 少数派
低代码开发:国内工具:APICloud uniapp 国外: flutter 等
选择APICloud的原因:灵活性与易用性的折中
APICloud收费的问题
apicloud开发工具的使用
任务一:账号注册,下载并安装apicloud的开发工具
APICloud 手机APP开发、APP制作技术专家 - 国内领先低代码开发平台https://www.apicloud/
开发工具下载 APICloud Studio3代码编辑器-应用软件开发工具
开发工具的使用
相关视频:第一讲 登录,APICloudStudio3使用教程 - Apicloud视频教程
多端应用的开发
APICloud - 低代码开发平台
APICloud 自 3.0 起,已从跨平台技术全面升级为多端技术:
-
使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;
-
全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致;
-
现有 api 直接映射兼容小程序接口,延续已有开发习惯;
同时 APICloud 3.0 仍然保留了 2.0 的所有技术栈和开发体验,为方便开发者对跨平台技术和多端技术的理解和区分,我们对创建的应用类型进行了明确的区分。
主要包括四种类型:
-
Native App Native App 适合功能强大、性能卓越的 App 开发,如果您仅有 App 需求,应选择 Native App 模式
-
MX App MX App 适合小程序优先的场景,如果您的业务重点在小程序端,不需要丰富的功能和苛刻的体验,应选择 MX App 模式。开发完的小程序代码,可百分百编译为同等功能的 App,相当于开发一个小程序,“白送”一个 App
-
App Clip 苹果小程序
-
Web App
任务二:创建一个新的多端avm项目,并导入到云端
目录结构说明
APICloud - 低代码开发平台
page 文件夹下包含了所有的页面文件stml 其他文件夹保存的是上述stml文件需要调用的资源 config文件对应的app的一些基本设置
多端项目是由 stml 文件构成
stml(single template markup language)文件是一个专用的文件类型,其结构和 Vue 的单文件组件 (SFC)相似,用类 Html 语法描述一个组件/页面。更多关于 stml 可参考 [stml 页面介绍] (https://docs.apicloud/apicloud3/#/basic/stmlpage?index=1&subIndex=1)。
在创建 stml 文件之前,我们需要在项目根目录下新建一个 pages 目录,只有放置在 pages 目录下的 stml 文件才会被正确编译。
打开 APICloud Studio 3 并导入项目,在项目结构的 pages 目录上点鼠标右键,在弹出的菜单中选择“新建 stml 文件”,然后输入文件名回车确认,这样就创建了一个默认的空白的 stml 页面,我们可以简单的添加一个 text 文本。
<template name='tpl'> <view class="page"> <text>APICloud</text> </view> </template> <script> export default{ name: 'tpl', apiready(){//like created }, data() { return{ } }, methods: { } } </script> <style> .page { height: 100%; } </style>
预览 stml 文件
预览stml文件效果有以下三种方式:
- 实时预览
在 stml 页面编辑区内点鼠标右键,选择“实时预览”,将会启动 Studio 3 的内置浏览器进行预览。
- WiFi 真机实时预览
说明视频 :第十二讲 Wi-Fi真机实时预览,APICloudStudio3使用教程 - Apicloud视频教程
使用 WiFi 真机实时预览时,需要手机端安装 AppLoader 或者自定义 loader,并在 loader 内连接 Studio。 在 stml 页面编辑区内点鼠标右键,选择“WiFi 真机实时预览”,页面将会自动在已连接 Studio 的手机端 loader 里面显示。
任务三:下载apploader,并实现上面简单项目wifi真机实时预览
APICloud SDK下载 – 手机APP开发、APP制作、APP定制平台
任务四:创建生鲜电商项目,并实现wifi真机预览
从生鲜的例子也可以看到所有页面都有stml完成,并都在page这个文件夹内
apicloud的前端组件(小程序)
stml文件的结构说起
stml(single template markup language)文件是一个专用的文件类型,用类 Html 语法描述一个组件/页面。
一个 stml 文件一般包含三种类型的顶级语言块<template>
,<script>
和<style>
,同时支持引入外部 js 或者 css 文件,以及其他 stml 组件。
stml 文件最终被分别编译为 APP、小程序代码。
其中部分负责页面元素的定义与布局,而<style>部分负责展示部分的修饰,这两个部分共同构建了app的前端。
view 与 text
注意这些组件主要用于小程序。但是由于这些组件本质三个源于html的组件,因此很多都有对应关系,并且对应修饰方法大多类似
比如:view 是通用容器组件,内部可以放置任意组件。默认布局方式为flex布局。view和html中的div是对应的,因此有很多配置可以借鉴 CSS 盒子模型 | 菜鸟教程
-
注意不要直接在 view 内添加文本,添加文本使用 text 组件。
-
理解下面代码的调用规则
标识与页面容器的对应嵌套
css
CSS 教程 | 菜鸟教程
-
class选择器 CSS Id 和 Class选择器 | 菜鸟教程
-
CSS 盒子模型(Box Model) CSS 盒子模型 | 菜鸟教程
<template> <scroll-view class="main" scroll-y> <text class="title">水平布局</text> <view class="horizontal"> <view class="item red"></view> <view class="item green"></view> <view class="item blue"></view> </view> <text class="title">垂直布局</text> <view class="vertical"> <view class="item red"></view> <view class="item green"></view> <view class="item blue"></view> </view> </scroll-view> </template> <style> .main { width: 100%; height: 100%; } .title { padding: 10px 0; font-size: 20px; } .horizontal{ flex-direction: row; width: 300px; height: 200px; } .vertical { flex-direction: column; width: 200px; height: 300px; } .item { flex: 1; } .red { background-color: #f00; } .green { background-color: #0f0; } .blue { background-color: #00f; } </style> <script> export default { name: 'test', data(){ return { } }, methods:{ } } </script>
更多推荐
零基础移动端APP设计与开发教程
发布评论