小白 0-1 学习 app 开发,从配置到 helloword
第一步,注册

选择开发工具
有一些教程上会说先创建应用,再选择工具,是使用的控制台创建的
https://www.apicloud.com/studio3
APICloud Studio 3
工具的教程
https://docs.apicloud.com/Dev-Tools/studio3-visualization-dev-tool-quick-start
安装完工具之后需要下载和配置 svn,自动下载和配置,重启就可以
工具打开之后的截图

项目可以是工程新创建的,也可以在控制台创建之后,选择控制台的项目。
第三步,创建应用

创建应用选择
官网链接
https://docs.apicloud.com/APICloud/junior-develop-guide
1. Native App:开发者可使用标准 HTML5,一套代码同时生成 Android & iOS 原生 APP
Native App 适合功能强大、性能卓越的 APP 开发,如果您仅有 App 需求,应选择 Native App 模式。
2. MX App:
使用 AVM.JS 技术一次开发,可同时生成小程序、Android & iOS App 多终端应用
必须使用 AVM.JS 框架及语法进行开发
MX App 适合小程序优先的场景,如果您有小程序需求,而并不关心 App 侧的功能,应选择 MX App 模式。开发完的小程序代码,可百分百编译为同等功能的 App,相当于开发一个小程序,“白送” 一个 App。
3. App Clip:
苹果小程序,是苹果公司在 iOS14 最新推出的无需下载、即搜即用的全功能 App,属于主 App 的一部分,可以理解为 “苹果小程序”。
轻 App 的开发流程同 Native App 基本一致,开发者可使用标准 HTML5 或 AVM.JS 技术进行开发,通过 APICloud 云编译可一键编译为轻 App 安装包,可用于对已有的主应用进行关联。如果您的主应用也是使用 APICloud 开发,云编译将提供主应用和轻 App 关联、证书配置等自动化功能。
4、Web App:
提供将已有 HTML5 网站一键打包成 Android & iOS 原生 APP 的能力,远程 web 页面也能调用现有的 1000 + 功能模块和 20000+API。
** Web App 适合 Web 优先,不介意用户体验和性能的场景。
我之前做客户端开发的,这里选择的 Native App

创建完成之后可通过如下步骤得到页面的预览
以.stml 为结尾的为页面

也可以通过中间组件库添加组件到页面,

并且可以通过右侧事件和样式区域修改样式和添加事件

如何添加页面
选择 pages 目录右击

工具里面预置了好多页面功能,也可以直接使用,减少了部分开发量

第四,生成 app
因为没有自定义的 loader,我选择的是云编译


注意选择 ios 编译的时候要提前申请和上传好 ios 证书,否则是无法编译的。
最后运行到手机上的样子如下图

值得一提的是为了提高开发效率,APICloud 提供了 WiFi 真机同步功能,设备安装 AppLoader 或者自定义 loader 应用后,可以将 APICloud Studio 中的项目代码通过 WiFi 同步到 loader 中进行预览。
AppLoader 和自定义 loader 有以下区别:
AppLoader:由 APICloud 官方提供,iOS、Android 设备可直接扫码安装,对于没有 iOS 证书的开发者比较方便,里面内置了部分平台常用的模块,可以将多个项目代码同步到里面查看。下载地址。
自定义 loader:在 APICloud Studio 中项目根目录右键菜单选择 “编译自定义 Loader” 进行编译,或者在编译自定义 loader 页面进行编译,iOS 编译之前需上传编译证书,模块按照需要进行添加,只可同步一个项目到里面查看。和证书、包名相关的功能只能使用自定义 loader 测试。
至此,APICloud 就配置和运行成功了,后期的话会在琢磨下功能点的开发,持续分享给大家。
评论