滴滴Android热更新框架,vue+webapck+hbuilder实时热更新开发APP经验分享

vue+webapck+hbuilder实时热更新开发APP经验分享

此项目设计的最初目的是为了解决使用 vue+webpack 自动化构建并实时同步手机热更新调试而诞生，告别在html引入vue的low操作。截止目前，DCloud 官方并提供一套完整的 vue+webpack+hbuilder 实时开发调试的文章，只是零零散散有人去构建一些自己的项目，并不能很好地教会或者引导大量开发者使用该开发模式进行开发。本项目以构建流程为主，适量 demo 为辅，印证了 vue+webpack+hbuilder 实时调试以及打包的可行性，为开发者提供多开发种选择。

该项目应现阶段APP构造方式构建了两个APP，一个为SPA(单页面应用)，一个为MPA(多页面应用)，分别采用不同的方式构建，满足不同需求的开发。

需要注意的是，两个APP都几乎没有展示内容的业务逻辑，你可以把它理解为DCLOUD的muiAPP，做UIdemo的展示。SPA使用的是mint-ui(饿了么)MPA使用的是cube-ui(滴滴)，两套UI都仿官方网站做成了类似MUIapp展示的方式并做了很多实用性扩展，方便大家阅读与调用。并且验证PLUS在vue+webpack构建方式下的各类使用情况。更多的AQ可以在APP中的‘ABOUT’或者'INTRODUCE'中得到解答。

SPA请参照：https://github.com/wjsljc/vue-webpack-mint-for-hbuilder

MPA请参照：https://github.com/wjsljc/vue-webpack-cube-for-hbuilder

使用步骤

下载代码

MPA

$ git clone https://github.com/wjsljc/vue-webpack-cube-for-hbuilder.git

$ cd vue-webpack-cube-for-hbuilder

$ npm install

SPA

$ git clone https://github.com/wjsljc/vue-webpack-mint-for-hbuilder.git

$ cd vue-webpack-mint-for-hbuilder

$ npm install

在浏览器中调试调试

$ npm run dev

MPA

浏览器地址为：http://localhost:8080/html/index.html

SPA

浏览器地址为：http://localhost:8080/index.html

真机同步调试

$ npm run dev

MPA

在 HBuilder 中设置应用入口地址为 本地服务器:端口号/html/index.html

SPA

在 HBuilder 中设置应用入口地址为 本地服务器:端口号/index.html

如 192.168.11.102:8080/html/index.html

请确保手机与本地服务在同一网段，否则无法访问本机的服务。

编译后真机同步调试

$ npm run build

把 dist 目录下的文件复制到 HBuilder 项目下

设置起始页为 html/index.html MPA

设置起始页为 index.html SPA

真机运行调试

主要架构以及特色

vue + webpack + cube-ui/mint-ui + hbuilder

UI模块和PLUS模块独立展示，参考使用各取所需

UI是对cube-ui/mint-ui官网demo的仿造与实际实践，采用的是后编译，100%迁移以及额外的扩展，更多的自定义demo展示与结合APP的运用，更加符合一款APP的基础需求

PLUS对5+SDK的的集成运用，对APP常用的几个功能进行了展示，验证5+在vue中的使用

索引页面、登陆与登出，登陆超时、广告弹出等等功能的基础实现原理，使得APP更加“高仿”

对公共函数的封装、组件的封装、对公用代码mixin的使用等也体现了作者对APP的态度

快速上手

两套框架都基于vue-cli当前的版本进行构建，至于为什么不用4.x进行构建在app中进行了回答。

无论是SPA还是MPA开发者可以直接对项目进行修改复用，10分钟快速上手，方便不熟悉的开发者进行框架搭建。对UI也进行了两套完整的扩展解决方案，更贴近真是开发，可以直接复制粘贴。

PS：希望可以帮到大家，如果帮助到了您，请多多点赞！