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

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.com/

开发工具下载 APICloud Studio3代码编辑器-应用软件开发工具

开发工具的使用

相关视频：第一讲 登录,APICloudStudio3使用教程 - Apicloud视频教程

多端应用的开发

APICloud - 低代码开发平台

APICloud 自 3.0 起，已从跨平台技术全面升级为多端技术：

1. 使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一；

2. 全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致；

3. 现有 api 直接映射兼容小程序接口，延续已有开发习惯；

同时 APICloud 3.0 仍然保留了 2.0 的所有技术栈和开发体验，为方便开发者对跨平台技术和多端技术的理解和区分，我们对创建的应用类型进行了明确的区分。

主要包括四种类型：

1. Native App Native App 适合功能强大、性能卓越的 App 开发，如果您仅有 App 需求，应选择 Native App 模式

2. MX App MX App 适合小程序优先的场景，如果您的业务重点在小程序端，不需要丰富的功能和苛刻的体验，应选择 MX App 模式。开发完的小程序代码，可百分百编译为同等功能的 App，相当于开发一个小程序，“白送”一个 App

3. App Clip 苹果小程序

4. Web App

任务二：创建一个新的多端avm项目，并导入到云端

目录结构说明

APICloud - 低代码开发平台

page 文件夹下包含了所有的页面文件stml 其他文件夹保存的是上述stml文件需要调用的资源 config文件对应的app的一些基本设置

多端项目是由 stml 文件构成

stml（single template markup language）文件是一个专用的文件类型，其结构和 Vue 的单文件组件 (SFC）相似，用类 Html 语法描述一个组件/页面。更多关于 stml 可参考 [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文件效果有以下三种方式：

• 实时预览

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