从零到一的混合APP(安卓)构建

742 阅读3分钟

一.目前app大致分三种

1.webapp 需要依赖浏览器环境 在移动端网页展示的app(邮件,购物)

2.原生app 使用安卓 ios各系统的原生语言开发的app

3.混合app 简单来讲就是网页app嵌套了一个原生的壳 可以使用第三方封装的方法使用手机原生的功能如(蓝牙,相机,扫码)等等...

我使用的就是混合app 这样做的优势是可以节约开发时间和开发成本 使用一套代码就可以生成款多端的应用(安卓,ios,h5)

二.怎么构建混合APP

混合app的编译工作是交给第三方平台的网上有很多这样的平台,例如uniapp,apicloud等等

我使用的第三方平台是apicloud,首先登入apicloud平台注册账号 然后按照下面的步骤一步步进行即可完成app的构建

apicloud平台

第一步 创建应用 进入控制台选择创建应用 选择Native app 填写好应用名称和应用说明

第二步 创建好后就可以在左侧看到我们创建的app了 然后下载安装第三方的编辑器

apicloud studio

不支持在 Docs 外粘贴 block

第三步 通过编辑器检出我们在云端创建的app 编辑器右上方的

代码管理 -> 代码检出 -> apicloud云端应用 选择检出的应用 在本地建个空文件夹 检出到这个空文件夹即可

检出后的文件结构如下图所示

第四步 app已经检出了 如何在本地调试检出的app

1.进入app的控制台 点击模块选择自定义loader 编译自定义loader 先编译安卓的 ios的后面再说

2.编译好后会生成一个二维码手机扫码下载loader

3.进入下好的loader 设置wifi和端口号 点击wifi实时预览就可以看到效果了

在编辑器点击帮助获取wifi和端口号

右键app的html选择wifi实时预览

如果是下面这样的说明成功了

到此为止原生的壳子已经搭建好了 下面就是如何往这个盒子里塞入我们移动端页面

三.嵌套移动端网页

可以使用vue,react,原生等等技术栈来开发移动端网页,我使用的是vue+vant来编写移动端网页 vant和vue会自动完成移动端适配

怎么使用vue+vant搭建项目可以参考下面的链接 这里不多做叙述

vant+vue

完成搭建开发好业务后 使用vue打包 把打包后的dist里面的文件和项目中的文件替换(有冲突的话选择替换) 上传到云端 在云端进行正式的编译生成 我们需要的app 下面是操作图示

同步完成后可以在云端看到提交记录

然后选择云编译 填写应用名称选择类型 编译我们的app

编译完成后有个二维码 扫码下载即可

四.如何使用第三方提供的原生接口

apicloud会在编译时注入api这个特殊的变量 我们在代码中直接就行

api更多的属性和方法参考链接

api属性和方法