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“

代码目录结构如下:

这就是官网提供的Demo的源码,可以看下这些示例。但是既然叫做示例,就表示,这里面很多东西无法直接在正式项目上那样用,否则就是作死,而我所谓的各种坑也正是因为生产和示例终究是不一样的。尤其是配合vue.js一起用的时候,坑更多了。

MUI有坑,H5+有坑,Vue有坑,而他们汇聚一起的时候,就是各种坑.....

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

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

你准备好了吗?开始一起来和我吐槽那些坑吧!

相关学习资料,可以参考我之前发的文章:MUI开发大全

从下一篇开始,我们开始一步一步来做app开发。我用上班时间写的博客,老板,你要给我开工资!!!

项目截图:

             

H5+混合移动app的更多相关文章

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

    前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多..... 过去一直从事.ne ...

  2. H5混合开发app常用代码

    1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装 ...

  3. H5+混合移动app应用开发——坑我太甚

    用了MUI之后,才发现,那坑比我想象之中的要多得多,有些是H5的坑,有些是plus的坑,接下来我一一来吐槽一番. IOS下面,上拉的时候,速度稍微快一点,表头自动隐藏,等你不拉的时候又自动显示 这种情 ...

  4. H5+混合移动app应用开发——app升级

    当我们的app开发完成之后,无可避免的以后会进行产品升级,那么我们希望在客户的手机上让app进行自动升级,可以分为自动升级和手动升级. 自动升级:一般在客户app第一次打开首页的时候. 手动升级:在a ...

  5. cordova 使用H5混合开发APP

    cordova 中文官网 http://cordova.axuer.com/docs/zh-cn/latest/

  6. vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接

    vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...

  7. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  8. 能挣钱的微信JSSDK+H5混合开发

    H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...

  9. Android H5混合开发(1):构建Cordova 项目

    Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...

随机推荐

  1. hbase源码系列(十二)Get、Scan在服务端是如何处理

    hbase源码系列(十二)Get.Scan在服务端是如何处理?   继上一篇讲了Put和Delete之后,这一篇我们讲Get和Scan, 因为我发现这两个操作几乎是一样的过程,就像之前的Put和Del ...

  2. Atitit.软件开发的终于的设计 dsl化,ast化(建立ast, 解析运行ast)

    Atitit.软件开发的终于的设计 dsl化,ast化(建立ast, 解析运行ast) 1. 使用js,html 撰写dsl 1 1.1. 架构图 1 1.2. html 2 1.3. Js 2 1. ...

  3. RequestMapping、Responsebody、RequestBody

    预备知识:@RequestMappingRequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径.@RequestM ...

  4. 浅谈unicode编码和utf-8编码的关系

    字符串编码在Python里边是经常会遇到的问题,特别是写文件以及网络传输的过程中,当调用某些函数的时候经常会遇到一些字符串编码提示错误,所以有必要弄清楚这些编码到底在搞什么鬼. 我们都知道计算机只能处 ...

  5. C/C++(C++类与对象)

    构造器(constructor) 1.与类名相同,无返回,被系统生成对象时自动调用,用于初始化. 2.可以有参数,构造器的重载,有默认参数.重载和默认参数不能同时出现,但是一定要包含标配(无参数的构造 ...

  6. 学习《人人都是产品经理2.0:写给泛产品经理》高清中文PDF+苏杰(作者)

    <人人都是产品经理2.0--写给泛产品经理>将从人开始,以人结束,中间说事,以一个产品从无到有的过程为框架--想清楚.做出来.推出去,外加一章综合案例.其中,最重要的想清楚.做出来.推出去 ...

  7. 小米开源便签Notes-源码研究(1)-导出功能整体思路

    NotesListActivity是入口Activity. 响应菜单事件,我的手机是"左键菜单".如果菜单项的ID是"R.id.menu_export_text" ...

  8. 【Uva 1627】Team them up!

    [Link]: [Description] 给你n个人; 有一些人之间有认识关系 a认识b,b不一定认识a 让你把这n个人分成两组 使得这两组中的每一组: 组内的人与人之间都相互认识. 并且,使得两组 ...

  9. Top 22 Free Responsive HTML5 Admin & Dashboard Templates 2018

    Top 22 Free Responsive HTML5 Admin & Dashboard Templates 2018 May 18, 2018 Alex Ivanovs Website ...

  10. [Python] String Join

    Let's introduce a new string method, join: >>> nautical_directions = "\n".join([& ...