H5+混合移动app
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的更多相关文章
- H5+混合移动app应用开发——开篇
前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多..... 过去一直从事.ne ...
- H5混合开发app常用代码
1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装 ...
- H5+混合移动app应用开发——坑我太甚
用了MUI之后,才发现,那坑比我想象之中的要多得多,有些是H5的坑,有些是plus的坑,接下来我一一来吐槽一番. IOS下面,上拉的时候,速度稍微快一点,表头自动隐藏,等你不拉的时候又自动显示 这种情 ...
- H5+混合移动app应用开发——app升级
当我们的app开发完成之后,无可避免的以后会进行产品升级,那么我们希望在客户的手机上让app进行自动升级,可以分为自动升级和手动升级. 自动升级:一般在客户app第一次打开首页的时候. 手动升级:在a ...
- cordova 使用H5混合开发APP
cordova 中文官网 http://cordova.axuer.com/docs/zh-cn/latest/
- vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接
vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...
- 移动端H5混合开发设置复盘与总结
此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...
- 能挣钱的微信JSSDK+H5混合开发
H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...
- Android H5混合开发(1):构建Cordova 项目
Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...
随机推荐
- MyBatis学习总结(10)——批量操作
一.mybatis中的批量操作 批量操作核心就是一次传入多个数据然后进行相关操作,增删改查中掌握其中一个其他的也不成问题 1.最新在做的短信平台,要批量插入群发的短信记录: 当然批量操作还有:批 ...
- COGS——T 8. 备用交换机
http://www.cogs.pro/cogs/problem/problem.php?pid=8 ★★ 输入文件:gd.in 输出文件:gd.out 简单对比时间限制:1 s 内存 ...
- vmware启动虚拟机报错VMware Workstation has paused this virtual machine because the disk on which the virtual machine is stored is almost full. To continue, free an additional 1.4 GB of disk space.
报错VMware Workstation has paused this virtual machine because the disk on which the virtual machine i ...
- ArcGIS api for javascript——地理处理任务-瓶中信
描述 如果在海洋中丢下一个瓶子,本例使用颗粒追踪模型显示指定的天数后瓶子在的地方.首先,输入一个追踪瓶子的天数.然后单击按钮并在海洋里的任意地方画一个点来开始模型.几秒以后将看到一条线出现描述瓶子将去 ...
- No WebApplicationContext found: no ContextLoaderListener registered?报错解决
今天跑了下新搭的一个SSI框架. 报例如以下错误: 严重: Exception sending context initialized event to listener instance of cl ...
- CentOS 配置防火墙操作实例(启、停、开、闭port)
CentOS 配置防火墙操作实例(启.停.开.闭port): 注:防火墙的基本操作命令: 查询防火墙状态: [root@localhost ~]# service iptables status& ...
- C++关于二进制位操作小结
#include <iostream> using namespace std; //二进制位逆序. int Grial(int x) { int n = 32; int count = ...
- [Java][log4j]支持同一时候按日期和文件大小切割日志
依据DailyRollingFileAppender和RollingFileAppender改编,支持按日期和文件大小切割日志. 源文件: package com.bao.logging; impo ...
- SpringMVC中JSP取不到ModelAndView的数据原因
自己搭的项目突然EL表达式取不到值了 不管是用 ${msg} 还是用JSTL的<c:out value="${msg}"/> 都不行 才发现犯了一个平时不会注意的错误 ...
- Web 端 js 导出csv文件
http://www.qdfuns.com/notes/35821/2ab249182734d1f5c66da6b5cf395db9.html