说一说：APP应用在线开发教程
app开发本质上涉及到多方面的知识：html css js java php mysql.......；从底层技术开始学周期太长，并不适用，特别是对于非计算机出生的同学。本课程的目的希望能够在选择合适的开发工具的基础上，自顶向下进行学习，以尽早实现app案例开发为目标，先入门然后进行更深入的学习。西安APP开发http://www.jiujieseo.cn/西安量子悦动（）一直致力于西安网站建设服务,提供网站建设、小程序开发、软件开发等一系列服务,欢迎来电咨询合作!
https://img2.baidu.com/it/u=3384542007,3666363405&fm=253&fmt=auto&app=138&f=JPG?w=667&h=500
当代app开发的趋势：无代码开发与低代码开发
无代码开发的代表：ivx，氚云，简道云，牛刀......
低代码开发：国内工具：apicloud uniapp 国外: flutter 等
选择apicloud的原因：灵活性与易用性的折中
apicloud收费的问题
https://www.apicloud.com/
开发工具下载 https://www.apicloud.com/studio3#downloadBtn
相关app开发视频教程：http://www.apicloud.com/video_play/18_1
https://docs.apicloud.com/apicloud3/#/overview/index?index=0&subIndex=0
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，相当于开发一个小程序，“白送”一个 AppApp Clip 苹果小程序Web App
https://docs.apicloud.com/apicloud3/#/basic/project?index=1&subIndex=0
page 文件夹下包含了所有的页面文件stml 其他文件夹保存的是上述stml文件需要调用的资源 config文件对应的app的一些基本设置
stml（single template markup language）文件是一个专用的文件类型，其结构和 Vue 的单文件组件 (SFC）相似，用类 Html 语法描述一个组件/页面。更多关于 stml 可参考(https://docs.apicloud.com/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 页面编辑区内点鼠标右键，选择“实时预览”，将会启动 Studio 3 的内置浏览器进行预览。
WiFi 真机实时预览
说明视频 ：http://www.apicloud.com/video_play/18_12
使用 WiFi 真机实时预览时，需要手机端安装 AppLoader 或者自定义 loader，并在 loader 内连接 Studio。 在 stml 页面编辑区内点鼠标右键，选择“WiFi 真机实时预览”，页面将会自动在已连接 Studio 的手机端 loader 里面显示。
https://docs.apicloud.com/Download/download
从生鲜的例子也可以看到所有页面都有stml完成，并都在page这个文件夹内
stml（single template markup language）文件是一个专用的文件类型，用类 Html 语法描述一个组件/页面。
一个 stml 文件一般包含三种类型的顶级语言块<template>，<script>和<style>，同时支持引入外部 js 或者 css 文件，以及其他 stml 组件。
stml 文件最终被分别编译为 APP、小程序代码。
其中部分负责页面元素的定义与布局，而<style>部分负责展示部分的修饰，这两个部分共同构建了app的前端。
注意这些组件主要用于小程序。但是由于这些组件本质三个源于html的组件，因此很多都有对应关系，并且对应修饰方法大多类似
比如：view 是通用容器组件，内部可以放置任意组件。默认布局方式为flex布局。view和html中的div是对应的，因此有很多配置可以借鉴 https://www.runoob.com/css/css-boxmodel.html
注意不要直接在 view 内添加文本，添加文本使用 text 组件。理解下面代码的调用规则
https://www.runoob.com/css/css-tutorial.html
class选择器 https://www.runoob.com/css/css-id-class.htmlCSS 盒子模型(Box Model) https://www.runoob.com/css/css-boxmodel.html
<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>
页:
[1]