首页 > 代码库 > 9_bootstrap less 移动端

9_bootstrap less 移动端

chrome,firefox提供了"Device Emulation"功能,可模拟常见的各种浏览设备

android ADT或ios Xcode附带的设备模拟器,或第三方在线测试工具www.browerstack.com

 

Responsive Web Design:响应式/自适应网页设计

流式网格布局(Fluid:流式);

可伸缩的图片/文字

CSS3 Media Query技术,根据浏览设备的宽高调用不同的css

 

①允许用户缩放:head内声明viewport

<head>

<meta name="viewport" content="width=device-width,intial-scale=1,user-scalable=no">

</head>

viewport:视口,

属性:

width/height=数值

device-width/height:视口宽度/高度

initial-scale:初始时的缩放倍率

minimum-scale:允许的最小缩放倍率

maximum-scale:允许的最大缩放倍率

user-scalable:是否允许用户手动缩放,取值1/0/yes/no

②不使用绝对宽度:width:60%/auto;

③相对大小字体:em,rem:em 的实际大小是相对于其上下文的字体大小而言

<body>标签设置文字大小为100%,给其他文字都使用相对单位em;现代浏览器的默认文字大小都是16 像素:

body{font:normal 100% Helvetica,Airal,sans-serif;}                     //body字体大小100%=1em=16px

x{font-size:1.5em;}

④流式布局,浮动定位:布局用的各个区块的位置都是浮动的float:right/left;

⑤图片自适应:给图片设置阈值img{width:50%;max-width:100%;}

⑥CSS3 Media Query技术:根据浏览设备类型、特性不同加载不同css语句

mediaQuery:指css中可以获得浏览设备特性,如分辨率、方向、色彩深度等

1)link导入css文件,会增加用于页面渲染的HTTP 请求数量,从而导致页面加载变慢

<link rel="stylesheet" href="http://www.mamicode.com/xxx.css" media="screen and width=400px">

<link rel="stylesheet" href="http://www.mamicode.com/xxx.css" media="screen and (width:400px) and (max-device-width:600px)">

media="all/screen/handheld/print/tty/tv/projection/braille"     等  

浏览网页的设备类型:所有/彩色电脑屏幕/手持设备/文档打印/电传打字机/电视/幻灯/盲文

语法:width=xxx或(width:xxx);多个and连接;

@media 设备1 only  (选取条件)  not  (选取条件)  and (设备选取条件) ,设备2/设备2() {sRules}

device-width/height:显示屏幕/触觉设备宽高

max/min-device-width/height

width/height:渲染窗口宽高

max/min-width/height=xxx:<=xxx或>=xxx生效

resolution:分辨率

orientation(portrait|lanscape):设备手持方向横/竖向

aspect-ratio/device-aspect-ratio:画面/设备比例

color/color-index:对象颜色/颜色列表

2)css的@media规则:css片段中有选择的执行,建议

pc:@media screen and(min-width: 992px){}

pad:@media screen and (min-width: 768px) and (max-width: 991px) {}

phone:@media screen and (max-width: 767px) {}

真正的响应式布局,可以完全避免使用boot

 

bootstrap:中文网:http://www.bootcss.com/

由动态css语言less写成,

移动设备优先,

基于jQuery

不支持Windows下的Safari

解决浏览器兼容性:

html5shiv.min.js文件:解决IE8浏览器支持HTML5的新元素

respond.min.js文件:解决IE8浏览器支持css Media Query

基本模板:

<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>...</title>

    <link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap.min.css">

    <!--[if lt IE 9]>

      <script src="http://www.mamicode.com/js/html5shiv.min.js"></script>

      <script src="http://www.mamicode.com/js/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <script src="http://www.mamicode.com/jquery.min.js"></script>

    <script src="http://www.mamicode.com/js/bootstrap.min.js"></script>

  </body>

</html>

 

win10 Edge:取代了IE

html5shiv.js:用于让老IE识别HTML5新标签的JS

respond.js:让IE支持响应式网页(CSS3 Media Query)的JS

<html lang="zh-cn">  lang属性指定当前网页所用的自然语言,如zh、zh-cn、zh-tw、zh-hk、zh-sg、en、en-us、en-uk、ja、de等,有两个用途:(1)让浏览器的翻译功能明确当前页面的自然语言 (2)告诉屏幕阅读软件使用何种发音

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Cross User Agent Compatible,跨浏览器兼容性,指定使用哪种版本的IE内核, edge表示使用可用的最新版本的内容。

IE6 

IE7  7/6

IE8  8/7/6

----------------------------

IE9  9/8/7/6

IE10  10/9/8/7/6

IE11  11/10/9/8/7/6

----------------------------

win10 Edge: 取代了IE

html5shiv.js: 由@afarkas @jdalton @jon_neal @rem编写的一个用于让老IE识别HTML5新标签的JS

respond.js: 由Scott Jehl编写的一个用于让老IE支持响应式网页(CSS3 Media Query)的JS

css目录:bootstrap.css该框架的样式文件;bootstrap-theme.css主题文件

css Reset:x{padding:0;margin:0;}

box-sizing=content-box/border-box:设置元素盒模型

content-box:默认,宽度高度为内容框,宽度高度之外绘制元素的内边距、边框

border-box:宽度高度设置边框盒尺寸,内边距、边框在之内绘制

 

HTML5文件类型:bootstrap某些元素和属性需要html5

<!DOCTYPE html>

<html lang="zh-CN">.....</html>

移动设备优先:

<meta name="viewport" content="width=device-width,intial-scale=1">

全局样式:

@font-family-base、@font-size-base、@line-height-base变量作为排版的基本参数

@link-color为所有链接设置颜色,并当链接处于:hover状态才添加下划线

布局容器:

container定宽容器

container-fluid变宽容器

:before,:after防止子元素margin越界和浮动影响

按钮:.btn+.btn-*

       .btn-default默认样式

       .btn-danger/warning/success/info/primary颜色

       .btn-lg/sm/xs尺寸

       .btn-block块,width100%

 

图片:

<img src="" class="img-responsive" alt="Responsive image">:响应式图片

图片形状:img-rounded、img-circle、img-thumbnail、img-responsive

文本:

对齐:text-left/center/right/justify/nowrap

大小写:text-lowercase/uppercase/capitalize

颜色:text-default/primary/success/info/warning/danger:灰/蓝/绿/浅蓝/黄/红

列表:

ul/ol类:list-unstyled、list-inline;

dl类:dl-horizontal

表格:

基本表格.table

条纹状:.table-striped

带边框:.table-bordered

紧缩:.table-condensed

鼠标悬停:.table-hover

响应式表格,用于table的父元素:.table-responsive

状态类

浮动:.pull-left/right、.center-block、.clearfix清除浮动

显示:.show、.hidden、.invisible

背景:bg-default/primary/success/info/warning/danger

四种屏幕尺寸:lg,mg,sm,xs

大型PC屏幕(Large-lg);w>1200px;

普通PC屏幕(Medium-md):992px=<w<1200px

PAD屏幕(Small-sm):168=<w<991px;

PHONE屏幕(ExtraSmall-xs):w<767px

栅格布局:渲染速度快,底层用div+css实现

随着屏幕/视口尺寸的增加,系统会自动分为最多12列

使用:

最外层必需是div.container固定宽度或container-fluid宽度100%;栅格布局可以嵌套

容器中放置div.row,div.row中放置div.col,内容放置于div.col中

只有column可以作为row的直接子元素

列分为4组:col-lg-*  col-md-*  col-sm-*  col-xs-*         *为1-12数字,表示其跨越的范围

列向右偏移:调整某一列出现的位置,影响后续的列

col-offset-lg-1/2

列排序:跳转某一列出现的位置,但不影响后续的列,用于临时改变列位置

col-md-8  col-md-push-4 推,向右推动4列

col-md-4  col-md-pull-8     拉,向左推动8列

注意不同屏幕的列的适用范围:对更大屏幕有效,对更小屏幕无效

xs:xs/sm/md/lg适用

sm:sm/md/lg

md:md/lg

lg:lg

可以同时声明不同屏幕列宽:<div class="col-xs-12 col-sm-6">

可以指定在某屏幕下隐藏hidden-lg/...

可以自定义修改各类样式

 

表单:

单行输入框/多行文本域:form-control

多选和单选框:内联多选和单选框

下拉列表:form-control

提示文字:help-block

HTML5规范里指定checkbox、radio要用label包起来

(1)默认表单

       <form>

              <div class="form-group">

                     <label for="id">文字</label>

                     <input class="form-control" id="id">

                     <span class="help-block">提示文字</span>

              </div>

<div class="form-group">

                  <div class="checkbox">

                    <label><input type="checkbox">七天之内自动登录</label>

                </div>

           </div>

       </form>

(2)行内表单

       <form class="form-inline">

              <div class="form-group">

                     <label class="sr-only" for="id">文字</label>

                     <input class="form-control" id="id">

              </div>

       </form>

(3)水平表单

       水平表单要求在一行中有多个元素,它是栅格系统整合表单元素——栅格系统的变种:

       .container      <=>        .form-horizontal

       .row               <=>        .form-group

       .col-*-*          <=>        .col-*-*

       <form class="form-horizontal">

              <div class="form-group">

                     <div class="col-*-*">

                            <label for="id">文字</label>

                     </div>

                     <div class="col-*-*">

<input class="form-control" id="">

                     </div>

                     <div class="col-*-*">

<span class="help-block">提示文字</span>

                     </div>

              </div>

       </form>

字体图标:Glyphicons Halflings(收费);FontAwesome

项目中引入图表字体对应文件js、css、fonts(和css、js同级目录)

@font-face{

font-family:xxx;

src:url("../fonts/文件");}

 <link href="http://www.mamicode.com/css/bootstrap.css" rel="stylesheet">

<span class="glyphicons  glyphicons-*"> </span>

不要和其他组件混合使用;只对内容为空的元素起作用,定义class

在任何可以使用文字的地方都可使用,css控制样式;字体图标会继承样式

按钮组:

基本按钮组:

<div class="btn-group">

<button type="button" class="btn btn-default">...</button>

...同上

</div>

按钮工具栏:

<div class="btn-toolbar">

<div class="btn-group">...</div>

...同上

</div>

尺寸:.btn-group-lg|sm|xs

两端对齐:btn-group-justified

垂直排列:btn-group-vertical不能和btn-droup组合

按钮式下拉菜单:<div class="btn-group">/*下拉菜单内容<button><ul>*/</div>

面板:上中下结构

<div class="panel-group">

<div class="panel panel-default/primary/success/info/warning/danger">

<div class="panel-heading">主体头部</div>

                   <div class="panel-body">主体部分</div>

<div class="panel-footer">尾部</div>

</div>

.....

</div>

媒体对象:左中右结构

<div class="media">

<div class="media-left"><img class="media-object" src="http://www.mamicode.com/..." alt="..."></div>

<div class="media-body"><h4 class="media-heading">Media heading</h4></div>

<div class="media-right">....</div>

</div>

列表组:

<ul class="list-group">

<li class="list-group-item list-group-item-success/info/warning/danger"></li>

...

</ul>

定制内容:给列表组加入徽章组件,它会被自动放在右边

<h4 class="list-group-item-heading">

<p class="list-group-item-text">

路径/面包屑导航:

<ol class="breadcrumb">

<li><a href="http://www.mamicode.com/#">xxx</a></li>

<li><a href="http://www.mamicode.com/#">xxx</a></li>

<li class="active">xxx</li>  //当前页

</ol>

徽章:

<a href="">名<span class="badge">数量</span></a>

<span class="label label-default">标签</span>

label-default/primary/success/info/warning/danger:灰/蓝/绿/浅蓝/黄/红

水井/Well:class="well well-lg/sm"                        嵌入inset的简单效果

巨幕:延伸整个浏览器视口来展示网站上的关键内容

<div class="jumbotron">内容</div>

进度条:

<div class="progress">

  <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%

  </div>

</div>

颜色:progress-bar-success/info/warning/danger

条纹:progress-bar-striped

动画:条纹+active

缩略图:

<div class="row">

  <div class="col-xs-6 col-md-3">

    <a class="thumbnail">

            <img src="http://www.mamicode.com/...">

<div class="caption">内容</div>

    </a>

  </div>

  ...

</div>

页头:

<div class="page-header">

<h1>.......<small>.....</small></h1>

</div>

分页条:

<ul class="pagination">

<li>

            <a aria-label="Previous"> &laquo;</a>

    </li>

<li><a>1</a></li>

    ...

<li>

            <a aria-label="Next"> &raquo;</a>

    </li>

</ul>

尺寸:.pagination-lg/sm

分页器:

<ul class="pager">

<li><a href="http://www.mamicode.com/#">Previous</a></li>

<li><a href="http://www.mamicode.com/#">Next</a></li>

</ul>

下拉菜单:data-*

<div class="dropdown|dropup">

<button data-toggle="dropdown" type="button">触发元素</button>

<span class="caret"></span>

<ul class="dropdown-menu">//隐藏菜单

<li class="dropdown-header">...<li>标题

<li class="divider"><li>分割线

<li class="disbled">....<li>禁用

</ul>

</div>

js-api:$("button").dropdown(‘toggle‘)             data和js-api选一

events:$("button").on(事件,f(){})

事件:

show.bs.dropdown

shown.bs.dropdown

hdie.bs.dropdown

hideen.bs.dropdown

警告框:

<div class="alert alert-success/info/warning/danger alert-dismissable">//淡入淡出:.fade.in

<a href="http://www.mamicode.com/#" class="alert-link">...</a>//警告框中的链接

<span class="close" data-dismiss="alert">&times;</span>

//可关闭的警告框,不使用该标签则div.alert-dismissable不用写

</div>

折叠框:

data-toggle="collapse"

data-target="#collapseExample"

<div>

<a data-toggle="collapse" href="http://www.mamicode.com/#div1">收起</a>

<button data-toggle="collapse in" data-target="#div2" type="button">展开collapse in</button>

<div class="collapse" id="div1">内容</div>

<div class="collapse" id="div2">内容</div>

....

</div>

工具提示tooltip.js

<p data-toggle="tooltip" data-placement="left/top/right/bottom" title="内容">...</p>

$(function () {$(‘[data-toggle="tooltip"]‘).tooltip()})       //data和函数都必须调用

弹出框:

<p data-toggle="popover"  data-placement="bottom" data-content="内容">点击弹出框</p>

title="标题"

$(function(){$(‘[data-toggle="popover"] ‘).popover();})          //data和函数都必须调用

模态框:子窗体不关闭,父窗体不能获得用户的操作焦点

<button type="button" class="btn" data-toggle="modal" data-target="#id"></button>//或a标签的href="http://www.mamicode.com/#id"

<div class="modal fade" id="id">              //半透明的背景层,fade淡入淡出

<div class="modal-dialog">        //定位/宽度

<div class="modal-content">      //背景/边框/阴影

<div class="modal-header">//头部

<p class="modal-title"></p>

<span class="close" data-dismiss="modal">&times;<span>

</div>

<div class="modal-body">主体</div>

<div class="modal-footer">尾部</div>

</div>

</div>

</div>

标签页/导航:nav+

<ul class="nav nav-tabs">

<li class="active"><a data-toggle="tab">...</a><li>

<li><a data-toggle="tab">...</a><li>

...

<div class="tab-content"><div class="tab-pane active" id="home"></div></div>

</ul>

胶囊式标签页:nav nav-pills

垂直标签页:nav nav-pills nav-stacked

两端对齐:nav nav-tabs nav-justified

js-api:$("#mytab a:last").tab("show")

 

$(‘#myTab a‘).click(function (e) {

  e.preventDefault()

  $(this).tab(‘show‘)

})

导航条:navbar

<nav class="navbar navbar-default">

//默认/反色:navbar-default/inverse;相对定位:默认;固定:navbar-fixed-top|bottom;

<div class="container-fluid">

<!--导航条头部,包含商标+汉堡包-->

<div class="navbar-header">

<a class="navbar-brand">

<img src="">//商标

</a>

<a class="navbar-toggle" data-toggle="collapse" href="http://www.mamicode.com/#id">//按钮

<span class="icon-bar"></span>//icon-bar行内块,显示,sr-only隐藏/绝对定位

       <span class="icon-bar"></span>

       <span class="icon-bar"></span>

</a>

</div>

<!--导航条折叠部分,包含菜单、表单、文字...排列:navbar-lef|right-->

<div class="navbar-collapse collapse" id="id">

<ul class="nav navbar-nav">                   

<li class="active"><a>...</a></li>

<li><a>...</a></li>

</ul>

<form class="navbar-form navbar-left">//导航条表单

       <div class="form-group has-feedback">//has-feedback:相对定位

<label class="sr-only" for="kw">请输入搜索关键字</label>

              <input type="text" class="form-control" placeholder="输入关键字" id="kw">

<span class="glyphicon glyphicon-search form-control-feedback"></span>//绝对定位

      </div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<button type="button" class="btn btn-default navbar-btn">导航条按钮</button>

<p class="navbar-text">导航条文本</p>

<a href="http://www.mamicode.com/#" class="navbar-link">非导航链接</a>

</div>

</div>

</nav>

轮播:

<div class="carousel slide" id="DIV">// data-ride="carousel" data-interval="3000"

<!-- 序号标志 -->

<ol class="carousel-indicators">

       <li data-target="#DIV" data-slide-to="0" class="active"></li>

    <li data-target="#DIV" data-slide-to="1"></li>

    <li data-target="#DIV" data-slide-to="2"></li>

</ol>

<!-- 轮播广告的内部:广告本身+每个广告上的文字 -->

<div class="carousel-inner">

<div class="item active">

                   <img src="http://www.mamicode.com/..." >

                   <div class="carousel-caption">内容</div>

</div>

<div class="item">

                   <img src="http://www.mamicode.com/..." >

                   <div class="carousel-caption">内容</div>

</div>

....

</div>

<!-- 上/下一张按钮 -->

<a class="carousel-control left" href="http://www.mamicode.com/#DIV" data-slide="prev">   //carousel-control绝对定位

    <span class="glyphicon glyphicon-chevron-left"></span>            //字体图标

</a>

<a class="carousel-control right" href="http://www.mamicode.com/#DIV" data-slide="next">

       <span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

$(‘.carousel‘).carousel({//默认

       interval: 5000,

pause:"hover",

wrap:true,

keyboard:true

})

$(‘#myCarousel‘).on(‘slide.bs.carousel‘, function () {//左右标签事件

  // do something…

})

导航滚动事件:

<body data-spy="scroll" data-target=".NAV">

       <div>             

<div class="NAV">

       <ul class="nav nav-tabs">//导航

              <li class="active"><a href="http://www.mamicode.com/#fat">111</a></li>

              <li><a href="http://www.mamicode.com/#mdo">222</a></li>

</ul>

</div>

              <div data-spy="scroll" data-target="#NAV">

            <h4 id="fat">111</h4>

            <p>11</p>

            <h4 id="mdo">222</h4>

            <p>22</p>           

        </div>

</div>

</body>

body {

  position: relative;

}

$(‘body‘).scrollspy({ target: ‘.navbar-example‘ })

bootlint:官方提供的检测工具,在使用了Bootstrap页面上,用于自动检测某些常见的HTML和class错误,

<script>

 /*Bootlint用于检测文档中的HTML和Class错误*/

    (function () {

        var s = document.createElement("script");

        s.onload = function () {

            bootlint.showLintReportForCurrentDocument([]);

        };

        s.src = "http://www.mamicode.com/js/bootlint.js";

        document.body.appendChild(s)

    })();

</script>

 

插件函数调用:

定义:jQuery.fn.max=function(){}

调用:$("li").max()

bootstrap插件函数调用:

js方式调用:$("a").dropdown()

data-*属性方式调用:<a data-toggle="dropdown"></a>

底层实现:$(‘[data-toogle="dropdown"]‘).click(

function(){$(this).dropdown();

})

 

无障碍Accessible阅读:WAI-ARIA标准

role=""          HTML5标签,指定当前元素的实际网页角色;

aria-*=""

 

Modernizr是一个用于检测浏览器功能的开源JavaScript,功能检测

解决老版本的html和css兼容:<script src="http://www.mamicode.com/js/modernizr.js"></script>

给IE6、7、8 追加min/max媒体查询功能:

<!--[if lte IE 8]>

<script src="http://www.mamicode.com/js/respond.min.js"/></script>

<![endif]-->

 

 

常见的动态层叠样式语言:Scss/SCSS;Stylus;Less

Less:可在客户端浏览器上运行,也可在服务端上运行(Node.js、Rhino)

客户端使用:

<link rel="stylesheet/less" href="http://www.mamicode.com/style.css">html引入样式文件

<script src="http://www.mamicode.com/less.js"></script>引入编译程序

服务器端使用:

安装nodejs解释器

下载less编译程序

在命令运行less转换程序;或者把less转换程序配置为WebStorm中的"文件监视器"

cmd:node  e:/npm/node_modules/less/bin/lessc   e:/1.less  e:/1.css

    解释器 目标js文件 源文件 目标文件

node  e:/npm/lessc.cmd  e:/1.less  e:/1.css

webstorm中配置fileWatcher,让它所有的less文件的修改,立即调用上诉命令行程序进行编译

Tools——file watchers——+less program:...\npm\lessc.cmd 则编写less时自动编译

注释://不会转换到生成的css文件中            /**/会被转换到生成的css文件

运算,任何数字、颜色、字符串等都可以进行运算:#888/4

变量:@nice-blue: #5B83AD;

@light-blue: @nice-blue + #111;                     //变量值:所有样式的值

混合/属性集合:

①.bordered{...}          技巧:.bordered(){}//less样式,和css样式区分

②.bordered(@x:0,@y:0,@blur:1px,@color:#000){

border:@arguments;

border-radius:@blur+1px;}

.box{.bordered(2px,5px);}

③.bordered(@x) when (@x<3px){

border:@w solid #aaa;}

.bordered(@x)when(@x>=3px){...}

.box(.bordered(2px);)

嵌套:

body{

color:#aaa;

.nav{font-size:12px;}

>.logo{          //>子代选择器

width:300px;

&:hover{text-decoration:none;}//body>.logo:hover

}

}

函数:

image-width/height("URL"):img{width:image-width(url);}

rgba(red,green,blue,alpha);

hsl(hue,saturation,lightness);

darken(color,num);                           颜色变深20%后的值 darken(color.20%)

lighten(color,num);                           颜色变浅/亮

ceil(num)                                         向上取整ceil(970px/3);

floor(num)

max(n1,n2...)

文件导入:

@import "xx.less/xx";

@import "xx.css";不推荐;css也可以导入,也不推荐

 

 

 

WebApp:网页应用,网页版微信,网页版轻应用,本质java web

jQM:jQuery Mobile          Sencha Touch

NativeApp:原生应用,借助SDK(Software Development Kit)提供的原生组件进行编程生成的安装包(应用)

apk ipa:android iOS

Hybrid App:混合应用,介于WebApp和NativeApp直接的app,兼具原生开发良好的用户交互体验的优势、WebApp跨平台开发的优势

phoneGap(基于HTML、CSS、JS的快速开发平台)+jQM

 

安卓开发环境:

下载并安装jdk

配置java环境变量

下载adt(Android Developer Tools)

 

eclipse:

新建WebApp:new——android application project——package name:com.tarena.demo01

创建模拟器(虚拟机)android virtual device manager:

New——名字avd name:text;安卓版本device:4.0 wvga;SD容量sd card:size:512(M)

Details:查看信息

Start:启动

默认打开页面:res/layout/activity_main.xml

AndroidManifest.xml包名,版本代码,版本名称

permissions使用:add-name-uses permissions用户权限-name-android permission internet

 

http://www.androd...工具

优秀的开源项目:

errors:

解决方案:在packageExplorer中,查找X符合定位工厂,找到具体是哪个文件出了错,

打开文件,定位具体哪一行出了错误

字体:window-preferences-general-appearance-colors....-java-java editor-edit-courier new

 

src——com.xxx.xxx——xxxx.java配置,使WebView加载html页面:

package com.example.demo03;

 

import android.os.Bundle;

import android.app.Activity;

import android.util.Log;

import android.view.Menu;

import android.webkit.WebChromeClient;

import android.webkit.WebView;

 

public class MainActivity extends Activity {

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

       

      //创建WebView组件

        //alt+/自动补全 会自动import依赖

        WebView wv=new WebView(getApplicationContext());

        //加载页面

        wv.loadUrl("file:///android_asset/index.html");

        //设置wv,让它执行js

        wv.getSettings().setJavaScriptEnabled(true);

        wv.setWebChromeClient(new WebChromeClient(){

        @Override

        @Deprecated

        public void onConsoleMessage(String message,int lineNumber,

                String sourceID){

            super.onConsoleMessage(message, lineNumber, sourceID);

            Log.e("test","日志为"+message+"行号为"+lineNumber);

        }

        });

        //将webNiew组件显示在内容视图中

        setContentView(wv);

       

//        setContentView(R.layout.activity_main);

    }

//    @Override

//    public boolean onCreateOptionsMenu(Menu menu) {

//        // Inflate the menu; this adds items to the action bar if it is present.

//        getMenuInflater().inflate(R.menu.main, menu);

//        return true;

//    }

}

 

AndroidManifest.xml配置:

配置主题:取消标题栏android:theme="@android:style/Theme.NoTitleBar" >

原始主题(默认):android:theme="@android:style/Theme.NoTitleBar" >

Permissions配置CAMERA和INTERNET

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.CAMERA"/>

 

android功能目录:

src 存储的java(逻辑)

gen 自动生成的(R.java)

assets 将不希望被流处理的文件放到,将前端代码放到此文件夹

bin 存放的生成的应用安装包

libs 将封装好的jar包放到此目录

res 资源文件(图标/图片/布局文件/菜单/变量)

AndroidManifest.xml版本号的配置、权限的配置、activity

 

 

jQM:

引入文件

<link rel="stylesheet" href="http://www.mamicode.com/jqm/jquery.mobile-1.4.5.css">

<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.3.js"></script>

<script type="text/javascript" src="http://www.mamicode.com/jqm/jquery.mobile-1.4.5.js"></script>

 

data-role=”page”                        jqm的页面

data-role=”header”                     基础page的页头

data-role=”footer”               基础page的页尾

class=”ui-content”

<a href="http://www.mamicode.com/#page2">跳转到page2</a>              

<a href="http://www.mamicode.com/222.html" data-transition="reverse">点击跳转到222.html</a>          

<button onclick="$.mobile.changePage(‘222.html‘)">点击跳转到222.html</button>     

 

data-role=”page” id=”page2”             id可用a href=http://www.mamicode.com/”#page1”跳转

class=”ui-content”

<a href="" data-rel="back">返回上一页</a>

多页面跳转

href="http://www.mamicode.com/#id"

href="http://www.mamicode.com/**.html"

js:$.mobile.change(‘xxx.html’)

转场transitions/跳转动画

data-transition="reverse"

js:$.mobile.changePage(‘**.html’,{‘transition’:’slide’})

返回上一页

data-rel=”back”

页面主题data-theme="a"

 

 

stackoverflow.com

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

如何申请云服务器,获得免费的域名:

新浪云账号登陆,新建Web应用,申请免费二级域名

登陆Web应用,上传自己网站代码,

使用PC/手机远程访问云服务器应用

 

微信开发:https://open.weixin.qq.com

用途:移动应用调用微信开发接口,网站调用,公众账号(服务号/订阅号/企业号);

9大接口:语音识别接口,客服接口,OAuth2.0网页授权接口,生成带参数的二维码接口,获取用户地理位置接口,获取关注者列表接口,用户分组接口,上传下载多媒体文件接口

商业化微信开发要求必须使用一级域名,测试时可用SAE提供免费二级域名

二级域名:

邮箱——微博账号

——申请主机空间SAE:Sina App Engine支持MySQL、PHP的Web应用(http://sae.sina.com.cn)

——应用->代码管理Git/SVN工具上传代码(需安装客户端SVN)

——WebStorm检出服务器上项目文件

——设置域名解析服务器,SQL连接第一个参数改为网络sql地址

——访问二级域名

一级域名(商业化):

注册公众平台账号https://mp.weixin.qq.com

——设置公众号,JS接口安全域名(域名必须是一级域名且通过ICP备案)

——申请开发者后,获得AppID(应用ID)和AppSercret(应用秘钥,唯一)

微信网页开发工具包JS-SDK(拍照,选图,语音,位置,分享,扫一扫,卡券,支付等功能)

使用:绑定域名——引入JS文件——通过config接口注入权限验证配置——ready接口处理成功验证——error接口处理失败验证

地理位置接口:

使用微信内置地图:

wx.openLocation({

latitude:0,                                  //纬度,浮点数,90~-90

longitude:0,                               //经度,浮点数,180~-180

name:‘‘,                                      //位置名

address:‘‘,                                   //地址详情说明

scale:1,                                      //地图缩放级别,整形值,1~28,,默认最大

infoUrl:‘‘                                    //在查看位置界面底部显示的超链接,可点击跳转

});

获取地理位置接口:

wx.getLocation({

type:‘wgs84‘,

success:function(res){

var lat=res.latitude;                    //纬度,90~-90

var lon=res.logitude;           //经度,180~-180

var speed=res.speed;            //速度,以m/s计

var accuracy=res.accuracy;  //位置精度

}

});

图像接口:

拍照/手机相册中选图接口:

wx.chooseImage({

count:1,

sizeType:[‘original‘,‘compressed‘],       //原图/压缩图

sourceType:[‘album‘,‘camera‘],           //相册/相机

success:function(res){

var localIds=res.localIds;

}

});

上传图片接口:

wx.uploadImage({

lovalId:‘‘,                                    //需要上传的图片的本地ID

isShowProgressTips:1,                //默认为1,显示进度提示

success:function(res){

var serverId=res.serverId;     //返回图片的服务器端ID

}

});

 

小技巧:

box-sizing:border-box/content-box;高度和宽度,在高度宽度内绘制内边距,边框/默认,在高度宽度之外绘制元素的内边距、边框

js控制Transition动画:

css3 transition,css3 Keyframes,js/jQuery1/2定时器动画,requestAnimationFrame技术jQuery3

transition: box-shadow 250ms linear;

@import{}

@font-face {                      /*CSS指令:创建一个新的字体*/

      font-family: ‘FontAwesome‘;

      src: url(‘fonts/fontawesome-webfont.ttf‘),url(‘fonts/fontawesome-webfont.eot‘),url(‘fonts/fontawesome-webfont.ttf‘);

}

使用服务器端字体:FontAwesome

      #box {

      font-family: "FontAwesome";

      color: red;

      font-size: 10em;

}

box.innerHTML = ‘\uf002 \uf122‘;

    #control-container span {

      font-family: "FontAwesome";

    }

    #control-container span:before {

      content: ‘\f002‘;

    }

 

9_bootstrap less 移动端