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

阅读量：4044 次

发布时间：2019-05-24

本文共 2369 字，大约阅读时间需要 7 分钟。

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

什么是移动端应用

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

多页面应用和单页面应用

多页面应用（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设置

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

利用APICloud在线打包

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

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

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


         
      
       API Example
          
      
               API Example App.    
          
      
               APICloud.SIR

在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
```

转载地址：http://nihdi.baihongyu.com/

你可能感兴趣的文章

linux insmod error -1 required key invalid

查看>>

linux kconfig配置

查看>>

linux不同模块completion通信

没有路由器的情况下，开发板，虚拟机Ubuntu，win10主机，三者也可以ping通