day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架 - 前端设计

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1.移动端开发相关概念

1.APP类型

1.Native APP

Native APP又称原生APP，就是我们平时说的手机应用软件。

原生APP 是针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发出来的，通常是由“服务器数据+APP应用客户端”两部份构成。

实现技术:

iOS: Object-C/swift
Android: java

优点和缺点:

# 优点：
1.体验好，用户无法上网也可访问APP应用中以前下载的数据
2.性能稳定，可调用手机的硬件设备（语音、摄像头、短信、GPS、重力感应等）和本地资源（通讯录，相册等）
3.操作速度快，能够实现出色的动效，转场动画# 缺点：
1.开发周期长，开发人员工资起点高。
2.用户要使用原生APP，必须通过安装到手机里面才行，而且APP软件体积大，占用较多手机内存容量
3.更新缓慢，根据不同平台，提交–审核–上线流程较复杂。
4.要获取最新功能，需要升级应用，所以会容易出现有些用户不升级，导致多个不同功能版本出现，维护成本大
5.跨平台差，每种平台都需要独立的开发语言。Java(安卓),Objective-C(iOS)等等

2.Web APP

Web APP本质上是为移动浏览器设计的网站，可以在各种智能手机浏览器上运行。

实现技术：

HTML5+Javascript+CSS3
vue组件化+项目打包
....

优点和缺点

# 优点：
1.一套代码到处运行，可以同时在 PC、Android、iPhone 浏览器上访问
2.开发者不需要发布到应用市场审核，用户不需要下载、安装和更新
3.开发周期短，维护成本低
4.用户不需用户手动更新，可以自动更新，直接使用最新版本# 缺点：
1.转场表现略差，要求联网
2.用户体验没那么炫。图片和动画支持性不高
3.没法在App Store中下载、无法通过应用下载获得盈利机会
4.对手机功能应用缺乏，有限制（摄像头、GPS、蓝牙等）

3.Hybrid APP

Hybrid App就是混合APP，就是Native结合Web的混合开发，就是内部本质是Web网页，使用打包软件给它套一层原生APP的外壳。

实现技术：

React Native
phoneGap(cordova+android)
APICloud
WeX5
appMobi
appcan
....

优点和缺点

# 优点：
1.集众家之长，既可以调用丰富的手机设备API，也能拥有Web APP的跨平台能力
2.可以在应用商店发布，实现收费下载
3.内部是网页结构，可以自主更新，做到开发一次，所有平台生效
4.降低开发成本和技术成本，降低维护和开发周期
# 缺点：
1.本质上就是一个Web APP使用了原生APP的壳，所以体验比不上原生APP
2.开发难度比Web APP高，有一定的学习成本，开发周期比Web APP长
3.APP发布有可能无法通过审核，需要多次调整，才能发布
4.依赖开发框架本身提供的手机设备API，少部分设备功能还是只能借住原生语言进行调用才可以
5.对团队技术栈要求相对高，既要懂web开发的，也要懂原生APP开发的

2.移动端屏幕介绍

3.移动端自适配方案

目前常用的布局适配方案就3种，分别是vw、像素百分比+flex弹性布局和rem+viewport，后者最流行最容易。

当然，rem+viewport这种方案的实现方式也有很多，其中最著名的就是淘宝的flexible方案。

4.元信息(meta)

html中的meta标签，也叫元信息标签。作用就是用来告诉浏览器，当前网页的附加信息。

meta标签主要有2个属性比较重要。

属性名	属性值	作用描述
http-equiv	content-type , expires , refresh , set-cookie	设置 HTTP 头部
name	viewport，author , description , keywords	设置网页附加信息

1.视口(viewport)

视口是一个相对比较复杂的概念，所以我们可以简单的理解为，viewport就是用户看手机页面时的可视区域，相当于桌面浏览器的窗口。在桌面浏览器中，viewport 就是浏览器窗口的宽度高度。但在移动端设备上就有点太窄了。

关于视口的详细扩展知识可以参看：https://www.w3cplus.com/css/viewports.html

视口通过meta标签进行设置

视口参数说明

属性名	属性值
device-width	设备的宽度
initial-scale	初始的缩放比例
minimum-scale	允许用户缩放到的最小比例
maximum-scale	允许用户缩放到的最大比例
user-scalable	用户是否可以手动缩放

2.像素(pixel)

在移动端上，所谓的像素分为两种。

CSS像素：CSS像素就是我们在编写CSS代码时的像素。

设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。

3.媒体查询(media query)

媒体查询是css3的一个新增语法属性，它根据页面的视口宽度来定义特殊的 CSS 规则，一般用于进行移动端适配。

@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}

2.APP开发准备

我们接下来开发的项目是磨方APP，主要通过APICloud+Flask完成。

1.注册APPCLoud账号

APICloud官网：https://www.apicloud.com

开发文档：https://docs.apicloud.com

2.下载APP开发编辑器

注册成功，登录进入开发控制台，找到页面右下角点击开发工具跳转到工具下载页面。

网站地址：https://www.apicloud.com/devtools

下载完成以后，无需安装，直接解压，打开编辑器并登录APICloud。

接下来开发APP的时候,肯定是要查看代码运行后的效果,所以我们需要安装安卓模拟器,当然也可以使用真机调试.

推荐: 市面上大部分的模拟器都差不多,使用人数最多,一般都是: 海马玩模拟器, 夜神模拟器, 雷电模拟器.

我们这里安装和使用雷电模拟器.

官网: https://www.ldmnq.com/

3.下载APP开发调试工具

在前面登录的APICloud开发控制台中，找到页面右下角点击SDK下载跳转到工具下载页面

网址：https://docs.apicloud.com/Download/download

点击AppLoader下载APP加载器工具，如扫码无法下载，则手动下载压缩包，通过USB连接电脑拖动到手机中进行安装。

可以在模拟器中安装AppLoader, 完成效果

3.移动端项目搭建

1.创建APP项目

在打开的APICloud编辑器中点选新建项目即可。

填写项目相关选项

创建项目成功

接下来，可以打开index.html页面，这是APP的欢迎页面。

2.模拟器调试

在模拟器中打开AppLoader, 显示效果如下:

注意看到屏幕右方有个白色的小圆按钮!点击这个按钮,可以设置和APICloud stodio编辑器进行代码同步, 进行调试APP运行的效果:

上面弹出的2个输入框,需要我们在代码编辑器APICloud Stodio中的左边窗口处右键点击项目名

此时代码编辑器APICloud Stodio窗口的右上角, 出现以下弹窗, 复制里面提供的IP和端口,其中IP一般才用第一个,但是部分网络下,可能第一个不行,则后面逐个填写.

点击连接以后,如果效果如下,则表示配置连接成功.可以进行模拟器APP测试了.

此时可以在APICloud Stodio代码编辑器中通过鼠标右键点击项目目录,选择,WIFI同步,打开, 接着选择全量同步.

此时,可以看到模拟器中的效果如下:

当然, 在开发中,使用模拟器是为了提高开发效率,但是模拟器毕竟不是真实设备,所以有时候,我们也需要使用和连接到真实设备中进行调试开发.

3.真机调试

通过APICloud开发工具，在真实设备下生成一个临时的APP，查看效果。这个步骤，我们叫真机调试。首先,必须确保当前手机中已经安装了APPLoader工具.

鼠标右键点击左上角的项目目录，点选菜单中的USB同步(xxx)选项。[最好准备一条好的!注意是好的USB线.]

测试效果：

4.APICloud前端框架

APICloud内置了一个APICloud 前端框架给我们操作APP页面和展示数据，也提供了ajax跨域请求数据功能。

它本质上就是一个仿照jQuery编写的一个小工具库，所以并不好用。

框架地址：https://docs.apicloud.com/Front-end-Framework/framework-dev-guide

1.目录结构

2.配置文件

<widget id="A6043953355883" version="0.0.1">
<name>APP名称，展示给客户端手机里面的</name>

<description> APP的描述信息，将来app上架以后，会需要填写 </description> <author email="作者邮箱" href="官网地址"> APP作者名字 </author>

<content src="index.html" /> 
<access origin="*" /> <preference name="pageBounce" value="false"/>

<preference name="appBackground" value="rgba(0,0,0,0.0)"/> 
<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>

<preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>

<preference name="hScrollBarEnabled" value="false"/>

<preference name="vScrollBarEnabled" value="false"/>

<preference name="autoLaunch" value="true"/>

<preference name="fullScreen" value="false"/>

<preference name="autoUpdate" value="true" />

<preference name="smartUpdate" value="false" />

<preference name="debug" value="true"/>

<preference name="statusBarAppearance" value="true"/> <permission name="readPhoneState" /> <permission name="camera" /> <permission name="record" /> <permission name="location" /> <permission name="fileSystem" /> <permission name="internet" /> <permission name="bootCompleted" /> <permission name="hardware" /></widget>

3.调用框架

APICloud 前端框架中提供的40多个操作方法，主要分6类用途：

# 1.数据操作：
trim() trimAll() isArray() jsonToStr() strToJson() get()
post()# 2.事件操作：
addEvt() rmEvt()# 3.元素查找：
one() dom() domAll() byId() first() last() eq() not() prev() next() contains() closest()# 4.DOM操作：
remove() attr() removeAttr() hasCls() addCls() removeCls() toggleCls() val() prepend() append() before() after()
html() text() offset() css() cssVal()# 5.本地存储：
setStorage() getStorage() rmStorage() clearStorage()# 6.系统兼容：
fixIos7Bar() fixStatusBar()

所有的APICloud前端框架的代码都必须在其入口函数中执行，并且通过$api来进行调用。

4.入口函数

// 要调用上面的40个方法,必须在apiready里面编写,在外面是没有$api对象的.
apiready = function(){
// js代码}

5.api与$api对象

注意：在APICloud中存在2个全局对象，分别是$api和api对象。这两个对象是不同的。
其中api对象主要是由APP系统提供给我们开发者操作和读取设备信息的。
而$api是APICloud模仿了jquery的$对象提供给开发者用于操作app页面的对象。
api对象的操作代码必须写在apiready入口函数中，否则报错！
而$api的部分操作代码，则不会报错，但是强烈建议不管是$api还是api都写进入口函数中。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>磨坊 APP</title></head>
<body>
<div id="wrap">
<div id="header">
<h1>老男孩 python~~~</h1>
</div>
<div id="main" class="flex-con"> </div>
<div id="footer">
<h5>Copyright ©<span id="year"></span> </h5>
</div>
<div id="info"> </div>
</div>
</body>
<script type="text/javascript" src="./js/api.js"></script>
<script type="text/javascript"> apiready = function(){
var header = document.querySelector('#header');
$api.fixStatusBar(header); var el = $api.byId("header");
var h1 = $api.first(el);
var content = $api.html(h1,"2020-08-27"); var ver = api.version;
var sType = api.systemType;
var sVer = api.systemVersion;
var id = api.deviceId;
var model = api.deviceModel;
var name = api.deviceName;
var cType = api.connectionType;
var winName = api.winName;
var winWidth = api.winWidth;
var winHeight = api.winHeight;
var frameName = api.frameName || '';
var frameWidth = api.frameWidth || '';
var frameHeight = api.frameHeight || ''; var str = '<ul>';
str += '<li>引擎版本信息: ' + ver + '</li>';
str += '<li>系统类型: ' + sType + '</li>';
str += '<li>系统版本: ' + sVer + '</li>';
str += '<li>设备标识: ' + id + '</li>';
str += '<li>设备型号: ' + model + '</li>';
str += '<li>设备名称: ' + name + '</li>';
str += '<li>网络状态: ' + cType + '</li>';
str += '<li>主窗口名字: ' + winName + '</li>';
str += '<li>主窗口宽度: ' + winWidth + '</li>';
str += '<li>主窗口高度: ' + winHeight + '</li>';
str += '<li>子窗口名字: ' + frameName + '</li>';
str += '<li>子窗口宽度: ' + frameWidth + '</li>';
str += '<li>子窗口高度: ' + frameHeight + '</li>';
str += '</ul>'; $api.html($api.byId("info"), str); };
</script>
</html>

6.获取服务端API接口

获取数据可以使用$api.post()，当然，也可以使用api对象提供的api.ajax。

1.api.ajax

基本语法：

api.ajax({
url: 'API接口地址', // 必须加上协议
method: '请求方法', // post、get、put、delete
dataType: "json", // 服务端数据响应格式
cache: true, // 缓存数据，若缓存，下次没网络时请求则会使用缓存，
// 仅在get请求有效
timeout: 30, // 超时时间，单位：秒
headers:{}, // 请求头，里面的key使用首字母大写的形式，
// 如 Content-Type
report:false, // 是否实时返回上传文件的进度，只有上传时使用
data: { // 提交数据
values: { // 以表单格式提交数据
name: 'haha'
},
body: "", // 以字符串格式提交数据
files: { // ajax上传文件
file: 'fs://a.gif' // 文件字段名
}
}
},function(ret, err){ // 回调函数，参数1是响应内容，参数2是错误信息
if (ret) {
alert( JSON.stringify( ret ) );
} else {
alert( JSON.stringify( err ) );
}
});

接下来的开发中,我们需要实现客户端,所以如果基于上面的$api开发的话,非常的影响效率,所以我们可以采用Vue.js来完成app的客户端开发.当然最终代码还是运行在APICloud里面.

2.vue+axios

vue.js：https://vuejs.org/js/vue.js

axios.js：https://www.npmjs.com/package/axios

把下载回来的vue.js和axios.js保存到项目的scripts目录下，然后在页面中引入。

day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架的更多相关文章

移动端App开发 - 02 - iPhone/iPad/Android UI尺寸规范
移动端app开发 - iPhone/iPad/Android UI尺寸规范本笔记抛去无用的前期分析什么的,全是干货,简洁干练本笔记不单独针对 ios 或者 Android,两种都介绍,当然我们实际 ...
移动端App开发 - 01 - 开篇
移动端App开发 - 01 - 开篇从此笔记之后开启移动端 app 开发学习该系列笔记去掉所有无关重要的东西,简介干练我的移动端App开发笔记 1.移动端App开发 - 02 - iPhone/ ...
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...
跨平台移动端APP开发---简单高效的MUI框架
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...
关于移动端APP开发-字体样式变大问题
前两天在写App项目的时候发现一个问题,就是明明css写的样式是14px,刚开始在页面显示时并未出现问题,可是内容一多,字体突然变大了. what?,不明所以,在各大网站上找了好久才知道是浏览器的字体 ...
App开发流程之创建项目和工程基本配置
我的开发环境为:Mac OS X EI Capitan(10.11.6),Xcode 7.3.1 首先说明一下这个项目的初衷,我并非要创建一个完整的上架应用,旨在创建一个可运行的,通用配置.架构,提供 ...
Angular01 利用grunt搭建自动web前端开发环境、利用angular-cli搭建web前端项目
搭建angular开发环境一.下载并安装node 官网地址:点击前往二.利用npm安装cnpm 安装好node后就可以使用npm命令啦查看版本:npm -v 安装cnpm:npm install ...
全栈开发系列学习2——django项目搭建
项目代码:http://yunpan.cn/cHajgT4HvgHqx (提取码:8350) 配置项目: 1. 首先确保你的机器安装了python和pip,这两种安装比较简单,这里就不说了. 2. 在 ...
app开发技术调研
l 面向消费者与公众的应用系统,主要分为3种主流的渠道: 1. web应用 2. 基于腾讯微信开放api构建的微信app 3. 移动端app ll 在移动端app方面,通过调研,现主流的 ...

随机推荐

WebApi系列~目录
回到占占推荐博客索引写了这个系列的文章不少了,也应该为大家写个目录了,最近很刮了很多SOA的风,很多企业都将自己的系统进行分割,通常是按模块进行拆分,为这个模块提供统一的接口提供业务服务,这不紧可以 ...
struts2中方法拦截器(Interceptor)的中的excludeMethods与includeMethods的理解
http://www.cnblogs.com/langtianya/archive/2013/04/10/3012205.html
用c写99乘法表
int main(int argc,char **argv){ int a; for(a=1;a<=9;a++){ int b; for(b=1;b<=a;b++){ printf(&qu ...
ecstore生成二维码
利用phpqrcode库生成二维码: /* *二维码添加 */ ////////////////////////////////////// /*引入文件*/ @include(APP_DIR.'/i ...
php 使用操作符
算术操作符.字符串操作符.赋值操作符 1.比较操作符比较运算符例子名称结果 $a == $b 等于 TRUE,如果类型转换后 $a 等于 $b. $a === $b 全等 TRUE,如果 $a ...
基础SELECT示例掌握
SELECT查询语句 ---进行单条记录.多条记录.单表.多表.子查询-- SELECT [ALL | DISTINCT | DISTINCTROW ] [HIGH_PRIORITY] [MAX_ST ...
dubbo扩展http协议后FullGC
问题 dubbo内部定制的版本中,在处理大于10K的包的时候,会出现内存溢出的现象原因是我们在定制dubbo http协议的时候,使用了jboss包里面的HttpRequestDecoder的htt ...
ASP&period;NET MVC默认配置如有跳转到指定的Area区域中的对应程序中
今天在搭建一个基于MVC的项目,因为项目涉及到了手机和pc端,为了方便和减少二者之间的耦合我在区域(Areas)中建立了两个程序空间,那么问题来了我想让程序默认跳转到我所指定的areas中的对应项目 ...
python语法&lowbar;字符类型
str(string): 字符串 str(被转换的数据) int(interger):整数 int(被转换的数据)
[清华集训2017]榕树之心[树dp]
题意题目链接分析首先解决 $subtask3$ ,我们的策略就是进入子树,然后用其它子树来抵消,注意在子树内还可以抵消. 可以转化为此模型:有一个数列 $a$ ,每次我们可以选定两个值 ...

目录