H5+混合移动app应用开发——开篇

前言

通过2个多月的艰苦奋斗，app的第一个版本已经快完工了，期间遇到了太多的坑，做为一个喜欢分享的人，我固然不会吝啬分享这爬坑历程。不要问我有多坑，我会告诉你很坑，很坑.....

过去一直从事.net web开发工做，直到几个月前，公司须要开发一个h5+，因而我这样的全能型选手天然而然就被派去搞web app开发，在开发中遇到了太多的问题，一路过来也解决了太多的问题。

技术选型

html五、html5+、vue.js、mui、js

为何没有jquery？由于，根本用不着，咱们知道jquery它是对js的再次封装，而其为了兼容各个版本的浏览器，写了许多许多代码，而对咱们app而言，基本上都是Webkit内核，根本不须要考虑浏览器之间的兼容性问题，因此请忘掉jquery。

为何有vue.js？vue.js是一款mvvm框架，也是目前三大流行的mvvm前端框架之一（另外两种：react和angular），在作技术选型以前，我有先对这三种框架去作一个简单的研究，后面感受仍是vue.js的语法比较优雅，就像我喜欢C#语言同样。

为何用MUI？由于感受MUI上手简单，由于项目工期紧，人又少（app加上我2我的）。在使用MUI以前有研究过ionic。

知识储备

在开发H5混合应用以前，你必需要有一点前端的基础。

css三、html、js、vue.js、h5+、mui

html、js、css相信只要作过web开发，相信就不会陌生，可是有许多开发人员这一块比较薄弱，多是由于长期作后端开发的缘故。若是基础实在太差，建议先临时抱佛脚充充电，学个入门仍是很简单的，敲几天代码就能够了。

感受同样学一天，三天就够了。

至于vue.js的话，去官网过一篇文档，官网：https://cn.vuejs.org/v2/guide/，而后就能够用起来了，一天足矣。

mui，官网：http://dev.dcloud.net.cn/mui/ui/，建议初略过一遍，相信你看完依旧有点云里雾里，不要紧，先了解就好了，一样用一天时间。

h5+的话，网上查资料了解一下它是作什么的，还有它的一些经常使用接口，半天。HTML5+ API文档：http://www.html5plus.org/doc/zh_cn/android.html

如今基础知识就准备得差很少了，就开始搞起来。

开发工具

因为是采用的mui框架，那么天然而然就是用其官网提供的开发工具HBuilder。官网下载地址：http://www.dcloud.io/

下载下来以后直接安装就好了，没什么好说的，须要注意的是，HBuilder专为MUI框架提供了太多的快捷键，请熟记，对提高编码效率很是有帮助。在第一次打开HBuilder会有一个使用的帮助文档，对照那上面去敲一遍，半天就应该熟练了。

你也能够直接查看MUI官网提供的代码块手册：http://dev.dcloud.net.cn/mui/snippet/

对着多敲几遍，你会很惊喜的。不过即使HBuilder如此牛叉的快捷键和提示，可是它依旧存在一个硬伤，那就是代码格式化功能，用过VS的人，对其它IDE老是会有各类吐槽点，因此我一般都是用HBuilder写代码，用VS查错和格式化代码。

开始

新建官网的Demo项目

打开HBuilder，新建”移动App“

代码目录结构以下：

这就是官网提供的Demo的源码，能够看下这些示例。可是既然叫作示例，就表示，这里面不少东西没法直接在正式项目上那样用，不然就是做死，而我所谓的各类坑也正是由于生产和示例终究是不同的。尤为是配合vue.js一块儿用的时候，坑更多了。

MUI有坑，H5+有坑，Vue有坑，而他们汇聚一块儿的时候，就是各类坑.....

HBuilder目前已经在频繁更新、频繁打补丁，一旦有更新，咱们在打开HBuilder的时候，它就会自动提示，然而更新有风险，升级需谨慎，升级以前先看下更新的日志，看它修复了什么？新增了什么，而后再观望一周，再更新，这样比较保险。

并且须要注意的是，若是咱们已经新建了app项目，更新了HBuilder以后，咱们项目中的mui.js和mui.css等这些文件是不会自动更新的，咱们须要用最新版本的HBuilder新建一个demo，而后从哪一个demo中把这些文件拷贝到项目中去。不然，你只升级HBuilder，而不去升级相关的js和css文件，会出现问题。

你准备好了吗？开始一块儿来和我吐槽那些坑吧！

相关学习资料，能够参考我以前发的文章：MUI开发大全

从下一篇开始，咱们开始一步一步来作app开发。

项目截图：