懂得：APP应用在线开发教程

guozhiwei

　　app开发本质上涉及到多方面的知识：html css js java php mysql.......；从底层技术开始学周期太长，并不适用，特别是对于非计算机出生的同学。本课程的目的希望能够在选择合适的开发工具的基础上，自顶向下进行学习，以尽早实现app案例开发为目标，先入门然后进行更深入的学习。西安小程序定制http://www.jiujieseo.cn/西安量子悦动（）一直致力于西安网站建设服务,提供网站建设、小程序开发、软件开发等一系列服务,欢迎来电咨询合作!

　　当代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 可参考[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>