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

前言

透过2个多月的劳累奋斗,app的率先个本子现已快竣事了,期间蒙受了太多的坑,作为一个欣赏享受的人,我当然不会小气分享那爬坑历程。不要问我有多坑,我会告诉您多多,很多…..

千古径直从事.net
web开发工作,直到多少个月前,公司索要开发一个h5+,于是自己那样的全能型选手放任自流就被派去搞web
app开发,在付出中遭遇了太多的问题,一路上涨也化解了太多的题材。

技巧选型

html5、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混合使用以前,你不可能不要有某些前端的功底。

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“

图片 1

图片 2

代码目录结构如下:

图片 3

那就是官网提供的Demo的源码,可以看下那几个示例。不过既然叫做示例,就表示,这其间很多东西无法直接在专业项目上那么用,否则固然作死,而自我所谓的各类坑也正是因为生产和示范终究是不等同的。尤其是匹配vue.js一起用的时候,坑更加多了。

MUI有坑,H5+有坑,Vue有坑,而她们会聚一起的时候,就是各个坑…..

HBuilder如今一度在一而再更新、频繁打补丁,一旦有更新,我们在开辟HBuilder的时候,它就会活动提醒,然则更新有高风险,升级需谨慎,升级以前先看下更新的日记,看它修复了怎么?新增了怎么,然后再观看七日,再立异,那样相比保障。

同时须要小心的是,若是大家早就新建了app项目,更新了HBuilder之后,大家项目中的mui.js和mui.css等这么些文件是不会自动更新的,我们需求用新型版本的HBuilder新建一个demo,然后从哪个demo中把那个文件拷贝到项目中去。否则,你只升级HBuilder,而不去升高相关的js和css文件,会现出问题。

你准备好了吗?伊始联合来和本人吐槽这几个坑吧!

连锁学习材料,可以参见我事头阵的文章:MUI开发大全

从下一篇初叶,大家早先一步一步来做app开发。我用上班时间写的博客,总裁,你要给自家开薪酬!!!

项目截图:

图片 4  
图片 5  
图片 6  
图片 7图片 8 
图片 9 
图片 10