零基础移动端APP设计与开发教程

App开发本质上涉及到多方面的知识：html css js java php mysql.......；从底层技术开始学周期太长，并不适用，特别是对于非计算机出生的同学。本课程的目的希望能够在选择合适的开发工具的基础上，自顶向下进行学习，以尽早实现app案例开发为目标，先入门然后进行更深入的学习。

当前app开发的趋势：无代码开发与低代码开发

无代码开发的代表：ivx，氚云，简道云，牛刀......2021盘点：国内外10大低代码开发平台，哪个更值得一试？ - 少数派

低代码开发：国内工具：APICloud 国外: flutter 等

选择APICloud的原因：灵活性与易用性的折中

apicloud开发工具的使用
任务一：账号注册，下载并安装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.com/api...)。

在创建 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>