什么是移动端应用

移动端应用是指运行于手机、平板电脑等移动端设备的应用软件。

多页面应用和单页面应用

多页面应用（MPA）是由多个html页面组成的应用，界面切换主要有不同页面的跳转完成，无切换动画效果。
单页面应用（SPA）是仅有一个页面构成的应用，界面切换由dom动态生成和销毁完成，可实现切换动画效果。

开发环境准备

安装和配置Git

安装Git客户端工具（上官网下载即可）
配置Git的环境变量：path=Git安装目录\cmd
运行Git Bash, 出现命令行界面

在Git Bash命令界面，设置全局配置，创建一个全球用户名、全球邮箱：

$ git config --global user.name "你的名字或昵称"
$ git config --global user.email "你的邮箱"

VsCode中配置简体中文语言环境和git（windows环境）

下载并安装vscode
配置简体中文语言环境

打开VS code,按组合键Ctrl+Shift+P,搜索language,选择Configure Display Language,设置locale为zh-CN
下载简体中文插件，并启用
配置git
(1) 找到Git的安装目录，进入cmd文件夹，拷贝git.exe路径；
(2) 打开VS code 进入设置，搜索“git.path”，复制到用户设置，示例如下：
```
{"git.path": "C:/Program Files/Git/cmd/git.exe"
}
```

建立MPA项目

在git服务器（如：码云）上创建资源仓库，假设仓库名为：MpaDemoGit。

进入Git Bush命令窗口将仓库克隆到本地

#切换到本地仓库存放位置（假设本地仓库上级目录：f:\front）
$ cd /f/front #将远程资源克隆到本地，则本地仓库目录：f:\front\MpaDemoGit
$ git clone “https://gitee.com/xxx/MpaDemoGit.git”

在vscode中，将本地仓库目录（如：MpaDemoGit）放入工作空间
在vscode中，在本地仓库目录（如：MpaDemoGit）下建立项目目录（如：MpaDemo）
接下来，在项目目录（如：MpaDemo）中就可以开发了。
.

开发示例

本应用本质上就是一个HTML5应用，由一系列HTML5静态页面组成。

移动端开发的页面模板

采用HTML5标准
viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

html和body端样式

html{/*设置长度单位rem标准。 注：rem与px都是长度宽度单位，px指一个像素是绝对单位，rem是相对单位，以html字体大小为1rem */font-size:100px;height:100%;
}
body{font-size:0.16rem; /*恢复浏览器默认字体大小设置*/height:100%;padidng:0;margin:0;background-color: #F5F5F5;/*浅灰色背景*/
}

首页：index.html

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>宜染在线</title><style type="text/css">html {font-size: 100px;/*设置长度单位rem标准。 注：rem与px都是长度宽度单位，px指一个像素是绝对单位，rem是相对单位，以html字体大小为1rem */height: 100%;}body {font-size: 0.16rem;/*恢复浏览器默认字体大小设置*/height: 100%;padding: 0;margin: 0;background-color: #F5F5F5;/*浅灰色背景*/}#app {box-sizing: border-box;height: 100%;padding: 0.1rem;}.mystyle{display: flex;flex-direction:column;justify-content:center;align-items: center;font-weight: bold;font-size:0.4rem;}.bounce-enter-active {animation: bounce-in 1s;}@keyframes bounce-in {0% {font-size:0rem;border-radius:0rem;width:0rem;height:0rem;}100% {font-size:0.4rem;border-radius:1.5rem;width:3rem;height:3rem;}}</style>
</head><body><div id="app" class="mystyle"><transition name="bounce"><div v-if="show" style="display:flex;flex-direction: column ;justify-content:center;align-items: center;background-color:#FF5522;color:yellow;overflow: hidden;border-radius:1.5rem;width:3rem;height:3rem;"  >APP示例</div></transition></div></body></html>

利用APICloud在线打包

在APICloud 官网控制台新建一个应用，应用名称与前述git服务器上建立的项目资源库名称（MpaDemoGit）一致；

在项目目录（如上述MpaDemo目录）中建立config.xml文件，该文件内容示例如下：

config.xml文件注意：id值要和您在APICloud网站创建的应用id保持一致。

<widget id="A12345678901"  version="0.0.1"><name>API Example</name><description>API Example App.</description><author email="developer@apicloud.com" href="//www.apicloud.com">APICloud.SIR</author><content src="index.html" /><access origin="*" /><preference name="windowBackground" value="#FFF" /><permission name="call" /><feature name="weiXin"><param name="urlScheme" value="wx7779c7c063a9d4d9" /></feature>
</widget>

在APICloud 官网生成认证证书。
在APICloud 官网上设置应用的代码管理使用git平台。
将最新项目提交推送至git管理平台
在API使用云编译在线打包，下载安装到手机上运行。

附录：使用git命令切换和合并分支示例

进入本地资源库，命令示例如下：
```
cd /f/front-end-prj/scgcxxGit
```
将当前目录（本地资源库）加入待提交内容
```
$ git add .
```

提交修改代码到本地仓库

$ git commit -m "修改的东西的描述"

将本地的 xia_dev 分支推送至远端的 xia_dev 分支，如果没有就新建一个
```
$ git push origin xia_dev
```
切换到开发主分支上master_dev
```
$ git checkout master_dev
```
拉取主分支上面的代码
```
$ git pull origin master_dev
```
切换到自己的分支
```
$ git checkout xia_dev
```
将master_dev分支上的代码合并到当前分支
```
$ git merge master_dev
```
将本地的 xia_dev 分支推送至远端的 xia_dev 分支，如果没有就新建一个
```
$ git push origin xia_dev
```

移动端多页面APP（MPA）开发体验相关推荐

移动端IM的APP的开发技术
通讯技术的发达使得人们之间的交流越来越方便和顺畅,一说到移动端的IM通信,你可能首先想到的是微信.陌陌.易信这样的APP应用工具, IM通信功能被更广泛地用于其他的移动应用中,例如会议系统.协作工具, ...
移动端H5页面编辑器开发实战--原理结构篇
一.前言在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
ssm 移动端物流系统app
本科生毕业设计 ssm 移动端物流系统app 学生姓名学号指导教师所在学院专业名称班级摘要随着Internet的发展,人们的日常生活已经离不开网络.未来人们的生活与工作将变得越来越数 ...
移动端多页面应用（MPA）的开发（一）
移动端多页面应用(MPA)的开发(一) 移动端应用技术概况什么是移动端应用移动应用开发技术演化原生app(native-app)开发 web-app开发即通过浏览器访问混合式app(Hybr ...
如何进行移动端的页面开发？
如何进行移动端的页面开发应该说,移动端的开发是伴随着HTML5的兴起而出现的,2007年第一款iPhone诞生,2009年HTML5这个名词第一次登上"舞台".当时的移动互联网开 ...
海外直播、聊天交友APP的开发及上架GooglePlay体验【Compose版】
前言 Jetpack Compose在2021年7月底的时候正式发布了Release 1.0版本,在8月中旬的时候正好赶上公司海外项目计划重构,于是主动请缨向领导申请下来了此次开发的机会.由于之前一直 ...
内置h5 调用safari系统浏览器打开_开发教我做设计：移动端H5页面中的橡皮筋效果...
什么是橡皮筋效果(Over Scroll)? 在浏览被H5与iOS客户端混合编程的页面时,由于Safari浏览器的特性,当H5页面滑动到页面顶部.页面底部的位置时,继续下拉/上拉H5网页会出现&quo ...
️Rust 移动端开发体验
在过去的几周里,我根据 Xlog 和 Loagan 的设计思路,使用 Rust 写了一个移动端的跨平台日志库EZLog. 在我实现这个库的过程中,查阅了大量的问答和博客.因为这些开发者的分享,节省了我 ...
html pc、手机、微信端自适应，app推广下载页面
time: 2016-04-06 客户需求一个三端适配的app推广页面,所以百度了一下,写了一个, <!DOCTYPE html> <html><head>< ...

移动端多页面APP（MPA）开发体验

移动端多页面APP（MPA）开发体验

什么是移动端应用

多页面应用和单页面应用

开发环境准备

安装和配置Git

VsCode中配置简体中文语言环境和git（windows环境）

建立MPA项目

开发示例

移动端开发的页面模板

首页：index.html

利用APICloud在线打包

附录：使用git命令切换和合并分支示例

移动端多页面APP（MPA）开发体验相关推荐

最新文章

热门文章