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

移动端应用技术概况

什么是移动端应用

• 移动端应用是指运行于手机、平板电脑等移动端设备的应用软件。
• 移动端应用常常做为一种客户端应用，因此需要访问服务器端应用，从服务器端获取数据或者向服务器提交数据。

移动应用开发技术演化

原生app（native-app）开发

1. 需要为Android和ios等不同的平台分别开发app
2. 用户体验好
3. 与服务器端（PC端）开发技术不通用

web-app开发 即通过浏览器访问

1. 通过手机浏览器访问的web应用（微信公众号即属于此类），无需为Android和ios等不同平台分别开发app。
2. 用户体验不及原生app。
3. 与服务器端（PC端）开发技术可通用

混合式app(Hybrid App)开发

1. 使用web-app方式开发App功能的主体部分，然后包装成Android或者ios平台上的app，以native-app的形成呈现，运行时通过Android或者ios内置浏览器访问。
2. Hybrid App的开发基本可以实现不同平台同一套代码（特别是自动化打包工具出现以后更是这样）
3. 目前随着HTML5和ES6（JavaScript的最新标准）出现，Hybrid App以与原生app用户体验无明显差异。
4. 与服务器端（PC端）开发技术可通用
5. Hybrid App开发成本低，是目前移动app开发的主流方式

多页面应用和单页面应用

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

基于Vue的MPA移动项目的开发（windows环境）

本项目基于vue框架开发，ui采用mint-ui，字体图标采用font-awesome，ajax访问使用axios。

开发环境准备

安装和配置Git

1. 安装Git客户端工具（上官网下载即可）
2. 配置Git的环境变量：path=Git安装目录\cmd
3. 运行Git Bash, 出现命令行界面
4. 在Git Bash命令界面，设置全局配置，创建一个全球用户名、全球邮箱：

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

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

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

   打开VS code,按组合键Ctrl+Shift+P,搜索language,选择Configure Display Language,设置locale为zh-CN

   下载简体中文插件，并启用

3. 配置git

• 找到Git的安装目录，进入cmd文件夹，拷贝git.exe路径；
• 打开VS code 进入设置，搜索“git.path”，复制到用户设置，示例如下：

  { 	"git.path": "C:/Program Files/Git/cmd/git.exe"            }

4. 上述配置完成后即可在VS code上进行git操作。
5. 将master_dev分支上的代码合并到当前分支时，需要进入Git Bush使用命令操作。

   $ git merge master_dev

建立项目

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

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

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

3. 在vscode中，将本地仓库目录（如：scgcxxGit）放入工作空间

4. 在vscode中，在本地仓库目录（如：scgcxxGit）下建立项目目录（如：scgcxx）

5. 接下来，在项目目录（如：scgcxx）中就可以开发了。

   .

开发示例

本应用本质上就是一个HTML5应用，由一系列HTML5静态页面，通过ajax与服务器端交互。

移动端开发的页面模板

1. 采用HTML5标准

2. viewport设置

3. 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）- 进入过度页面

    
       
               
   
        
                
     
      宜染在线
     
        
        
   
        

登录界面（safty/login/index.html）

    
       
           
       
           
   
        
    
        
    
     {
  { title }}
    
        
    
        
            
            
    
        
    
            
     
      登录
             
    
        
    
        
    
     技术支持：XXX软件有限公司
    
    
   
                

利用APICloud在线打包

1. 在码云上，将需要打包的项目合并到默认分支，APICloud会自动从默认分支上拉取代码。

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

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

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

            
         
          API Example
             
         
                  API Example App.    
             
         
                  APICloud.SIR    
             
             
             
             
             
                 
              
         
        

4. 在APICloud 官网生成认证证书。

5. 在APICloud 官网上设置应用的代码管理使用git平台。

6. 将最新项目提交推送至git管理平台

7. 在API使用云编译在线打包，下载安装到手机上运行。

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

1. 进入本地资源库，命令示例如下：

   cd /f/front-end-prj/scgcxxGit

2. 将当前目录（本地资源库）加入待提交内容

   $ git add .

3. 提交修改代码到本地仓库

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

4. 将本地的 xia_dev 分支推送至远端的 xia_dev 分支，如果没有就新建一个

   $ git push origin xia_dev

5. 切换到开发主分支上master_dev

   $ git checkout master_dev

6. 拉取主分支上面的代码

   $ git pull origin master_dev

7. 切换到自己的分支

   $ git checkout xia_dev

8. 将master_dev分支上的代码合并到当前分支

   $ git merge master_dev

9. 将本地的 xia_dev 分支推送至远端的 xia_dev 分支，如果没有就新建一个

   $ git push origin xia_dev

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