精华内容
参与话题
问答
  • ... 使用列表系列标签完成常见网页中的列表结构; 熟练掌握表格,表单都系列标签,在项目中熟练使用;...了解哪些标签在项目中经常使用,哪些标签已被废除;...迈出HTML5开发的第一步,为后续课程打下基础;
  • 移动web开发笔记

    万次阅读 2016-05-15 20:12:27
    移动web开发笔记移动web开发笔记

    移动web开发笔记

    参考:
    移动web开发入门
    移动端web开发技巧

    基础概念

    像素单位

    CSS pixels与device pixels CSS pixels

    浏览器使用的抽象单位, 主要用来在网页上绘制内容。 device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式:
    1 CSS pixels = (devicePixelRatio)^2 device pixels
    (^2是平方的意思,至于 devicePixelRatio是什么东西,后面会讲解) 。

    PPI/DPI

    PPI,有时也叫DPI,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。(注:这里的像素,指的是device pixels。)搞清楚了PPI是什么意思,我们就能很容易理解PPI的计算方式了,我们需要首先算出手机屏幕的对角线等效像素,然后处以对角线(我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度),就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是,根据公式计算出来的iPhone 4的PPI为330,要比苹果官方公布的326要高一点点。

    devicePiexelRatio

    pixel - px ( picture element )
    
    dpi / ppi - 每英寸像素 ( dot per inch )
    
    dips - 设备独立像素 ( device-independent pixels )
    
    devicePixelRatio - 物理像素 / dips 
    

    文字大小控制

    px, rem
    
    固定大小 - px
    
    多屏适配,统一修改 - rem
    相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
    
    rem - font size of the root element (W3C)
    

    viewport

    参考:移动前端开发之viewport的深入理解

    <meta name="viewport"
          content="width=device-width,
                   height=device-height,
                   inital-scale=1.0,
                   maximum-scale=1.0,
                   user-scalable=no;"
    />

    在苹果的规范中,meta viewport 有6个属性,分别如下:
    - width - viewport的宽度[pixel_value |device-width]
    - height - viewport的高度[pixel_value |device-height]
    - initial-scale - 初始的缩放比例[float_value]christer1229
    - maximum-scale - 允许用户缩放到的最大比例
    - minimum-scalbujue - 允许用户的最小缩放值
    - user-scalable - 用户是否可以手动缩放 [yes | no]

    响应式布局

    原则

    • 移动优先
    • 渐进增强

    实现方式

    • 媒体查询
    • 使用JS
    • 使用第三方框架

    布局方案

    百分比布局(流体布局)

    将元素原本的定宽除父容器的宽度得到百分比设置为宽度,使用百分比,文字使用 em。

    • 优点:
      流动布局页面对用户更友好,因为它能自适应用户的设置。
      页面周围的空白区域在所有分辨率和浏览器下都是相同的,在视觉上更美观。
      如果设计良好,流动布局可以避免在小分辨率下出现水平滚动条。
    • 缺点:
      设计者更难控制用户所见,并可能忽略掉一些错误,因为在特定的分辨率下看起来好的;
      图片,视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户;
      在特别大的分辨率下,内容会被拉成长长的一行,变得难以阅读;
      会有画面失真问题

    弹性(flexible)布局

    用rem替代px
    原理:定一个最大宽度,设备屏幕超过这个宽度之后,rem大小不再变化,否则,rem大小设置为屏幕宽度的几分之一,页面中的长度单位值用rem代替px,这样随着页面的宽度变化能够进行等比例缩放。
    rem实际是页面根元素的字体大小,通过js改变rem值的代码如下:

    ;
    ( function( win ) ) {
        var doc = win.document;
        var docEl = doc.documentElement;//获取文档元素
        var tid;
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;//获取设备宽度
            if ( width > 540 ) {
                width = 540;
            }
            var rem = width / 10;//设置rem为屏幕宽度的十分之一
            docEl.style.fontSize = rem + 'px';
        }
        win.addEventListener('resize', function() {//屏幕宽度改变时
            clearTimeout(tid);//清除之前的计时器
            tid = setTimeout(refreshRem, 300);//300ms后改变rem大小
        }, false);
    
        win.addEventLister('pageshow', function( e ) {//页面显示时
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        refreshRem();
    })( window );

    参考:移动端页面使用rem来做适配

    flex-box布局

    flex-box,参考:
    Flex 布局教程:语法篇
    优点:布局方便,灵活性高;
    缺点:兼容性问题;

    图片处理

    普通设置:

    img {
        max-width: 100%;
    }

    或:

    img {
        width: 100%;
        max-width: 300px;
    }//限制最宽不超过300px;

    响应式图片:

    参考:
    响应式图片srcset全新释义sizes属性w描述符
    Srcset和sizes

    即根据屏幕密度现实对应尺寸图片
    src:指定资源(在浏览器不认识srcset和size时会加载这个)
    srcset:srcset的值是可用图像版本的URL列表;每个图片的宽度都用w描述符来表明。
    sizes:使用长度与媒体查询配合,浏览器会检测每一个媒体查询,直到匹配到为止。使用查询配合的长度作为“选择资源”拼图的最后一块:图像渲染宽度或者相对于视图。
    eg.

    <img src="small.jpg"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw,
            100vw"
     alt="A rad wolf" />

    媒体查询

    1. 可以通过<link>标签的media属性为样式表指定设备类型
    <link rel="stylesheet" type="text/css" media="screen" href="screen-style.css">
    <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css"> //纵向屏幕
    <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css"> //宽度小于900px时
    1. 在css中同样可以使用
    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }
    @media (max-width: 960px){
        body{
            background: #000;
        }
    }
    @media screen and (min-width:960px) and (max-width:1200px){
        body{
            background:yellow;
        }
    }
    1. @import方法
      @import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。
    @importurl(reset.css) screen;   
    @importurl(print.css) print;

    <head>中的<style>标签中引入媒体类型方法。

    <head>
    <style type="text/css">
        @importurl(style.css) all;
    </style>
    </head>

    为方便查阅,下面列出了所有可供媒体查询检测的特性
    - width:视口宽度。
    - height:视口高度。
    - device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度)。
    - device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度)。
    - orientation:检查设备处于横向还是纵向。
    - aspect-ratio:基于视口宽度和高度的宽高比。一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9。
    - device-aspect-ratio:和aspect-ratio类似,基于设备渲染平面宽度和高度的宽高比。
    - color:每种颜色的位数。例如min-color: 16会检测设备是否拥有16位颜色。
    - color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
    - monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数,如monochrome: 2。
    - resolution:用来检测屏幕或打印机的分辨率,如min-re一种检测 IE 是否加载完成的方式,使用 doScroll 方法调用,详情可见http://javascript.nwbox.com/IEContentLoaded/
    原理就是对于 IE 在非 iframe 内时,只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在上述中间隔 50 毫秒尝试去执行 doScroll,注意,由于页面没有加载完成的时候,调用 doScroll 会导致异常,所以使用了 try -catch 来捕获异常。
    结论:所以总的来说当页面 DOM 未加载完成时,调用 doScroll 方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了。solution: 300dpi。还可以接受每厘米像素点数的度量值,如min-resolution: 118dpcm。
    - scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。如720p HD电视(>devide-width指屏幕宽高,width指渲染窗口宽高
    720p的p即表明是逐行扫描)匹配scan: progressive,而1080i HD 电视(1080i中的i表明是隔行扫描)匹配scan: interlace。
    - grid:用来检测输出设备是网格设备还是位图设备。
    - 在上述所有特性中,除scan和grid之外,都可使用min和max前缀来创建一个查询范围。

    HTML5

    新表单类型

    • placeholder
      只需在input元素中加入placeholder属性,其属性值就会默认显示为占位符文字,输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时,占位符文字则会再次显示。
    • required
      在支持HTML5的浏览器中,在input元素中追加布尔类型的属性required(也就是说你可以选择追加或不追加该属性),则表明该表单域为必填项。如果表单提交时该必填项没有任何信息,浏览器则会显示警告信息。警告信息的显示方式(包括显示内容和样式)取决于浏览器与输入框类型。
      range、color、 button和hidden类型的输入元素则不能使用required,因为这几种输入类型几乎都有默认值。

    • autofocus
      HTML5的autofocus属性可以让表单在加载完成时就有一个表单域被默认聚焦(或选中),以便于用户输入。
      例如有多个表单域追加了autofocus属性,在Chrome(v16)中会聚焦最后一个使用autofocus属性的表单域,而Firefox(v9)恰恰相反,会聚焦第一个使用autofocus的表单域。

    • autocomplete

    也可以通过给表单本身(不是fieldset)设置属性来禁用整个表单的自动完成功能。示例代码如下:

    <form id="redemption" method="post" autocomplete="off">
    • list(及对应的datalist元素)
      list属性以及对应的datalist元素可以让用户在输入框中开始输入值的时候,显示一组备选值。
      list属性中的值(awards)同时也是datalist元素的id。这样就可以让datalist与输入项关联起来。虽然将option包裹在select中不是必需的,但这样做便于为老版本浏览器提供降级方案。

    HTML5的新输入类型

    • type=”email”——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。
    • type=”number”——支持该特性的
      浏览器期望输入一个数字。这种输入类型默认还提供控制按钮,允许用户简单地点击向上或向下来改变数值。
      你可能注意到在上面的代码中,我们还设置了允许输入的最小值和最大值范围,具体代码如下:
    type="number" min="1929" max="2015"

    超出范围的数字会(应该)得到特殊对待。
    - type=”url”——你猜对了,URL输入类型用于输入URL地址。
    - type=”tel”是另一种用于收集联系人信息的输入类型。tel表示表单域期望输入一个电话号码- type=e=”search”——和普通文本输入框的表现基本一样,仅在个别浏览器中渲染得有点细微差别。
    你可用pattern属性通过正则表达式来定义表单域的数据
    - type=”color”——会在支持该特性的浏览器中生成一个颜色选择器,让用户可以选择十六进制的颜色值。
    - 日期和时间输入类型
    和color类型一样,目前对date提供原生支持的浏览器寥寥无几,大多数浏览器默认都将其渲染为标准的文本输入框。超级棒的Opera已经实现了这个功能
    range输入类型会生成一个滑动条。

    CSS3

    笔记

    设备控制

    • 打开数字键盘
      <input type="tel">
    • 隐藏地址栏
      setTimeout(function(){ window.scrollTo(0, 1); }, 0);
    • 在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上
      <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
      <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
      <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

    设备交互

    1. input fixed失效问题
      参考:
      iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
      【小贴士】虚拟键盘与fixed带给移动端的痛!
      Web移动端Fixed布局的解决方案
      出现原因:
      移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点,但是文本框获得焦点未必会弹出键盘;
      收起虚拟键盘的条件是:文本框失焦
      总而言之,我们认为会出现或者消失虚拟键盘的时候都可能不工作
      在移动设备上,如果文本框在上方,点击不会有什么问题:
      在设备的最下面的话,整个块会上移,以将input区域显示出来
      这个时候几个棘手的问题就出现了:
      ① 虚拟键盘的出现对页面来说是不可知的,这句话的理解是:没有键盘出现事件,没有办法获取键盘高度
      ② 键盘是“贴”在了viewport上,表面上不会对dom产生“任何”影响,但是这个时候一些定位元素的表现却变得“怪异”。

    软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。

    这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样的问题。

    解决方案:
    使fixed的父元素不滚动,将滚动区域限制在与footer和header同级的内容部分。

    性能优化

    参考:移动开发规范概述
    要考虑Android低端机与2G网络场景下性能 注意!

    发布前必要检查项

    所有图片必须有进行过压缩
    考虑适度的有损压缩,如转化为80%质量的jpg图片
    考虑把大图切成多张小图,常见在banner图过大的场景
    

    加载性能优化, 达到打开足够快

    数据离线化,考虑将数据缓存在 localStorage
    初始请求资源数 < 4
    图片使用CSS Sprites 或 DataURI
    外链 CSS 中避免 @import 引入
    考虑内嵌小型的静态资源内容
    初始请求资源gzip后总体积 < 50kb
    静态资源(HTML/CSS/JS/Image)是否优化压缩?
    避免打包大型类库
    确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间) 注意!
    尽量使用CSS3代替图片
    初始首屏之外的静态资源(JS/CSS)延迟加载
    初始首屏之外的图片资源按需加载(判断可视区域)
    单页面应用(SPA)考虑延迟加载非首屏业务模块
    开启Keep-Alive链路复用
    

    运行性能优化, 达到操作足够流畅

    避免 iOS 300+ms 点击延时问题 注意!
    缓存 DOM 选择与计算
    避免触发页面重绘的操作
    Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行 注意!
    尽可能使用事件代理,避免批量绑定事件
    使用CSS3动画代替JS动画
    避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
    HTML结构层级保持足够简单
    尽能少的使用CSS高级选择器与通配选择器
    Keep it simple
    

    在线性能检测评定工具使用指南

    访问 Google PageSpeed 在线评定网站
    在地址栏输入目标URL地址,点击分析按钮开始检测
    按 PageSpeed 分析出的建议进行优化,优先解决红色类别的问题
    
    展开全文
  • 移动平台开发一步到位

    万人学习 2015-04-15 15:24:28
    通过Xamarin开发套件,你将可以用 Visual Studio 及 C# 开发移动平台 (Windows/iOS/Android) 的 App,而且执行效能一样好!让使用 .NET 技术开发企业应用者,用既有的投资及熟悉的技术进入 App 开发世界。
  • 通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。 HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法...

    前端开发APP,从HBuilder开始~

    通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。

     

    HTML5+扩展了JavaScript 对象plus,使得js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

     

    HBuilder 的手机原生能力调用分2 个层面:

     

    a) 跨手机平台的能力调用都在HTML5+ 规范里,比如二维码、语音输入,使用plus.barcode 和plus.speech。编写一次,可跨平台运行。

     

    b) JS Bridge是另一项创新技术,通过js 可以直接调ios 和android 的原生API,这部分就不再跨平台,比如调ios game center,或在android 手机桌面创建快捷方式。

    JSB 的用法是var obj = plus.android.import("android.content.Intent");将一个原生对象android.content.Intent 映射为js 对象obj,然后在js 里操作obj对象的方法属性就可以了。

     

    注:使用 HTML5+开发的移动App 并非mobileweb页面。这是新手最容易混淆的地方。mobileweb 的文件存放在web 服务器上,而移动App 的文件存放在手机本地,编写移动App 的html、js、css文件被打包到ipa或apk等原生安装包,在手机客户端运行。

     

    当然这些移动 App 里某些页面也可以继续从服务器端以网页方式运行。所以mobile web,在HBuilder 里新建项目时,属于web 项目。不要放置到移动App 项目。mobile web 项目也不能真机联调和打包.

    内容简介

    介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~

    无所不能的js

    最开始js仅仅局限于网页上一些效果,操作网页内容等,但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃,native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃。

     

    前端涉及app的两种方式

    适应移动端的网页

    大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表,说的简单点就是对移动端做了适配,布局样式组件都适合移动端展示。

     

    缺陷:毕竟不是app,不管怎样也没办法取代app的便捷和功能强大。

     

    js+html+css+打包技术

    比较有名的就是phonegap了,国内的是hbuilder,大概的意思是html负责页面内容,js负责效果以及调用原生app方法,ui框架负责样式,最后打包成apk或者ipa

     

    hbuilder(http://www.dcloud.io/)

    不谈phonegap,不适用国内国情,是的,你没有看错,这是一个开发的ide,其实就是对eclipse进行了深度定制。

     

    特点是快捷键比较多,支持移动app开发(h5+方式)。

     

    h5+(http://www.html5plus.org/#home)

    可以说nodejs将js带到后端,h5+将js带到移动端。

     

    原理

    上面说过的原理,再次说一遍:

     

    html负责页面,也就是的内容和框架;

     

    js负责调用方法,也就是调用一些移动端原生;

     

    ui负责样式,比较有名的bootstrap,amazeui,jquery mobile,mui

     

    ui比较

    上面说的几个ui,做下简单比较,仅代表个人观点,

     

    Amazeui:功能和bootstrap重复,官方解释是对中文排版做了优化,个人觉得有点多余,bootstrap就很好。

     

    Bootstrap:适合移动端浏览网页适配,移动端浏览效果不错,但是还是网页。

     

    jquery mobile:专门对移动端做定制,看起来就像手机应用一样,js+css,国外的,不推荐,有坑。

     

    Mui:这个是推荐的,比较了jqmobile和mui,显然mui效果样式好点,估计也会有坑,但是支持国产吧。

     

    前端开发app

     

    搭建开发环境

    不需要搭建ios和android的开发环境,只需要下载hbuilder(估计需要java环境支持)。

     

    选定ui

    目前推荐mui,效果不错

     

    写事件

    通过js调用原生方法实现app效果

     

    写业务逻辑

    环境搭建

    前言

    本教程是介绍使用html5+(nativejs)和mui开发移动app(包括android和ios),

     

    感兴趣请继续,不感兴趣请跳过,大部分来自官方api,增加了一些自己的总结。

     

    HBuilder

     

    说明

    用h5+开发app的环境,也是ide,对eclipse做了深度定制,以前使用过eclipse或者myeclipse的童鞋可以直接上手。

     

    官网

    http://www.dcloud.io/

     

    下载

    在官网上点击下载,安装好后可以自己将文件夹压缩成zip,方便以后使用,解压就可以用。

     

    依赖

    估计会需要jre环境,没有试过,如果需要请自行百度搜索jre安装方法。

     

    上手

    打开HBuilder之后默认会有一个项目“HelloHBuilder”,里面有HBuilder使用的介绍。

     

    快捷键

    HBuilder一大亮点是快捷键,但是如果习惯了自己之前的快捷键会很别扭,需要自己在工具——选项——常规——快捷键中修改。

     

    插件

    HBuilder将插件做了下优化,提供了最长用的一些插件,并且使用dcloud网站下载,速度很快,eclipse自带插件安装需要翻墙。

     

    打开工具——插件安装,安装自己需要的插件,例如我安装了如下插件:

     

     

    完成

    环境搭建就完成了,这应该是所有开发环境搭建中最简单的了。

     

     

    原理介绍

    原理

    html5+开发app的原理大概是这样:

     

    html页面负责内容;

     

    ui负责页面样式;

     

    js负责调用原生app方法。

     

    html5

    html5这部分负责页面,也就是app中你看到的东西,大概的架构和内容

     

    ui

    ui负责页面样式,既然要做移动app,那做出的效果就得和移动端靠近,这里并没有局限于用哪种ui,比较常见的适配移动端的ui框架有:

     

    bootstrap

    介绍:Twitter开发的ui框架,特点是可以简介美观,可以适配移动端(例如本站:http://uikoo9.com/

     

    中文官网:http://v3.bootcss.com/

     

    amazeui

    介绍:国人模仿bootstrap做的一个ui框架,个人感觉有点多余,有兴趣的可以看看。

     

    官网:http://amazeui.org/

     

    jquery mobile

    介绍:HBuilder其实是模仿国外的phonegap,通用mui是模仿jquery mobile,但是感觉也不错

     

    官网:http://jquerymobile.com/

     

    mui

    介绍:和HBuilder相搭配的移动ui,也和nativejs相搭配,感觉还不错,模仿的ios7界面风格。

     

    官网:http://dcloudio.github.io/mui/

     

    framework7

    介绍:国外一块模仿ios7的ui框架,赞

     

    官网:http://www.idangero.us/framework7/

     

     

    nativejs

    介绍:一个可以调用android和ios原生方法的js

    入门:http://ask.dcloud.net.cn/article/88

     

    搭配

    选择:目前比较好的搭配是mui+nativejs+hbuilder,你也可以尝试其他的组合,例如jqmobile+nativejs等

     

    mui-demo:http://www.dcloud.io/hellomui/

     

    nativejs-demo:http://www.html5plus.org/#case#/case/id/4.html

     

    mui开发示例

    前言

    看了前面两篇内容是否有点跃跃欲试了?

     

    下面就开始一个简单的例子,以及mui相关内容

     

    mui

    官网:http://dcloudio.github.io/mui/

     

    说明:希望你可以把官网内容通读一遍,这是以后开发的基础

     

    开始

    新建项目

    在首页点击新建移动App,如下:

     

    或者在项目管理器内右键新建,或者快捷键ctrl+n+a

     

    选择模版

    这里选择mui项目,会自动引入mui的js和css,如下:

    文件结构

    默认有以下几个文件夹:css,fonts,js,如下:

     

    简单开发

    header

    打开index.html后在body内输入mh后回车,如下:

     

    body

    同样输入mbo后回车

     

    list

    在mbody中添加一些列表

    最后的代码

    <!DOCTYPE html>  

    <html>  

    <head>  

        <meta charset="utf-8">  

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  

        <title></title>  

        <script src="js/mui.min.js"></script>  

        <link href="css/mui.min.css" rel="stylesheet"/>  

        <script type="text/javascript" charset="utf-8">  

            mui.init();  

        </script>  

    </head>  

    <body>  

        <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">我的标题</h1>  

        </header>  

        <div class="mui-content">  

            <ul class="mui-table-view" id="my_task_list">  

                <li class="mui-table-view-cell">  

                    <div class="mui-slider-right mui-disabled">  

                        <a class="mui-btn mui-btn-red">删除</a>  

                    </div>  

                    <div class="mui-slider-handle">  

                        待办事项1  

                    </div>  

                </li>  

                <li class="mui-table-view-cell">  

                    <div class="mui-slider-right mui-disabled">  

                        <a class="mui-btn mui-btn-red">删除</a>  

                    </div>  

                    <div class="mui-slider-handle">  

                        待办事项2  

                    </div>  

                </li>  

            </ul>  

        </div>  

    </body>  

    </html>  

     

    调试(android为例)

    连接手机

    首先需要连接手机

     

    运行

    选择运行——手机运行——在xx设备上运行

    或者使用快捷键ctrl+r

     

    效果

    现在你就可以在手机上看效果了

     

    注意

    需要开启开发者模式

     

    打包

    dcloud证书打包

    选择发行——App打包——选择android以及dcloud公用证书,如下:

     

    参数配置

    可能有时候会提示参数配置错误,这是你需要打开项目下manifest.json文件,并去掉第三方插件,如下:

     

     

    等待

    返回上一步的发行打包,点击打包后会提示你已经到云端打包,你只需要等待了,

     

    一小会之后就打包好了,这时你就可以把apk拷贝到自己手机使用了,

    mui中几种open页面的区别

    使用hbuilder+mui做app一段时间,期间遇到问题不少,自己摸索,做了个app,详见:http://uikoo9.com/dishi/download

     

    如果您水平比这个高,那就不用看了,直接跳过。

     

    【水平】

     

    由于用hbuilder+mui出于兴趣,也就没有去看源码,停留在使用总结层次,所以有说的不对的地方还请见谅。

     

    【几种打开页面的方式】

     

    1.初始化时创建子页面

     

    2.直接打开新页面

     

    3.预加载页面

     

    【示例】

     

    1.初始化时创建子页面

     

    mui.init({  

        subpages: [{  

            url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址  

            id: your - subpage - id, //子页面标志  

            styles: {  

                top: subpage - top - position, //子页面顶部位置  

                bottom: subpage - bottom - position, //子页面底部位置  

                width: subpage - width, //子页面宽度,默认为100%  

                height: subpage - height, //子页面高度,默认为100%  

                ......  

            },  

            extras: {} //额外扩展参数  

        }]  

    });  

     

    2.直接打开新页面

     

    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: {  

            ..... //自定义扩展参数,可以用来处理页面间传值  

        }  

        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.预加载页面

     

    // 方式1  

    mui.init({  

        preloadPages: [{  

            url: prelaod - page - url,  

            id: preload - page - id,  

            styles: {}, //窗口参数  

            extras: {}, //自定义扩展参数  

            subpages: [{}, {}] //预加载页面的子页面  

        }]  

    });  

      

    // 方式2  

    var page = mui.preload({  

        url: new - page - url,  

        id: new - page - id, //默认使用当前页面的url作为id  

        styles: {}, //窗口参数  

        extras: {} //自定义扩展参数  

    });  

     

     

     

    【一些区别】

     

    1.子页面和非子页面

     

    以上三种方式中,2,3打开的页面非子页面,

     

    区别是子页面相当于html中的iframe,而非子页面相当于新开了一个浏览器窗口加载了一个html

     

    2.子页面适用于侧滑菜单

     

    子页面有其特点,特别适用与index.html+list.html这种情况,

     

    如果用index.html(主页面)+list.html(子页面)实现的话,当主页面右滑时子页面会自动跟随,

     

    而用index.html(主页面)+list.html(新页面)实现的话,主页面右滑,新页面不右滑,还得单独处理新页面。

     

     

    3.子页面使用频繁切换的情况

     

    如果频繁左滑右滑,在配置较低的手机上会出现list.html遮住index.html的情况,采用子页面模式就不会,采用新页面模式几率很大。

     

    4.子页面适用与下拉刷新和上拉加载

     

    之前做向下拉刷新的时候,采用的是新页面的形式,按照官网教程,怎么搞都不成功,后来看了下源码,发现下拉刷新必须采用子页面的形式,也就是你的list.html必须是index.html的子页面,才可以下拉刷新。

     

    5.新页面适用于新页面

     

    open一个新页面,适用于查看详情之类的,需要打开一个新页面的情况,并且mui自己封装了新页面的back方法,你就不需要去操心了。

     

    6.预加载页面的两种方式

     

    第一种是在初始化的时候预加载,这种情况适合在你这个页面在很久之后才会用,如果你要立即到的页面并使用,那么你会得到null。第二种方式类似与open,个人感觉没有什么太大的区别,唯一的区别是open就直接打开了,preload只是加载,你可以之后选择打开的时机。

     

    7.总结

     

    需要下拉刷新上拉加载请使用子页面,需要打开一个新页面请使用新页面方式,需要加载一个页面但是暂时不使用请使用预加载方式。

     

    展开全文
  • +------------------------------------------------- mr_raptor 原创 -----------------------------------... 姊妹篇 - 分析当前移动市场之:对WindowsPhone7想说的话:  http://blog.csdn.net/mr_raptor/article/

    +------------------------------------------------- mr_raptor 原创 ---------------------------------------+

        

        姊妹篇 - 分析当前移动市场之:对WindowsPhone7想说的话:

            http://blog.csdn.net/mr_raptor/article/details/7065072

     

     北美智能手机平台市场份额(数据来自comScore,全球著名数据统计网站之一)

    解析:

        上图是从10年11月至11年2月各主要智能手机平台市场份额,主要有以下几家:

           Google的Android, BlackBerry黑莓的RIM, Apple的iOS,Microsoft的WM和WP7,Palm

          由图可见,Android以最快增长速度统领北美市场从26%到33%,三分之一江山尽收旗下,iOS以微弱增幅位居第三,市场份额四分之一。

          分析,如今大红的iPhone为什么在10年底增幅微弱,我的见解如下,从2010年秋季发布会之后,一直对iPhone4的后续产品是个迷,所以从10年底开始,很多苹果粉开始放弃购买iPhone4,而等待所谓的iPhone5(当然11年秋季发布会发布的是iPhone4S),这在一定程序上影响了Apple智能手机的增幅。

         尽管微软在10年10月推出了WindowsPhone,但是仍然不能阻挡它的下降趋势,在3个月内丢失了1.3%的市场份额。

     

    解析:

        上图是从11年1月至11年4月各主要智能手机平台市场份额

        可见,Android仍以5.2%的增长率雄居第一,RIM从第二位置摔了下来,iOS以1.3的增长率位居第二,同样推出新平台的微软并没有收回丢失的份额,而继续下跌。

        上图是从11年4月至11年7月各主要智能手机平台市场份额

        上图是从11年6月至11年9月各主要智能手机平台市场份额

        随着WP7平台的推广,微软市场份额跌幅开始减少。

    下面给出的图可以更清楚的看出来。

     

    最新的11年第4季度数据如下

    下面图来自Nielsen公司:

    http://www.bgr.com/2011/11/29/nielsen-android-extends-smartphone-platform-lead-apple-still-top-vendor/

    下面图统计时间为11年8月至10月

        由上图可以看出,WP7.5在11年9月份发布会上发布,微软开始缓慢收复市场份额,将来微软何去何从,让我们拭目以待。

     

        姊妹篇 - 分析当前移动市场之:对WindowsPhone7想说的话:

            http://blog.csdn.net/mr_raptor/article/details/7065072

     

    +------------------------------------------------- mr_raptor 原创 ---------------------------------------+

     

     

     

    展开全文
  • 最近在学习APICloud这个移动应用开发平台,真心感觉很强大。对快速开发出跨平台移动应用很有助益,大家感兴趣的可以了解一下。 APICloud 移动应用开发平台提供中国领先的“云端一体”的移动应用云服务,能够大幅...

    最近在学习APICloud这个移动应用开发平台,真心感觉很强大。对快速开发出跨平台的移动应用很有助益,大家感兴趣的可以了解一下。

    APICloud 移动应用开发平台提供中国领先的“云端一体”的移动应用云服务,能够大幅降低移动APP开发和管理的难度,让APP开发工作量从1个月缩减为1周。APICloud“云端一体”的理念,重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成,可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。APICloud致力成为中国领先的移动垂直领域云服务商,帮助中国数百万web开发者转化成移动APP专家!

    2016年1月12日,APICloud推出重量级产品SuperWebView,使APICloud移动技术覆盖面扩展至原生应用。让原生应用与APICloud技术完美融合。任何一款原生APP,集成SuperWebViewSDK后都可以大幅缩短迭代周期 支持功能动态增加,无需提交AppStore审核,用户无需重新下载,拥有比原生WebView更流畅更强大的用户体验。

    端API

    端API既APICloud跨平台APP引擎,能够支持开发优质用户体验的APP,以及完善的终端适配,尽可能短的开发周期,简单又跨平台的编码方式......这些几乎成了移动应用开发者的理想状态,这一切通过APICloud “端API”服务都可以实现。

    “端API”将大量移动应用所需的功能“模块化“封装,并且借助APICloud的模块机制规范的提供给开发者,通过JavaScript语言,一套代码同时调用iOS和Android两个平台的模块,从而实现“积木拼装”式的原生应用开发;支持多人协作开发、一键多终端调试等服务。同时支持开发者扩展自定义模块,让移动应用开发更具灵活性和个性化。

    为App开发者提供大量优质的原生模块,涵盖功能扩展、导航菜单、界面布局、开放SDK、设备访问、云服务对接等类型。

    云API

    APICloud的“云API”规划的初衷是为了让开发者只需要少量、甚至不需要服务端编码,就可以自动生成移动应用所需要的各种云服务接口。“云API”服务包括数据服务、推送、云修复和大数据分析等。

    APICloud的数据服务支持自动生成RESTful API,在移动场景中为APP提供灵活的数据服务支持。同时NoSQL的大量应用为APICloud的大数据提供了充分支撑。APICloud的“云API”提供基于ACL(Access Control List)和RBAC (Role Based Access Control)的访问控制模型安全机制,让开发者的移动应用在业务灵活性和安全性中找到平衡。

    APICloud的“云API”具有典型的“云”特性和“大数据”特性。

    为App开发者提供云端的API服务和数据存储服务,动态生成RESTful API,支持在线NoSQL数据表设计、API调试及用量分析;同时提供推送、云修复、大数据分析等服务, 极大的简化了服务器端开发工作。

    APP管理服务
    移动应用管理,针对移动设备应用的安全保护、访问、配置、更新、删除等策略和流程。通过控制和推送应用, 能集中监控应用的使用情况,对应用设置调整至相应策略以满足需求。从而具备对App的更高控制能力,实现自动化的应用配置,应用内数据安全管理及移动端应用到后台服务系统的安全数据传输等。

    推送

    个性推送:
    结合APP中的标签设置,针对不同属性的用户推送差异化信息,同时还可以根据平台等属性进行二次区分。

    定时推送:
    可预先设定推送任务,通过定时推送功能实现全程自动化推送,为你的推送服务设置一个推送管家。

    离线消息:
    推送消息时用户的APP不在线?只要设置了离线消息,即可让APP在上线后第一时间收到推送的内容。

    双向推送IM功能:
    支持消息上行、用户分组、好友添加、黑名单、单聊、群聊,几行代码让你拥有属于自己的微信。

    云修复

    通过云修复可实现App内快速更新,让App拥有自我修复能力,在App内部快速更新的过程中,支持断点续传,全面保障App自我修复的完整性。

    版本管理


    多维度的版本管理:
    支持iOS及Android版本的同步或异步管理,在控制台内流程化进行开发和版本管理,让版本概念更清晰。

    关闭失效版本:
    一键关闭失效或含有重大Bug的版本,可让用户快速跳过问题版本的升级或强制用户进行此版本的升级。

    数据统计

    App的新增及活跃用户数据,几分钟即可摆在开发者眼前,让开发者成为App的运营专家,支持开发者对App进行自定义事件统计,帮助开发者了解用户在App中的特定行为数据、支持版本、终端分布及错误报告。

    这么省心的开发平台,简直像为web开发者开发APP量身定做的,发现这个APICloud开发平台后做一个属于自己的APP的想法又冒出来了,哈哈。

    博主也在陆陆续续学习中,后续会持续的更新一些学习中的心得,当然也欢迎已经有使用经验的大神带我飞!大笑

    展开全文
  • 移动平台开发深度解析

    千次阅读 2018-08-09 22:14:33
    移动平台开发一直是移动开发者和前端开发者追求的的话题,从早期的cordova、ionic,到如今的react native、weex、kotlin native和flutter等,可以说如今的跨平台框架可谓百花齐放,颇有一股推倒原生开发者的势头。...
  • 十大移动开发平台

    千次阅读 2018-12-28 19:46:50
     WebBuilder是一款开源的可视化移动Web应用开发和运行平台。基于浏览器的集成开发环境,可视化和智能化的设计,能轻松完成常规应用和面向手机的移动应用开发;高效、稳定和可扩展的特点,适合复杂企业级应用的运行...
  • mui开发注意事项 Mui HTML5开发框架 mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验;这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文;想了解mui更详细的信息,请访问mui官网。 DOM...
  • SAP企业移动平台开发探索系列 - 序

    千次阅读 2013-03-22 20:34:53
    大家都知道移动应用市场这几年很火...最近花了点时间研究了一些SAP的移动平台相关的开发技术,把笔记整理一下,在这里和大家分享一下,计划写成一个系列,一起看看SAP移动平台移动开发人员带来了哪些功能和特性。 下
  • MLN,了解下?
  • 开始使用SUP了,SUP提供了非常强大的开发功能,我们可以通过它来帮我们生成代码来开发离线功能的手机应用。 基本流程是先创建MBO对象,然后根据这些MBO来生成Object API代码,接下来把这些代码拷贝到开发环境里,...
  • 现在市场上最主流的手机平台还是iOS和Android,所以不能少了我们的安卓平台开发啊,Android平台其实算是最简单的,因为它是使用Java来开发的,学起来最快最容易上手。 开发环境也是我们最熟悉的eclipse,是不是很...
  • 1.问题描述:在实现图片轮转时,若将 mui("#slider").slider({ interval:5000 }); 置于图片加载之前,图片不会显示, 解决措施:将其置于图片显示之后才会显示。...同上面的问题,会遇到报指针为null的异常。...
  • AngularJS是一个为动态WEB应用设计的结构框架。... 它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。...
  • 做完了iOS的离线应用后,可以尝试一下其它手机平台的离线应用开发,其实开发流程和方法都一样的,在SUP的最新版本里面,所有手机平台的object api都采用了相同的数据更新方式,所以生成的API代码使用方法完全一样。...
  • [移动应用]跨平台开发框架

    千次阅读 2019-04-10 12:17:28
    看了Flutter,NativeScript,React Native跨平台框架。 使用 其中React Native使用过,写过一些demo,在iOS和安卓上UI体验感还可以, 而NativeScript体验过,感觉也非常不错,与React Native比较像。 Flutter没有用...
  • 主流移动开发平台介绍

    千次阅读 2009-11-17 09:40:00
    移动开发平台期望 一次开发,多平台公用 一次开发,多机型移植 一次开发,多软件公用 开发公用软件开发库 主流开发平台 Brew(c/c++) SmartPhone(c++) Kjava(java) MTK(c) Symbian(c++) 只要Java ME能够...
  • 说一下主要的思路吧,大致架构的话就是通过SAP NetWeaver Gateway将SAP系统后台的BAPI/RFC转换成oData的Restfull Service,接下来就简单了,SUP提供了oData SDK,我们再到具体的移动开发环境引入这些libs,接
  • 随着智能手机平台的兴起,移动平台应用开发变成现在热门的话题,而在应用开发中,游戏的开发占有举足轻重的位置,而移动平台开发技术,尤其是游戏的开发技术在近几年的变化非常大,从最早门槛低的J2me技术开始,到...
  • 智能一代云平台(五):移动开发之环境搭建

    万次阅读 多人点赞 2016-04-24 17:28:45
    【前言】 谣传最近IT领域异常火热,而...于是雄心勃勃参加一个智能一代云平台移动端项目开发;之前有人做了第一版,现在我们需要重构。 【基本情况】 1、本次开发用到相关东西: 技术选型——Hybrid_APP; ...
  • 平台移动开发平台Flutter环境搭建

    千次阅读 2018-03-11 11:37:09
    话说,工作了几年之后发现移动开发的变化实在太快了,现在越来越多的跨平台移动开发框架出来,对原生的冲击也越来越大,RN,H5等移动开发框架非常火热,虽然有不少的问题,其中最让人不满意的就是性能问题了。...
  • UE4 移动平台游戏开发

    千次阅读 2015-08-06 21:29:24
    通用移动平台开发 Materials for Mobile Platforms Texture Guidelines for Mobile Platforms Lighting for Mobile Platforms Content Creation for Mobile Platforms ...
  • 微软今天宣布收购移动应用跨平台开发商 Xamarin,收购金额未知。Xamarin 提供了通过 C# 开发 iOS、Android 和 Windows 原生移动应用的工具,以及云端应用测试平台 – 完全符合微软的“跨平台”和“移动为先”战略。...
  • 智能一代云平台(六):移动开发之Ionic研究

    万次阅读 热门讨论 2016-05-21 07:58:26
    【前言】 Hybird_App项目开始之初负责人就给定了三个技术点的研究然后与大家伙儿分享,其中之一就是Ionic;当时兴致勃勃的报了名要研究它!项目正如火如荼的进行着,自己对它也进行了... 目前为止开发APP是这四...
  • 移动端app开发,原生开发与混合开发的区别

    万次阅读 多人点赞 2019-09-26 18:47:01
    目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相...原生开发(Native App开发),是在Android、IOS等移动平台上利用提供的开发语言、开发类库、开发工具进行App软件开发。比如Android是...

空空如也

1 2 3 4 5 ... 20
收藏数 104,652
精华内容 41,860
关键字:

移动平台