codecamp

创建第一个应用

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

  1. 开发者使用AVM.JS一个技术栈即可同时开发Android & iOS APP和小程序;
    2. 全新的APP引擎DeepEngine3.0提供完全原生的渲染,保障APP性能和体验与原生APP一致;
    3. 提供api对象下的接口直接映射兼容小程序接口,延续已有开发习惯;

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

主要包括4种类型:

1. Native App:

  即原生应用,3.0在2.0跨平台技术的基础上,新增了AVM.JS开发框架以及全新的原生App渲染引擎DeepEngine3.0。

  开发者可使用标准HTML5(包括HTML/CSS/JS技术以及Vue/React等框架技术)或AVM.JS技术进行开发,一套代码同时生成Android & iOS原生APP,现有的1000+功能模块和20000+API可直接调用。

  如果使用标准HTML5进行开发,App渲染依然使用2.0的Webview引擎进行渲染;

  如果使用AVM.JS进行开发,App将使用无Webview的原生引擎DeepEngine3.0进行渲染,所有组件及视图与Android & iOS系统原生组件和视图百分百对齐。例如使用list-view进行布局,意味着您的列表将具备回收能力,即使面对数以万计的列表项或者瀑布流图片,也不会产生因内存溢出而导致闪退的问题,并且在滑动性能和流畅度上远胜于Webview视图的DOM滑动。

  一个App可完全使用HTML5进行开发,也可以完全使用AVM.JS技术进行开发,或两者在同一个App中混合使用。

  ** Native App适合功能强大、性能卓越的APP开发,如果您仅有App需求,应选择Native App模式。

2. MX App:

  即多端应用(Multiexperience App),使用AVM.JS技术一次开发,可同时生成小程序、Android & iOS App多终端应用,提供现有的api对象下的接口直接调用为小程序接口,例如api.ajax将对应调用小程序的wx.request。

  多端应用与Native App的区别在于,多端应用要求必须使用AVM.JS框架及语法进行开发,开发过程应使用文档中具有“通用”或者“小程序和App适用”标识的组件或者api进行开发,例如不应该在多端应用中使用list-view组件,因为list-view组件是专门为App定制的,它无法被编译为小程序(因为小程序平台并未提供类似的组件和能力)。

  ** MX App适合小程序优先的场景,如果您有小程序需求,而并不关心App侧的功能,应选择MX App模式。开发完的小程序代码,可百分百编译为同等功能的App,相当于开发一个小程序,“白送”一个 App。

3. App Clip:

  即iOS轻App,是苹果公司在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优先,不介意用户体验和性能的场景。

本文档会逐步引导您创建并运行一个简单的应用,内容涉及开发工具使用、代码管理、应用预览、调试等,帮助您快速开始应用开发。

准备工作

下载并安装最新版本开发工具APICloud Studio 3,当前支持Windows、macOS、Linux系统。下载地址

完整APICloud Studio 3使用教程参考APICloud Studio 3使用说明

创建应用

当前提供了两种创建应用的方式,可以在网站开发控制台或APICloud Studio 3中创建应用,这里以在APICloud Studio 3中创建应用为例。

1、打开APICloud Studio 3,点击窗口右上角的 “未登录” 按钮,使用APICloud账号登录,若无账号可以点击 “立即注册” 按钮进行注册。

2、顶部菜单选择 “项目” - “新建项目”,然后填写“应用名称”,“应用说明”,应用框架处内置了几种模板,这里我们选择“空白应用”,点击“完成”,然后选择项目保存的路径,完成创建。

修改代码

在APICloud应用开发中,除了支持标准的html页面,还支持基于avm框架的stml页面,这两种页面可以在项目中灵活地混合使用。基于avm框架能够一套代码同时生成App、小程序端,avm框架使用参考APICloud3.0多端开发

本节为演示基于avm框架进行多端开发做的一些修改,如果您选择使用html的方式开发应用,则可以跳过本节步骤。

由于小程序语法要求每个页面外层有一个同名文件夹,所以我们在项目pages目录下新建一个demo文件夹,然后将demo.stml移到demo文件夹下(若只支持App端则不需要)。然后在config.xml中将应用入口页设置为demo.stml,并配置avm字段为true。

简单地修改demo.stml文件,设置一下页面背景色,然后添加一个text组件,通过数据绑定设置其文本内容,并监听点击事件,在点击事件里面调用api方法显示提示框。完整代码如下:

<template name='tpl'>
    <view class="page">
        <text class="text" data-info={text} onclick={this.btnAction}>{text}</text>
    </view>
</template>
<script>
    export default {
        name: 'tpl',
        apiready(){//like created


        },
        data() {
            return{
                text: 'Hello world!'
            }
        },
        methods: {
            btnAction(e){
                api.alert({
                    msg: e.currentTarget.dataset.info
                });
            }
        }
    }
</script>
<style>
    .page {
        height: 100%;
        background-color: white;
    }
    .text {
        margin-top: 100px;
        text-align: center;
    }
    .text:active {
        opacity: 0.7;
    }
</style>

提交代码

修改完代码后,我们将代码同步到云端,以便于云编译查看效果。在项目根目录上面鼠标右键,选择“提交到云端”。

输入修改的说明信息,点击commit提交。

除了使用APICloud Studio管理代码,开发者也可以选择自己熟悉的svn工具,在开发控制台代码页面将项目检出到本地。

App预览

如果要在iOS设备预览,需要先在证书界面上传编译证书才能编译应用。如果暂时没有苹果证书,可以安装AppLoader进行预览,参考后面的“应用调试”章节。

在项目根目录上面鼠标右键,选择“云编译”,将在APICloud studio内打开云编译界面。或者直接在浏览器里面打开云编译界面进行编译。

选择应用类别、平台,然后点击下面的“云编译”按钮开始编译。等待编译完成后扫描二维码即可安装。

App调试

为了提高开发效率,我们提供了WiFi真机同步功能,设备安装AppLoader或者自定义loader应用后,可以将APICloud Studio中的项目代码通过WiFi同步到loader中进行预览。AppLoader和自定义loader有以下区别:

AppLoader:由APICloud官方提供,iOS、Android设备可直接扫码安装,对于没有iOS证书的开发者比较方便,里面内置了部分平台常用的模块,可以将多个项目代码同步到里面查看。下载地址

自定义loader:在APICloud Studio中项目根目录右键菜单选择“编译自定义Loader”进行编译,或者在编译自定义loader页面进行编译,iOS编译之前需上传编译证书,模块按照需要进行添加,只可同步一个项目到里面查看。和证书、包名相关的功能只能使用自定义loader测试。

如何通过WiFi同步代码到loader中参考WiFi真机同步(未处理)

小程序预览和调试

准备工作

1、下载并安装微信开发者工具,下载地址。windows平台下,需要在APICloud Studio 3中配置微信开发者工具安装目录,具体操作步骤为:打开APICloud Studio 3设置界面 -- 常用配置 -- 微信开发者工具的根目录,配置微信开发者工具安装路径。

2、打开微信开发者工具,并进行登录。

3、为微信开发者工具打开服务端口,否则在APICloud Studio中无法调起微信开发者工具。具体操作步骤为:打开微信开发者工具 -- 设置 -- 安全设置 -- 安全 -- 开启服务端口。

预览和调试

回到APICloud Studio 3中,在项目根目录上面鼠标右键,选择“在微信开发者工具预览”,然后输入微信小程序appid,若没有则使用默认的。回车确认后项目将会被进行编译,编译完成后在项目根目录下会生成out-mp文件夹,里面为编译好的小程序项目。

APICloud Studio会自动打开微信开发者工具并加载out-mp下的小程序项目,等待项目加载完成即可查看。

当在APICloud Studio中修改了某个页面想要在微信开发者工具实时查看效果时,可以在项目根目录上面鼠标右键,选择“增量编译微信小程序”(或者直接使用对应快捷键),将会只编译修改的文件,编译完成后微信开发者工具里面会实时进行更新。

API和模块

API

api对象是开发中必须了解和熟练掌握的一个基础对象,提供了构建应用程序所需要的一些基本的方法,如窗口操作、网络请求等。api为内置js对象,不需要引用即可使用,更多详细介绍参考api文档(未处理)

模块

模块是对api功能的一个扩展,平台模块Store里面提供了丰富的各种模块如百度地图、极光推送、微信登录等,使用模块之前需要先在开发控制台模块页面进行添加。或者通过config.xml中的feature字段添加模块,参考feature配置(未处理)

如果平台模块不能满足项目需求,开发者也可以扩展自定义模块,开发完成后将模块包上传到“自定义模块”里面,然后添加使用。参考模块开发指南_iOS(未处理)模块开发指南_Android_Eclipse(未处理)模块开发指南_Android_Studio(未处理)

注意:模块是原生功能的扩展,添加或更新模块后需要重新编译安装应用才生效。

代码中使用模块时需先通过api.require方法进行引用,如:

var fs = api.require('fs');
fs.exist({
    path: 'fs://file.txt'
}, function(ret, err) {


});

更多重要信息

config.xml配置文件

每一个应用的widget包必须有一个config.xml配置文件,它位于widget包的根目录下。该配置文件能配置应用入口页、应用偏好设置、权限配置、模块等等。更多config.xml配置可参考config.xml应用配置说明(未处理)

前端开发框架

我们为前端开发者提供了api.css和api.js框架,api.css处理不同平台浏览器的默认样式,api.js提供最基础的JavaScript方法,所有方法在$api对象下。详情参考APICloud前端框架(未处理)

APICloud APP开发定制服务
新手开发指南
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

端API

设备访问

ipAddress

wifiSSID

smartConfigCheyw

无标题文章

前端框架

云API

开发工具

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }