最近很久没有更新博客了,因为一直在学习前端h5
手机app的开发。曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~,写代码时HBuilder和VS混用,HBuilder的快捷键和代码提示以及真机调试方便,但是错误提示和代码格式化是硬伤,VS的前端报错提示很智能,代码格式化很顺畅,将二者的优点集合起来。现在在用MUI做app开发,
就把工作中用到的以及遇到的坑都一一记录下来,待项目完工,再回过头来看一下……

  前  言

JRedu

style=”font-size: 14px; font-family: "Microsoft YaHei"”> 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的混合APP的体验越来越趋于原生!那么在本系列博客中,我们就来一探H5开发APP的神秘面纱吧~~

相关学习资料网址

MUI文档:

MUI问答社区:

HTML5+
API文档:

HTML5+
API缓存:

h.js:

vue.js:

dcloud:http://www.dcloud.io/

阿里巴巴矢量图标库:

———————————————–分隔线———————————————————–

mui框架如何实现页面间传值

提升HTML5的性能体验系列之一
避免切页白屏

Hello
MUI发布列表到详情最佳实践

Android硬件加速详解

5+动画详解

Android5的花屏、分块渲染解决方案

HBuilder mui
手拉手教你制作引导页

解决MUI选择器组件抛出“picker.getSelectedItem is not a
function”异常的问题

mui下拉加载、上拉刷新(包括分页,vue.js)

mui与vue结合
功能网址

HBuilder教程

MUI框架预加载

mui
webview模式选项卡实现按需加载

MUI 二维码扫描并跳转

H5+
二维码扫描功能

HTML5 用 websql 模仿 localStorage
几乎无大小限制

Hbuilder用自有证书打包 ios
App上架AppStore流程

hbuilder IOS APP
打包与发布

mui.pullToRefresh插件

安卓缓存清除和计算

在线图片制作网

制作App发布页面 –
DCloud云服务

在安卓设备上使用 Chrome
远程调试功能

Hello
MUI发布列表到详情最佳实践

App资源在线升级更新

MUI版本升级更新程序IOS和andriod

————————————消息推送————————————-

个推:

推送插件开发指南

使用hbuilder开发的app集成的个推

mui 开发知识 积累总结 ————–Hbuilder
APP
个推服务

一、 移动APP项目搭建

常见问题

固定定位在底部的输入框点击输入时被键盘盖住了,整体没有上移

云端生成ios越狱包不能使用apns离线推送功能

 

js知识充电

由于我们的H5编写的都是一个个网页,需要使用浏览器打开才能使用,这显然不是APP的使用方式。
那么我们才能将一个手机网站,封装成一个APP呢?
时下热门的Cordova、PhoneGap、appMobi、WeX5等…都是主流的构建APP工具!但是这些工具有一个共同的特点——使用麻烦!!

if语句只写一个参数是什么意思

要知道if里面的返回值是true或是false,那么只要括号里随便一个数都可以,
a=0,那么if条件就是false了
布尔值,javascript中以下值会被转换为false

  • false
  • undefined
  • null
  • 0
  • -0
  • NaN
  • “”

所以,我们介绍一种最简便的构建的方式,使用HBuilder一键打包!HBuilder是数字天堂旗下的一款前端开发IDE,其功能强大远超你想象,我们使用的MUI框架,HTML5+框架,都是数字天堂旗下产品,Hbuilder+MUI这对好基友,简直就是绝配!

js中 o = o || {};是什么意思

o = o || {}
表示:如果o为null或undefined,则将o初始化空对象(即{}),否则o不变。目的是防止o为null或未定义的错误。其中:||表示或操作,第一个条件为真,则结果为真而不需要执行第二个条件;否则执行第二个条件,等价于以下代码:

if(o)
    o = o;
else
    o = {};

 

HBuilder下载地址:http://www.dcloud.io/ ,下载完成后傻瓜式安装即可。

HBuilder使用安卓模拟器

安卓模拟器有很多,我这里以夜神模拟器为例。使用安卓夜神模拟器来运行手机app的时候,先要配置HUuilder,配置方式:HBuilder的工具–》选项–》运行–》设置Web服务器–》HBuilder–》第三方Android模拟器端口:将此处的端口改为62001。因为夜神模拟器的端口就是62001。

图片 1图片 2

条件允许的情况下,建议直接真机调试,快很多。

 

HBuilder检测不到夜神模拟器 — 解决办法

有时候经常出现HBuilder和夜神模拟器都启动了,建立了链接,但是检测不到夜神模拟器的情况。

1、我们可以试着点击一下夜神模拟器界面,然后再在HBuilder中打开一个页面

2、如果1还是不行,打开cmd执行命令

打开HBuilder的安装目录,进入到tools\adbs目录中,例:C:\Program
Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs

cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs
cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs
cd \Program Files\HBuilder.8.0.2.windows\HBuilder\tools\adbs

图片 3

1使用HBuilder新建移动APP项目

HBuilder安装成功以后,就可以新建一个移动APP项目啦!点击“文件—>新建—>移动APP”,输入你的项目名称,就可以搭建完成一个移动APP项目啦!

项目的目录结构如下:

图片 4

 

 app首页底部导航

参考:tab选项卡示例教程-基于subnview模式的原生tab(含底部凸起大图标)

这个官网提供了具体例子,下载地址:

我做的界面Demo

图片 5

个人感觉:虽然快是快了,但是有一个严重的缺陷,那就是底部无法动态配置。所以我最终抛弃了这种方式,因为界面所有的菜单模块都是可以在PC后台进行配置的,我最终用vue.js来做数据绑定。

注意首页应用了响应式布局,熟悉rem、em、px之间的区别。引入了第三方js:flexible.js

2manifest.json文件介绍

项目目录中的css/img/js/html等文件就不一一赘述了,建好项目后我们需要新增页面只需要新建HTML文件即可,与开发手机网站的操作一模一样。

而这里面最重要的应该就是manifest.json这个文件了,这个文件几乎包含了我们APP的所有设置,双击打开,可以看到这个界面:

图片 6

底部的选项卡可以看到,这里面包含了我们APP的名称、版本号、首页文件、应用的图标、应用的启动图片以及我们需要的各种SDK。大家可以根据自己的需求自行设置,此处不再一一赘述。

 

二、APP程序的打包与调试

 

在上面的操作中,我们搭建了一款属于自己的移动APP项目,那么这个项目怎么运行调试,又是怎么打包成Android以及IOS能够安装的APP呢?

 

最新版本 mui 安卓模拟器调试,同步报错

1、重启安卓模拟器,重新在CMD中连接

adb connect 127.0.0.1:62001

adb devices

图片 7

 2、方法二:在安卓模拟器上面卸载HBuilder

1将项目打包成APP

首先,我们来看一下如何和将项目打包成一个能够安装的应用程序,这是Hbuilder最便捷的一步,也是杰小瑞老师选择Hbuilder这款IDE的主要原因之一。

选中项目,点击Hbuilder顶部导航栏的“发行—>发行为原生安装包”,可以看到如下页面:

图片 8

点击打包,就可以在不需要Xcode和 Android SDK的情况下,直接在云端打包。

 图片 9

打包完成后,就可以得到安卓的apk文件和苹果的ipa文件。

 

快速申请ios打包ipa证书.p12和.mobileprovision(无需Mac)

2直接运行调试

上面介绍的是将项目打包成应用程序,但是开发过程中,我们每个页面都要进行大量的调试测试,HBuilder也是支持的。常用的方式有多种,直接通过浏览器调试,通过手机运行调试,通过模拟器调试,都是可以。

点击运行,就可以选择调试模式啦~~此处不再赘述,如果需要可以评论留言哦!

图片 10

 

三、MUI框架与HTML5+框架介绍

上面提到,HBuilder编辑器、MUI框架、HTML5+框架都是数字天堂公司的知名产品。那么MUI框架和HTML5+框架都是干什么的呢?

 

安装后每次打开都出现请将Hbuilder移至其他盘符以及C盘配置文件不可写入的提示

图片 11

图片 12

右键——管理员权限运行

或者进行如下配置:

图片 13

1MUI框架

 

MUI框架号称是“最接近原生APP体验的高性能前端框架”,当然这是官方的口号,杰小瑞老师不负责吹牛~
官方文档地址:http://dev.dcloud.net.cn/mui/ 

经过我们的亲身体验,MUI框架确实对得起他的口号,当然也有很大的进步空间需要提升。 但是配合HBuilder的使用,如此般顺滑的操作体验会让你不敢相信自己在敲代码。
MUI给我们提供了大量的组件,只需要在HBuilder中输入一个”m”开头,就可以同列表中选择形形色色各种组件!

 图片 14

选中你需要的任意一个组件,回车,一大段代码直接生成!比如我们选择第一个maccordion回车,就会直接生成一大段代码,如下:

 图片 15

运行之后,就可以看到一个折叠面板:

 图片 16

这相比于其他框架需要自己手写Class的方式,这种操作是不是顺滑到不能想象呀!麻麻再也不用担心你记不住这么多class名字了~~ 所以,MUI提供了这么多的组件,使用如此简单,我们也就不再一一讲解了。感兴趣的同学,可以进入帮助文档http://dev.dcloud.net.cn/mui/ui/ 查看所有组件。

我们后面的内容,将主要针对MUI中的页面跳转、选项卡切换、Ajax、下拉刷新&上拉加载、调取底层摄像头的功能展开讲解。

 

在mui-bar mui-bar-tab子页面的中使用echarts,总是有时显示有时不显示

必须在页面中指定报表容器的宽、高,或者最小宽高,在css样式文件中指定宽高有时会无效。

或者你添加窗体的大小变更监听事件,重绘报表,如下所示:

var lineChart = echarts.init(charts);
lineChart.setOption(chartOption);
window.onresize = function () {
   lineChart.resize();
}

补充:如果是底部选项卡切换的时候,默认会加载第一页,因此上面的方法有效。
但是在切换到第2个Tab时,同样会出现不显示或者黑屏的现象,需要在mui.plusReady中做如下处理:

mui.plusReady(function() {
 var nw = plus.webview.getWebviewById("pages/energy.html"); // 这里pages/energy.html是默认的选项卡id
 nw.addEventListener("show", function(e) {
 lineChart.resize();
 }, false);
 });

此问题困扰了许久。

2HTML5+框架介绍

上面我们介绍了MUI框架的基本使用。也了解到了MUI的主要功能是搭建APP的页面布局所使用的框架。那么HTML5+则是增强版的手机浏览器引擎,让HTML5达到原生水平!二维码、语音输入、摇一摇、摄像头、文件系统、微信分享……等几乎你能想到的原生底层功能,HTML5+都能帮你实现。

官方给出了一句话:
40万原生API能力随意调用。功能可谓强大,可以点击进入详细了解:http://www.dcloud.io/runtime.html 

后续的文章中,我们也会使用到HTML5+调用原生摄像头、写入原生文件等能力进行演示。

 

四、搭建第一个APP应用

 

介绍完了APP搭建的基本内容,我们就开始制作我们第一个移动APP吧。首先,我们为我们的APP制作一个首页。

 

app消息推送

个推:

参考教程:

1创建第一个首页

首先,我们应该新建一个index.html文件,注意新建的时候选择“含MUI的html文件”,这样可以帮助我们自动导入所需要的各种默认配置。

图片 17

创建完成后的第一个文件,代码以及详细解释如下:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--设置页面的视口宽度-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <!--导入页面所需要的MUI的CSS文件-->
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <!--导入页面所需要的MUI的JS文件-->
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            // MUI页面初始化函数
            mui.init()
        </script>
    </body>
</html>

 

手写签名

源码地址:

源码地址:

2搭建首页HTML布局

首先,我们先在body中输入“m”选择mHead,生成头部导航栏。

<!--头部APP顶部导航栏区域-->
<header class="mui-bar mui-bar-nav">
    <!--导航栏左上角返回按钮,首页不需要返回按钮,删除即可-->
    <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->

    <!--导航栏标题-->
    <h1 class="mui-title">杰瑞教育APPDemo</h1>
</header>

在导航栏下面,输入mbody,生成页面的主体部分,其实就是一个div。
页面中除了Header和Footer以外的全部内容,必须包裹在body中。

<div class="mui-content">

</div>

紧接着,我们在body中,输入一个mList,生成一个列表。

 

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            1、页面加载子页&列表跳转详情页并传参
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            2、 底部选项卡切换(Div模式)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            3、底部选项卡切换(WebView模式)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            4、底部选项卡切换(自定义)
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            5、图片轮播组件
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            6、HTML5+摄像头使用
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            7、下拉刷新&上拉加载更多&Ajax
        </a>
    </li>
</ul>

 

 

 

这里面的7个功能,也就是我们将逐一讲解的7个重要功能~!是不是剧透了呢~~生成的页面效果如下:

图片 18

 

HBuilder控制台不显示日志

我用的魅族手机,进入工程模式:*#*#3646633#*#*,开启调试模式日志,关于其它手机可以网上查找进入工程模式的方式。

3为每个列表添加点击事件跳转页面

 

添加点击事件肯定就要用到JS啦~~先介绍几个非常常用的MUI方法。

3.1 mui.init({})

mui.init方法时MUI的初始化函数,接受一个对象参数,用于进行页面的各种配置,比如子页面的加载、页面预加载等。。。

下面的代码是利用mui.init在页面初始化时进行页面手势操作的开关:

 

// 初始化页面中的MUI控件
      mui.init({
          /*设置各种手势操作的开关*/
          gestureConfig:{
           tap: true, //默认为true
           doubletap: true, //默认为false
           longtap: true, //默认为false
           swipe: true, //默认为true
           drag: true, //默认为true
           hold:false,//默认为false,不监听
           release:false//默认为false,不监听
        }
      });

 

3.2 mui.ready()

Mui.ready()是MUI框架中的文档就绪函数,表示mui框架已经加载完毕,接受一个回调函数,功能上有些类似于JQuery的文档就绪函数。

// 当MUI的页面DOM加载完成后,执行的函数。 但是,基本都使用mui.plusReady
      mui.ready(function(){
          //console.log("我在plusReady之前调用!");
      })

 

3.3 mui.plusReady ()

mui.plusReady()方法使用与mui.ready()类似,但是这个方法在执行时间上,略晚于mui.ready()。因为这个方法除了要求MUI框架加载完毕的基础上,还要求HTML5+运行时必须准备完毕!

所以我们一般用这个函数,来代替JS中的window.onload函数。

//页面中HTML5+相关的内容加载完毕后,执行的函数。  类似于window.onload = function(){}
      mui.plusReady(function(){
          //console.log("我在mui.ready之后调用!");
      })

3.4 页面跳转功能的实现

页面跳转功能的实现思路是,我们新建了一个数组,数组中存放着与列表一一对应的链接地址。 然后使用循环给每一个列表list添加点击事件,并打开数组中对应的页面地址,代码如下:

var page = ["01-jiazaiziyemian.html","02-tabbarDiv.html","03-tabbarWebView.html","04-tabbarMy.html","05-imglunbo.html","06-Camera.html","07-fullPush.html"];

          var arr = document.getElementsByTagName("a");
          for(var i=0; i<arr.length; i++){
              !function(i){
                  // 在手机APP中,事件绑定推荐使用DOM2模型。 用tap事件取代click事件。
                  arr[i].addEventListener("tap",function(){
                      mui.openWindow({
                          url:page[i],
                          id:page[i],
                      })
                  })
              }(i);
          }

3.5 跳转代码解释

上述代码中,对于很多初学者来说可能会存在一些问题,下面我们来一一解释一下这部分代码:

① 移动端开发中使用tap替代click

在移动端开发中,由于使用click事件会存在一定的延迟,严重影响用户体验,所以我们一律用tap事件取代所有的点击事件。


为什么for循环中嵌套一个自执行函数?

这个问题我们在JS面向对象环节探讨过,由于for循环会在页面加载时直接循环结束,所以当我们点击list时,其中的i已经变成了数组的长度。 至于为什么这么解决,大家可以参考之前的博客:http://www.cnblogs.com/jerehedu/p/7592124.html 

③mui.openWindow ()是个什么东西?

mui.openWindow是MUI官方给我们提供的专门用于打开一个新窗口的函数,详细的使用教程可以参考:http://dev.dcloud.net.cn/mui/window/\#openwindow 

而这个函数的完整配置项如下,当然我们上述的操作只需要一个URL和一个页面ID即可,而且我们以后的页面ID基本都使用URL同名的方式哦~

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度,默认为100%
      height:newpage-height,//新页面高度,默认为100%
      ......
    },
    extras:{
      .....//自定义扩展参数,可以用来处理页面间传值
    },
    createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
    show:{
      autoShow:true,//页面loaded事件发生后自动显示,默认为true
      aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
      duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
    },
    waiting:{
      autoShow:true,//自动显示等待框,默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
        ......
      }
    }
})

好了,截止到这,我们的首页就全部搭建完成啦!最终效果如下!

3.6 首页最终效果预览

图片 19

当然这里面还有很多功能我们暂时没有实现,后面的博客我们继续再见吧!

如若想要源码可戳自行下载。

 

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
版权声明:本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
技术咨询:图片 20

 

如何用Fiddler对Android应用进行抓包

 对app中的ajax请求进行抓包,配置教程如下:

http://jingyan.baidu.com/article/03b2f78c7b6bb05ea237aed2.html

 mui 搜索框在pad上需要点击两次才能弹出键盘

在mui-search外面包含了mui-inner-wrap之后就会出现这个bug。别的控件不知道有没有这个现象,我用到的就是这个。原理应该是mui-placehold绝对定位之后在iOS端产生事件穿透导致的。
解决办法:
.mui-search .mui-placeholder {
pointer-events: none;
}

持续更新中……

相关文章