移动端多页面应用（MPA）的开发（一）
移动端多页面应用（MPA）的开发（一）
- 移动端应用技术概况
- 什么是移动端应用
- 移动应用开发技术演化
- 原生app（native-app）开发
- web-app开发 即通过浏览器访问
- 混合式app(Hybrid App)开发
- 多页面应用和单页面应用
- 基于Vue的MPA移动项目的开发（windows环境）
- 开发环境准备
- 安装和配置Git
- VsCode中配置简体中文语言环境和git（windows环境）
- 建立项目
- 开发示例
- 移动端开发的页面模板
- 首页（index.html）- 进入过度页面
- 登录界面（safty/login/index.html）
- 利用APICloud在线打包
- 附录：使用git命令切换和合并分支示例
移动端应用技术概况
什么是移动端应用
- 移动端应用是指运行于手机、平板电脑等移动端设备的应用软件。
- 移动端应用常常做为一种客户端应用，因此需要访问服务器端应用，从服务器端获取数据或者向服务器提交数据。
移动应用开发技术演化
原生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
移动端多页面应用（MPA）的开发（一）相关推荐
- 多页面（MPA）开发 VS 单页面（SPA）开发
前端方面: jQuery + Bootstrap 多页面应用: 优点: 数据可以直接渲染,对于搜索引擎(SEO)友好 BootStrap 对移动端和PC端界面展示都很友好 后期维护方便,成本低,易上手 ...
- 移动端多页面APP（MPA）开发体验
移动端多页面APP(MPA)开发体验 什么是移动端应用 多页面应用和单页面应用 开发环境准备 安装和配置Git VsCode中配置简体中文语言环境和git(windows环境) 建立MPA项目 开发示 ...
- 【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素--什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
- vue多页面开发_使用VUE进行移动端H5页面开发前准备
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Ip ...
- 移动端H5页面编辑器开发实战--原理结构篇
一.前言 在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
- 如何进行移动端的页面开发？
如何进行移动端的页面开发 应该说,移动端的开发是伴随着HTML5的兴起而出现的,2007年第一款iPhone诞生,2009年HTML5这个名词第一次登上"舞台".当时的移动互联网开 ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- php清除h5格式,移动端H5页面端怎样除去input输入框的默认样式
这次给大家带来移动端H5页面端怎样除去input输入框的默认样式,移动端H5页面端除去input输入框的默认样式的注意事项有哪些,下面就是实战案例,一起来看一下. 前两天在开发在微信访问的HTML5页 ...
- html5首页图标怎么除掉,移动端H5页面端如何除去input输入框的默认样式
移动端H5页面端如何除去input输入框的默认样式 发布时间:2020-09-29 16:41:58 来源:亿速云 阅读:124 作者:小新 这篇文章主要介绍了移动端H5页面端如何除去input输入框 ...
最新文章
- 清华大学王玉计算机,王玉珏（清华大学环境学院教授）_百度百科
- 2020年最漂亮的Linux发行版
- Android下/data/data/package_name/files读写权限
- mysql 面试知识点笔记（七）RR如何避免幻读及非阻塞读、范式
- 使用Spring @Transactional进行数据源路由
- python问题解决了吗_Python 问题怎么解决？
- 01-06 Linux常用命令-统计
- 浙江大学－英特尔嵌入式技术中心成立
- Evaluation for Odometry里程计精度评估
- kali系统安装DVWA
- 华为软件编程规范和范例
- 非常不错的地区三级联动，js简单易懂。封装起来了
- 使用jQuery填充tbody时，填充了两倍数据
- 台式机局域网电脑通过笔记本的无线网络上网
- 2020线上中国国际智能产业博览会区块链高峰论坛重庆举行
- 年终盘点，蔚来终于失去互联网造车老大地位，被小鹏取而代之
- 四轴自适应控制算法的一些尝试开源我的山猫飞控和梯度在线辨识自适应等算法—(转)
- FET335X核心板 序---用飞凌AM335X开始工作了
- 【数字经济】概念、技术、实践：中国 500强泰康集团背后的数据驱动
- mit数据库 matlab,[zz]MIT-BIH开放数据库使用指南