移动端多页面应用（MPA）的开发（一）
移动端应用技术概况
什么是移动端应用
- 移动端应用是指运行于手机、平板电脑等移动端设备的应用软件。
- 移动端应用常常做为一种客户端应用，因此需要访问服务器端应用，从服务器端获取数据或者向服务器提交数据。
移动应用开发技术演化
原生app（native-app）开发
- 需要为Android和ios等不同的平台分别开发app
- 用户体验好
- 与服务器端（PC端）开发技术不通用
web-app开发 即通过浏览器访问
- 通过手机浏览器访问的web应用（微信公众号即属于此类），无需为Android和ios等不同平台分别开发app。
- 用户体验不及原生app。
- 与服务器端（PC端）开发技术可通用
混合式app(Hybrid App)开发
- 使用web-app方式开发App功能的主体部分，然后包装成Android或者ios平台上的app，以native-app的形成呈现，运行时通过Android或者ios内置浏览器访问。
- Hybrid App的开发基本可以实现不同平台同一套代码（特别是自动化打包工具出现以后更是这样）
- 目前随着HTML5和ES6（JavaScript的最新标准）出现，Hybrid App以与原生app用户体验无明显差异。
- 与服务器端（PC端）开发技术可通用
- Hybrid App开发成本低，是目前移动app开发的主流方式
多页面应用和单页面应用
- 多页面应用（MPA）是由多个html页面组成的应用，界面切换主要有不同页面的跳转完成，无切换动画效果。
- 单页面应用（SPA）是仅有一个页面构成的应用，界面切换由dom动态生成和销毁完成，可实现切换动画效果。
基于Vue的MPA移动项目的开发（windows环境）
本项目基于vue框架开发，ui采用mint-ui，字体图标采用font-awesome，ajax访问使用axios。
获取资源
开发环境准备
安装和配置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
- 找到Git的安装目录，进入cmd文件夹，拷贝git.exe路径；
- 打开VS code 进入设置，搜索“git.path”，复制到用户设置，示例如下：
{ "git.path": "C:/Program Files/Git/cmd/git.exe" }
- 上述配置完成后即可在VS code上进行git操作。
- 将master_dev分支上的代码合并到当前分支时，需要进入Git Bush使用命令操作。
$ git merge master_dev
建立项目
-
在git服务器（如：码云）上创建资源仓库，假设仓库名为：scgcxxGit。
-
进入Git Bush命令窗口将仓库克隆到本地
#切换到本地仓库存放位置（假设本地仓库上级目录：f:\front-end-prj） $ cd /f/front-end-prj #将远程资源克隆到本地，则本地仓库目录：f:\front-end-prj\scgcxxGit $ git clone “https://gitee.com/xxx/scgcxxGit.git” -
在vscode中，将本地仓库目录（如：scgcxxGit）放入工作空间
-
在vscode中，在本地仓库目录（如：scgcxxGit）下建立项目目录（如：scgcxx）
-
接下来，在项目目录（如：scgcxx）中就可以开发了。
.
开发示例
本应用本质上就是一个HTML5应用，由一系列HTML5静态页面，通过ajax与服务器端交互。
移动端开发的页面模板
-
采用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;" >宜染在线</div>
</transition>
</div>
<script src="js/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
show:false,
},
methods: {
},
mounted() {
this.show=true;
setTimeout(()=>{location.href='safty/login/index.html';},1200);
}
});
</script>
</body>
</html>
登录界面（safty/login/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>
<link rel="stylesheet" href="../../mint-ui/style.min.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<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;
/*浅灰色背景*/
}
.my-container {
box-sizing: border-box;
height: 100%;
padding: 0.1rem;
}
.my-title {
width: 100%;
text-align: center;
font-size: 0.4rem;
color: #DDDDDD;
text-shadow: 0.03rem 0.03rem 0.1rem #DDDDDD;
/*文字阴影*/
font-weight: bold;
letter-spacing: 0.05rem;
/*文字距离*/
}
</style>
</head>
<body>
<div id="app" class="my-container">
<div style="height:15%;"></div>
<div class="my-title">{{ title }}</div>
<div style="height:10%;"></div>
<mt-field label="帐号" placeholder="请输入帐号"></mt-field>
<mt-field type=“password” label="密码" placeholder="请输入密码"></mt-field>
<div style="height:5%;"></div>
<div>
<mt-button type="primary" size="large">登录</mt-button>
</div>
<div style="height:10%;"></div>
<div style="text-align:center;color:#AAAAAA;">技术支持：XXX软件有限公司</div>
</div>
<script src="../../js/vue.min.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="../../mint-ui/index.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
title: '宜染在线',
},
methods: {
},
mounted() {
}
});
</script>
</body>
</html>
利用APICloud在线打包
-
在码云上，将需要打包的项目合并到默认分支，APICloud会自动从默认分支上拉取代码。
-
在APICloud 官网控制台新建一个应用，应用名称与前述git服务器上建立的项目资源名称（scgcxxGit）一致；
-
在项目目录（如上述scgcxx目录）中建立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
扫一扫
1987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
