经过 2 个多月的艰苦奋斗,app 的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程。不要问我有多坑,我会告诉你很多,很多.....
过去一直从事. net web 开发工作,直到几个月前,公司需要开发一个 h5+,于是我这样的全能型选手自然而然就被派去搞 web app 开发,在开发中遇到了太多的问题,一路过来也解决了太多的问题。
为什么没有 jquery?因为,根本用不着,我们知道 jquery 它是对 js 的再次封装,而其为了兼容各个版本的浏览器,写了许多许多代码,而对我们 app 而言,基本上都是 Webkit 内核,根本不需要考虑浏览器之间的兼容性问题,所以请忘掉 jquery。
为什么有 vue.js?vue.js 是一款 mvvm 框架,也是目前三大流行的 mvvm 前端框架之一(另外两种:react 和 angular),在做技术选型之前,我有先对这三种框架去做一个简单的研究,后面感觉还是 vue.js 的语法比较优雅,就像我喜欢 C# 语言一样。
为什么用 MUI?因为感觉 MUI 上手简单,因为项目工期紧,人又少(app 加上我 2 个人)。在使用 MUI 之前有研究过 ionic。
在开发 H5 混合应用之前,你必须要有一点前端的基础。
CSS3、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 开发。我用上班时间写的博客,老板,你要给我开工资!!!
来源: https://www.cnblogs.com/jiekzou/p/8119434.html