移动端H5webapp及混合app框架

分成两部分，一部分是cordova编译打包平台，另一部分是webapp vue项目。这么做的用意是为了保证项目之间的低耦合行方便迁移、扩展、管理和开发。 cordova项目主要负责将打包后的vue项目编译成不同并平台下的应用，如何webapp，android, ios。

##项目结构

├─mock                              mock
│  │  index.js                      
│  │  mock-server.js           
│  └─user                           对应业务的mock数据
│          index.js
├─plop-templates                    自动生成文件模板
│  └─view
├─public
│      favicon.ico                  
│      index.html                   模板
│      manifest.json                Hbuilder构建app配置文件
│      project.api.js               接口地址
│      project.config.js            项目配置文件
└─src
    ├─assets                        资源文件
    │  ├─css
    │  └─img
    ├─components                    公共vue组件
    │  └─SvgIcon
    ├─icons                         字体图标
    │  └─svg
    ├─plugins                       插件
    │  ├─device                     设备调用能力api
    │  ├─image-load                 图片预加载、帧动画、时间轴等插件
    │  └─mixins                     vue混入插件
    ├─request                       请求相关
    │  ├─interceptors               拦截器（用于处理请求之前要做的操作）
    │  └─services                   接口
    ├─router                        vue路由
    ├─store                         store状态管理
    │  ├─modules
    │  └─plugins                    状态管理插件
    ├─utils                         工具集
    │  └─validate
    │  └─index.js
    └─views                         业务界面模块
    │  App.vue                      界面入口
    │  main.js                      项目入口
│  .browserslistrc
│  .env.development                 node环境变量配置
│  .eslintrc.js                     eslint配置
│  .gitignore
│  alias.config.js                  webpack的一些配置
│  babel.config.js                  babel配置
│  package-lock.json
│  package.json                     项目配置
│  plopfile.js                      plop生成入口
│  README.md
│  vue.config.js                    vue/cli构建配置

初始化Cordova项目

###安装cordova 这一步的前提是已经完成安装node和npm,如果没有安装的话，请先完成node和npm的安装。 node安装：直接进入官网https://nodejs.org/zh-cn/，下载最新版本安装。安装之后在命令行中使用”node -v” 检查安装是否成功。 npm安装：由于新版的nodejs已经集成了npm，所以node安装时npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。使用命令

npm install -g cordova

来全局安装cordova，安装成功之后，使用命令,来检查是否正确安装，正确安装会显示安装的cordova版本号。

cordova -v

###新建项目(项目已经生成完毕可以跨过这一步) 来生成Android平台的cordova库，这时platforms文件夹中会生成一个android文件夹。

cordova platform add android browser

来生成Android平台的cordova库，这时platforms文件夹中会生成一个android文件夹。到这里，cordova项目就已经建好了。 ###运行cordova项目运行webapp

cordova run browser

运行android

cordova run android

##初始化vue项目（项目已初始化该部分选看）首先全局安装Vue-cli脚手架。

npm install -g @vue-cli

然后使用命令

vue create vue;

这里我们使用router、state、less、eslint插件

生成如图所示结构

修改文件（该部可略过）

修改Vue项目vue.config.js文件.将outputDir改为'../cordova/www'

编译vue项目

在vue项目根目录执行命令或者最外层项目根目录下执行如下命令

npm run build

调试打包apk软件

调试打包软件之前，首先检查androidsdk是否正确安装，执行命令

cordova requirements

即可看到当前环境中sdk安装情况。显示如下即表示环境正确安装。（只需确认正确安装即可，不需每次都去检查） #####在cordova主目录下使用命令

cordova run android

来联调android软件（需连接真机或者模拟器）。 #####执行命令

cordova build android

来打包成apk软件（cordova/platforms/android/app/build/outputs/apk/debug/app-debug.apk）。

Customize configuration

See Configuration Reference.

moonerdad / mobile-webapp-h3c

移动端H5webapp及混合app框架

初始化Cordova项目

修改文件（该部可略过）

编译vue项目

调试打包apk软件

Customize configuration

简介

发行版

贡献者

近期动态

moonerdad / mobile-webapp-h3c .gitee-modal { width: 500px !important; }

移动端H5webapp及混合app框架

初始化Cordova项目

修改文件（该部可略过）

编译vue项目

调试打包apk软件

Customize configuration

简介

发行版

贡献者

近期动态

搜索帮助

moonerdad / mobile-webapp-h3c