2014年---移动端webapp个人年度总结
我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了。(一入门就是移动端开发,是幸运也是艰辛的开始)。
我是自学前端的,当然,对Bootstrap,JQuery mobile这2个UI框架肯定是熟悉他们是怎么使用,只是没必要再深入了。因为我当时应聘介绍自己懂这些框架都没有一家公司来招我,原因待会解释。
既然是零基础入门的话,那么我先分享下我该怎么学习?
我相信大部分人都了解一个房子的构造建成了吧,那么我用比如的方法来给自己去解释网站到底是个怎么回事?
后台其实就等于房子的地基;前端就是你看到的房子建成后的样子。
前端构成部分由html,css,js;HTML就是你想把自己的房子构造成什么样子,比如说哪个位置是主人房,哪个位置是客房等等布局;CSS就是你外观和里面的装修想什么样的风格呢?JS就是水泥和砖头,没了它们,你的房子很容易毁掉。
先说一个很重要的入门前提;开发工具的推荐:
1,HBuilder,这个是国外回来的中国团队,目前是免费使用,更新周期快,代码提示多;其他的自己百度;
2,Notepad++:你的电脑就算卡机也可以照样打开文件来进行编码,当然了,他只适合做小网站;剩下的就是自己百度。
注意:只要你使用的软件是DW,100%是处于新手阶段,不要跟我说高手大神会用txt来写代码,是可以,但是他们会更注重效率;所以想写出高效的代码和提升自己的能力,还是推荐你找找合适你的开发工具吧!
说回刚刚的话题,为什么只懂UI框架会找不到工作呢?
Bootstrap,JQuery mobile,2个框架的区别:
Bootstrap:响应式设计布局,PC端和移动端都OK;响应式就是你在不同的移动屏幕看到情况会是不一样;比如:在PC端你看到的导航栏是放到头部的,在pad,手机上你看到的导航栏是隐藏到右边或左边去了,只是用一个图标提示下给你看。(自适应布局是指你在所有的移动屏幕上看到的结果都一样,只是大小发生变化了)。
JQuery mobile:一般只是做移动端。
2个框架的缺点普遍存在的情况:
1,一般情况下企业是会有自己的设计师来做设计布局,假如要求用这些框架的话,设计师必须要了解这2个框架里面的组件和插件,再来进行整体布局(包括效果颜色)。
2,使用过渡状态转到下一页面会出现BUG,Bootstrap我测试过,当时JQuery mobile确实是存在的,而且网上你找到的解决方案一般情况下还是不能完全解决这个问题。产生这个问题的,我分析的有2种情况:1,就是移动设备兼容问题,他的系统版本低,根本不支持该属性;2,webapp的缺陷就在这。
3,2个UI框架就算是min版的文件大小也大于100KB,企业放弃使用的原因之一,因为文件太大会占用更多的资源。
4,icon字体图标,他们有好处也有坏处,比如说我现在的公司,2个设计师都不愿意使用,因为他们说不合适我们的页面美化方面的。我们做前端考虑到的是性能方面的,还有执行效率。
我所使用到的HTML页面标签:
Section,div,artical,p,ol,ul,li,header,footer,span,form,input,label,h1,h2,h3 ;详细说明我就不说了,只给新手说下,为什么W3C那么多标签,只使用16个就可以把整个项目解决了?
原因是不要以为标签多,我们就一定要使用到它的,我们要的是使用广泛的,易记的。
稍微解释下,块级元素和行内元素是什么意思?
块级元素就是他占满一行的;行内元素就是他的多个同类可以同时在同一行。
下面讲解下,head标签里面我们在移动端一般都放什么?
Title,meta,link,3个标签会比较多,解释请看:
Title:该网页的标题,这个标题一般会显示在浏览器打开该网页时,最地址栏上面可以简单文字段。
Meta:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black"name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no"name="format-detection"/>
<meta content="email=no"name="format-detection"/>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport" />
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;user-scalable: 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码
第五个meta标签:用于忽略将页面中邮件地址
第六个就是最大的高度限定在568Px以内,这个可以忽略,因为我们都会用滑动来代替;当然了,可以用在页面布局不多的地方!
Link:一般只是引入css文件用的,对于import大部分前辈都说不好,而且他一般也只写在css文件内。我们假如打开一个刚刚下载到本地的网页或框架,浏览页面时很慢,估计也就是在css里面引入了谷歌文件,因为我们国内,谷歌是被封杀的!
Javascript呢?(一般情况下,把引入文件放到</body>前面的)
下面解释放到head和</body>2个不同地方的区别:
放在head就是普遍需要用户进行点击或各种操作才触发的事件。
放在</body>里面就是用户来看之前就执行了。
现在我们来看看CSS的问题了:
1,我相信99%做过1个项目的人都会了解:reset.css(重置文件或common.css,base.css,名称不一样而已,用途都一样。)
我会共享我自己今年所总结积累好的文件写到common.css里面。
@charset "utf-8";html,body{background:#f0f0f0;color:#505050;font-size:62.5%;-webkit-user-select:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-touch-callout:none;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}body,button,input,select,textarea {font:14px /5b8b/4f53,'Helvetica Neue',Arial,'Liberation Sans',FreeSans,'Hiragino Sans GB',sans-serif/"Microsoft YaHei"/"微软雅黑";line-height:20px;}h1{font-size:24px;}h2{font-size:22px;}h3{font-size:18px;}@media only screen and (min-width:360px) { h1{font-size:28px;} h2{font-size:26px;} h3{font-size:22px;} body,button,input,select,textarea {font-size:18px;line-height:26px;}}h1,h2,h3,h4,h5,h6 {font-weight:normal;}html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}/*阻止旋转屏幕时自动调整字体大小*/textarea{resize:none;}/*取消按钮在inphone上的默认样式*/input[type=button]{-webkit-appearance:none;outline:none} input::-webkit-input-placeholder{color:#F0F0F0;}textarea::-webkit-input-placeholder{color:#F0F0F0;}input::-webkit-input-speech-button {display:none}table {border-collapse:collapse;border-spacing:0;}th {text-align:inherit;}fieldset,img {border:none;}abbr,acronym {border:none;font-variant:normal;}del {text-decoration:line-through;}ol,ul {list-style:none;}caption,th {text-align:left;}sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup {top:-0.5em;}sub {bottom:-0.25em;}ins,a,a:hover {text-decoration:none;}a:focus,*:focus {outline:none;}.clearfix:before,.clearfix:after {content:"";display:table;}.clearfix:after {clear:both;overflow:hidden;}.clearfix {zoom:1;}.clear {clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;}.hide {display:none;}.block {display:block;}.outL{white-space:normal;word-break:break-all;width:100px;}.outH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width:100px;}/*布局*/.fl{float:left;display:inline;}.fr{float:right;display:inline;}.cb{clear:both;}.cl{clear:left;}.cr{clear:rigth;}.rel{position:relative;}.abs{position:absolute;}.tac{text-align:center;}.tal{text-align:left;}.tar{text-align:right;}.dib{display:inline-block;}.vab{vertical-align:bottom;}.vam{vertical-align:middle;}.vat{vertical-align:top;}/*网格*/.box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:100%;text-align:center;padding:5px 0;}.grid,.wrap,.grid:after,.wrap:after,.grid:before,.wrap:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.grid{*zoom:1}.grid:before,.grid:after{display:table;content:"";line-height:0}.grid:after{clear:both}.grid{list-style-type:none;padding:0;margin:0}.grid>.grid{clear:none;float:left;margin:0 !important}.wrap{float:left;width:100%}/*网格*//*flex*/.col{height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;display:-webkit-flex;flex-direction:column;}.row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;flex-direction:wrap;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;width:100%;height:auto;margin:auto;}.flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1;}.flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2;}.flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3;}/*flex*//*容器*/.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;padding:5px 5px 60px 5px;overflow:auto;margin-top:44px;-webkit-overflow-scrolling:touch;}/*头尾*/header,footer{position:fixed;right:0;left:0;z-index:1;text-align:center;background:#CCCCCC;}header{top:0;height:44px;}footer{bottom:0;}/*宽度*/.w100p{width:100%}.w20p{width:20%;}/*边距*/.m5{margin:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}
View Code
注意事项:
1、你使用display:inline-block浏览器是会有默认边距产生的,所以假如想几个div变成行内的而且无边距,那么最好的方法是使用同一方向的浮动(float),来解决无边距的一列。
2、引入我的css文件后,你会发现为什么我在字体上要进行个断点设置(@media),我认真的分析过,webapp页面的由于在320px,360px,480px,3个不同viewport宽度大小的情况下制作,那么字体大小肯定要进行相应的设置,不然你在320px的情况下看到的效果跟在480px下看到的是一样。注意:字体是不会自适应的,只有自己进行设置才可以达到预期效果。
3、图标是同样不会自适应的,只有图片可以设置100%,所以图标假如设置100%就会影响整体布局,宽度可以在Img里面写width=”30”这样(30是图片的宽度30px)。
4、除了有时header,footer是要求固定fixed定位外,那么中间要做一个容器/外套给他,我们需要在header下面使用wrapper/container放内容。这个怎么设置,你可以看我的css文件已经做好设置而且包括了案例方便查看。并且可以进行内容过多可以滑动。(关于fixed定位的问题,我多次测试的结果发现,在2.3系统以下的低端手机是不支持fixed定位的,是会出现设备兼容问题:向下滑动时,固定后也会随着页面移动,4.0以上的系统是可以支持,相对较好的解决方法是:使用iscoll.js;会有卡顿,但是对于低端机来讲是不错的解决方案。)我个人是选择放弃2.3系统以下的用户群,因为现在的手机1000元左右就可以买到4.0系统以上的手机,所以,我有理由相信连手机都不愿意更换的普遍有2种情况:1,没钱,2,根本不可能成为你的用户;我不会像PC端那样来兼容IE6-8,我现在唯一兴幸的是公司现在没特定标准要求,所以我可以自由选择,我只需要知道这个解决方法就行;我既然放弃低端机市场,那么我就会以最新的技术来进行布局,所以我不使用iscoll.js,直接用我上面的那个wrapper来作为外套就行。
5、我们如果需要将内容实现2边留有边距,使用的是padding而不是margin。因为设置为margin的话,会出现左边有空白边距,右边反而是贴边的情况。
6、我们做前端写页面最烦的就是class命名,我不喜欢使用下划线,所以我们可以这样来定义class命名方式:asideContent等情况。还有一种叫意义命名;比如说颜色:红色,我们可以定义为:.red:color:red;模块呢?我们可以这样来做:比如我最近做的一个WP手机风格的webapp页面项目。大家都应该了解他是色块组成,颜色,大小等都不一样。
我的解决方案是:(在销售模块,定义为sell)
sellHead:内容的头部;sellFoot:内容的尾部;
如此类推就有:sellMain;sellContent;sellTitle;sellList;sellTab;sellMenu;sellBtn;sellMsg;sellBanner;sellCol;
我相信你们看到英文都容易的理解这个是什么意思,位置对应情况。
7、从有了前端这个职称后,就逐渐开始流行:OOCSS的写法来布局CSS页面了。是什么意思?就是用面向对象编程的思想来写CSS,因为现在有了Less,Sass这些了,CSS都可以实现编程了,我们前端的压力就越来越大了。最主要的一点就是实行模块化,代码可以重复使用。对于没编程基础的童鞋来说,真心不懂这些专业的术语是个什么东东?大家可以看看下面我的解释:
(1)、.sellContent{width:200px;height:200px;margin:10px;padding:10px}
注意:背景颜色,边框,圆角这些就不要写在里面了
(2)、.bg{background:#00CC66};在HTML页面的class=”sellContent bg”。
(一)、实现的是class组合,同时这2个class类是哪里需要往哪里放,需要什么呢?当然是他里面的属性,只要是他需要该属性的都可以放到一起组合。(组合一般情况下不要超过4个)
(二)、以前我们写css可能是遇到到哪个div需要就给他定义那些属性值,而且整个页面下来重复的特别多;现在我这样方式不需要了,我们可以用并列式选择器:.sellMain,.sellContent,.sellTitle{border:1px solid #cccccc},减少代码重复的情况,同时继承选择器的作用我们就要注意了:一个项目下来,我们写的页面会达到100个以上,假如我写 ul li{display:inline-block}这样的话,那么你每个页面只要有li的,他都会是变成行内元素。
所以,我们写页面前必须要先把整个项目的所有页面看一次,脑袋进行一次布局,这样就不会出现这类的问题了。要全面的去理解这个OOCSS的写法,建议你去下载Bootstrap框架文件来看他的源码,和页面案例的布局。
8、区分min-width和max-width的区别,英文我们都看懂,但用的话就不一定了;min-width:最小的宽度为多少的时候开始执行下面的断点布局;max-width:最大的宽度为多少的时候停止执行下面的断点布局。
如:min-width:360px and max-width:480px,就是下面的类只在360px-480px之间执行。
注意:有时候我们在谷歌或火狐浏览器做测试的,然后放到真机测试时会发现,真机有时候会比浏览器显示的viewport宽度还要小3px—5px。
9、做头部的时候我往往最讨厌的就是图片和文字对齐;现在我找到新的解决放案了:
(1)、可以把这个img给他一个下边距:负值;
(2)、有3个属性值可以选择来用vertical-align:top/middle/bottom 。
10、我们做移动端的时候,凡是有a标签点击转链接的地方都会系统自带一个透明层的点击效果,取消点击高亮:-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;
11、响应式布局与自适应布局:(以下仅为个人理解)
(1)、响应式布局,我的理解是在电脑,平板,手机,分别有不同的页面布局。
(2)、自适应布局,我的理解是在电脑,平板,手机页面布局一样,只是文字大小,图片大小会发生变化而已。
在电脑上,使用flex-wrap:wrap(伸缩进行换行)这个来进行布局是可以达到响应的,但是在平板和手机就目前来说还不支持这个属性。
我推荐的最佳方案是使用flex布局。(只是不用伸缩换行属性)
下面是我做的一个简单案例:
注意:style.css引用的是上面提供的common.css文件:
<!DOCTYPE html><html><head> <title>首页</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!--开发后删除--> <meta http-equiv="Cache-Control" name="no-store" /> <meta http-equiv="refresh" content="3" /> <!--开发后删除--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <link rel="stylesheet" href="css/style.css" /> <style> .flexcontent{margin:5px 1px;-webkit-flex:1;flex:1;-webkit-box-flex:1;background:hotpink;} </style></head> <body> <header> <ol class="row"> <li class="m5"> <img src="img/back.png" width="30" /> </li> <li class="flex3 m5"> <h1>header</h1> </li> <li class="m5"> <img src="img/down.png" width="30" /> </li> </ol> </header> <section class="wrapper"> <ul class="row"> <li class="flexcontent p5">1</li> <li class="flexcontent p5">2</li> <li class="flexcontent p5">3</li> <li class="flexcontent p5">4</li> <li class="flexcontent p5">5</li> </ul> <ul class="row"> <li class="flex1 flexcontent p5">1</li> <li class="flex3 flexcontent p5">2</li> <li class="flex2 flexcontent p5">3</li> </ul> </section> <footer class="row tac"> <ul class="col w20p"> <li class="flex1 pt5"><img src="img/back.png" width="20" /></li> <li class="flex1"><span>底部</span></li> </ul> <ul class="col w20p"> <li class="flex1 pt5"><img src="img/back.png" width="20" /></li> <li class="flex1"><span>底部</span></li> </ul> <ul class="col w20p"> <li class="flex1 pt5"><img src="img/back.png" width="20" /></li> <li class="flex1"><span>底部</span></li> </ul> <ul class="col w20p"> <li class="flex1 pt5"><img src="img/back.png" width="20" /></li> <li class="flex1"><span>底部</span></li> </ul> <ul class="col w20p"> <li class="flex1 pt5"><img src="img/back.png" width="20" /></li> <li class="flex1"><span>底部</span></li> </ul> </footer> </body></html>
View Code
12、CSS3的animate.css动态的使用介绍:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>animate.css 使用方法</title><link rel="stylesheet" type="text/css" href="css/animate.min.css" media="screen" /><style>#bridge{ border-radius: 15px; background: url('images/bridge.png') no-repeat 50% 50%; margin: 0 auto; width: 400px; height: 250px; z-index: 20; position: static;}</style></head><body><div id="bridge" class="animated flash"><!--只需要在相关的块级标签内添加class;例如:class="animated bounceOutLeft"class="animated flash"--></div></body></html>
View Code
详细可以参考以下网站来获取class名:
http://daneden.github.io/animate.css/
13、移动端开发测试工具:
我做测试一般会同时用2个工具来测试页面:
(1)、使用WAMP来建立内网:修改httpd.conf文件;下面是我共享的代码:
## This is the main Apache HTTP server configuration file. It contains the# configuration directives that give the server its instructions.# See <URL:http://httpd.apache.org/docs/2.4/> for detailed information.# In particular, see # <URL:http://httpd.apache.org/docs/2.4/mod/directives.html># for a discussion of each configuration directive.## Do NOT simply read the instructions in here without understanding# what they do. They're here only as hints or reminders. If you are unsure# consult the online docs. You have been warned. ## Configuration and logfile names: If the filenames you specify for many# of the server's control files begin with "/" (or "drive:/" for Win32), the# server will use that explicit path. If the filenames do *not* begin# with "/", the value of ServerRoot is prepended -- so "logs/access_log"# with ServerRoot set to "/usr/local/apache2" will be interpreted by the# server as "/usr/local/apache2/logs/access_log", whereas "/logs/access_log" # will be interpreted as '/logs/access_log'.## NOTE: Where filenames are specified, you must use forward slashes# instead of backslashes (e.g., "c:/apache" instead of "c:/apache").# If a drive letter is omitted, the drive on which httpd.exe is located# will be used by default. It is recommended that you always supply# an explicit drive letter in absolute paths to avoid confusion.ServerSignature OnServerTokens Full## ServerRoot: The top of the directory tree under which the server's# configuration, error, and log files are kept.## Do not add a slash at the end of the directory path. If you point# ServerRoot at a non-local disk, be sure to specify a local disk on the# Mutex directive, if file-based mutexes are used. If you wish to share the# same ServerRoot for multiple httpd daemons, you will need to change at# least PidFile.#ServerRoot "c:/wamp/bin/apache/apache2.4.9"Define APACHE24 Apache2.4## Mutex: Allows you to set the mutex mechanism and mutex file directory# for individual mutexes, or change the global defaults## Uncomment and change the directory if mutexes are file-based and the default# mutex file directory is not on a local disk or is not appropriate for some# other reason.## Mutex default:logs## Listen: Allows you to bind Apache to specific IP addresses and/or# ports, instead of the default. See also the <VirtualHost># directive.## Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses.##Listen 12.34.56.78:80Listen 0.0.0.0:80Listen [::0]:80## Dynamic Shared Object (DSO) Support## To be able to use the functionality of a module which was built as a DSO you# have to place corresponding `LoadModule' lines at this location so the# directives contained in it are actually available _before_ they are used.# Statically compiled modules (those listed by `httpd -l') do not need# to be loaded here.## Example:# LoadModule foo_module modules/mod_foo.so#LoadModule access_compat_module modules/mod_access_compat.soLoadModule actions_module modules/mod_actions.soLoadModule alias_module modules/mod_alias.soLoadModule allowmethods_module modules/mod_allowmethods.soLoadModule asis_module modules/mod_asis.soLoadModule auth_basic_module modules/mod_auth_basic.so#LoadModule auth_digest_module modules/mod_auth_digest.so#LoadModule authn_anon_module modules/mod_authn_anon.soLoadModule authn_core_module modules/mod_authn_core.so#LoadModule authn_dbd_module modules/mod_authn_dbd.so#LoadModule authn_dbm_module modules/mod_authn_dbm.soLoadModule authn_file_module modules/mod_authn_file.so#LoadModule authn_socache_module modules/mod_authn_socache.so#LoadModule authnz_ldap_module modules/mod_authnz_ldap.soLoadModule authz_core_module modules/mod_authz_core.so#LoadModule authz_dbd_module modules/mod_authz_dbd.so#LoadModule authz_dbm_module modules/mod_authz_dbm.soLoadModule authz_groupfile_module modules/mod_authz_groupfile.soLoadModule authz_host_module modules/mod_authz_host.so#LoadModule authz_owner_module modules/mod_authz_owner.soLoadModule authz_user_module modules/mod_authz_user.soLoadModule autoindex_module modules/mod_autoindex.so#LoadModule buffer_module modules/mod_buffer.soLoadModule cache_module modules/mod_cache.soLoadModule cache_disk_module modules/mod_cache_disk.so#LoadModule cern_meta_module modules/mod_cern_meta.soLoadModule cgi_module modules/mod_cgi.so#LoadModule charset_lite_module modules/mod_charset_lite.so#LoadModule data_module modules/mod_data.so#LoadModule dav_module modules/mod_dav.so#LoadModule dav_fs_module modules/mod_dav_fs.so#LoadModule dav_lock_module modules/mod_dav_lock.so#LoadModule dbd_module modules/mod_dbd.soLoadModule deflate_module modules/mod_deflate.soLoadModule dir_module modules/mod_dir.so#LoadModule dumpio_module modules/mod_dumpio.soLoadModule env_module modules/mod_env.so#LoadModule expires_module modules/mod_expires.so#LoadModule ext_filter_module modules/mod_ext_filter.soLoadModule file_cache_module modules/mod_file_cache.so#LoadModule filter_module modules/mod_filter.so#LoadModule headers_module modules/mod_headers.so#LoadModule heartbeat_module modules/mod_heartbeat.so#LoadModule heartmonitor_module modules/mod_heartmonitor.so#LoadModule ident_module modules/mod_ident.so#LoadModule imagemap_module modules/mod_imagemap.soLoadModule include_module modules/mod_include.so#LoadModule info_module modules/mod_info.soLoadModule isapi_module modules/mod_isapi.so#LoadModule lbmethod_bybusyness_module modules/mod_lbmethod_bybusyness.so#LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so#LoadModule lbmethod_bytraffic_module modules/mod_lbmethod_bytraffic.so#LoadModule lbmethod_heartbeat_module modules/mod_lbmethod_heartbeat.so#LoadModule ldap_module modules/mod_ldap.so#LoadModule logio_module modules/mod_logio.soLoadModule log_config_module modules/mod_log_config.so#LoadModule log_debug_module modules/mod_log_debug.so#LoadModule log_forensic_module modules/mod_log_forensic.so#LoadModule lua_module modules/mod_lua.soLoadModule mime_module modules/mod_mime.so#LoadModule mime_magic_module modules/mod_mime_magic.soLoadModule negotiation_module modules/mod_negotiation.so#LoadModule proxy_module modules/mod_proxy.so#LoadModule proxy_ajp_module modules/mod_proxy_ajp.so#LoadModule proxy_balancer_module modules/mod_proxy_balancer.so#LoadModule proxy_connect_module modules/mod_proxy_connect.so#LoadModule proxy_express_module modules/mod_proxy_express.so#LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so#LoadModule proxy_html_module modules/mod_proxy_html.so#LoadModule proxy_http_module modules/mod_proxy_http.so#LoadModule proxy_scgi_module modules/mod_proxy_scgi.so#LoadModule ratelimit_module modules/mod_ratelimit.so#LoadModule reflector_module modules/mod_reflector.so#LoadModule remoteip_module modules/mod_remoteip.so#LoadModule request_module modules/mod_request.so#LoadModule reqtimeout_module modules/mod_reqtimeout.so#LoadModule rewrite_module modules/mod_rewrite.so#LoadModule sed_module modules/mod_sed.so#LoadModule session_module modules/mod_session.so#LoadModule session_cookie_module modules/mod_session_cookie.so#LoadModule session_crypto_module modules/mod_session_crypto.so#LoadModule session_dbd_module modules/mod_session_dbd.soLoadModule setenvif_module modules/mod_setenvif.so#LoadModule slotmem_plain_module modules/mod_slotmem_plain.so#LoadModule slotmem_shm_module modules/mod_slotmem_shm.so#LoadModule socache_dbm_module modules/mod_socache_dbm.so#LoadModule socache_memcache_module modules/mod_socache_memcache.so#LoadModule socache_shmcb_module modules/mod_socache_shmcb.so#LoadModule speling_module modules/mod_speling.so#LoadModule ssl_module modules/mod_ssl.so#LoadModule status_module modules/mod_status.so#LoadModule substitute_module modules/mod_substitute.so#LoadModule unique_id_module modules/mod_unique_id.so#LoadModule userdir_module modules/mod_userdir.so#LoadModule usertrack_module modules/mod_usertrack.so#LoadModule version_module modules/mod_version.soLoadModule vhost_alias_module modules/mod_vhost_alias.so#LoadModule watchdog_module modules/mod_watchdog.so#LoadModule xml2enc_module modules/mod_xml2enc.soLoadModule php5_module "c:/wamp/bin/php/php5.5.12/php5apache2_4.dll"#PHPIniDir c:/wamp/bin/php/php5.5.12<IfModule unixd_module>## If you wish httpd to run as a different user or group, you must run# httpd as root initially and it will switch. ## User/Group: The name (or #number) of the user/group to run httpd as.# It is usually good practice to create a dedicated user and group for# running httpd, as with most system services.#User daemonGroup daemon</IfModule># 'Main' server configuration## The directives in this section set up the values used by the 'main'# server, which responds to any requests that aren't handled by a# <VirtualHost> definition. These values also provide defaults for# any <VirtualHost> containers you may define later in the file.## All of these directives may appear inside <VirtualHost> containers,# in which case these default settings will be overridden for the# virtual host being defined.### ServerAdmin: Your address, where problems with the server should be# e-mailed. This address appears on some server-generated pages, such# as error documents. e.g. admin@your-domain.com#ServerAdmin admin@example.com## ServerName gives the name and port that the server uses to identify itself.# This can often be determined automatically, but we recommend you specify# it explicitly to prevent problems during startup.## If your host doesn't have a registered DNS name, enter its IP address here.#ServerName localhost:80HostnameLookups Off## DocumentRoot: The directory out of which you will serve your# documents. By default, all requests are taken from this directory, but# symbolic links and aliases may be used to point to other locations.#DocumentRoot "c:/wamp/www/"## Each directory to which Apache has access can be configured with respect# to which services and features are allowed and/or disabled in that# directory (and its subdirectories). ## First, we configure the "default" to be a very restrictive set of # features. #<Directory /> AllowOverride none Require all granted</Directory>## Note that from this point forward you must specifically allow# particular features to be enabled - so if something's not working as# you might expect, make sure that you have specifically enabled it# below.#<Directory "c:/wamp/www/"> # # Possible values for the Options directive are "None", "All", # or any combination of: # Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews # # Note that "MultiViews" must be named *explicitly* --- "Options All" # doesn't give it to you. # # The Options directive is both complicated and important. Please see # http://httpd.apache.org/docs/2.4/mod/core.html#options # for more information. # Options Indexes FollowSymLinks Includes # # AllowOverride controls what directives may be placed in .htaccess files. # It can be "All", "None", or any combination of the keywords: # AllowOverride FileInfo AuthConfig Limit # AllowOverride all # # Controls who can get stuff from this server. # # onlineoffline tag - don't remove #Require local Require all granted</Directory>## DirectoryIndex: sets the file that Apache will serve if a directory# is requested.#<IfModule dir_module> DirectoryIndex index.php index.php3 index.html index.htm</IfModule>## The following lines prevent .htaccess and .htpasswd files from being # viewed by Web clients. #<Files ".ht*"> Require all denied</Files>## ErrorLog: The location of the error log file.# If you do not specify an ErrorLog directive within a <VirtualHost># container, error messages relating to that virtual host will be# logged here. If you *do* define an error logfile for a <VirtualHost># container, that host's errors will be logged there and not here.##ErrorLog "logs/error.log"ErrorLog "c:/wamp/logs/apache_error.log"## LogLevel: Control the number of messages logged to the error_log.# Possible values include: debug, info, notice, warn, error, crit,# alert, emerg.#LogLevel warn<IfModule log_config_module> # # The following directives define some format nicknames for use with # a CustomLog directive (see below). # LogFormat "%h %l %u %t /"%r/" %>s %b /"%{Referer}i/" /"%{User-Agent}i/"" combined LogFormat "%h %l %u %t /"%r/" %>s %b" common <IfModule logio_module> # You need to enable mod_logio.c to use %I and %O LogFormat "%h %l %u %t /"%r/" %>s %b /"%{Referer}i/" /"%{User-Agent}i/" %I %O" combinedio </IfModule> # # The location and format of the access logfile (Common Logfile Format). # If you do not define any access logfiles within a <VirtualHost> # container, they will be logged here. Contrariwise, if you *do* # define per-<VirtualHost> access logfiles, transactions will be # logged therein and *not* in this file. # CustomLog "c:/wamp/logs/access.log" common # # If you prefer a logfile with access, agent, and referer information # (Combined Logfile Format) you can use the following directive. # #CustomLog "logs/access.log" combined</IfModule><IfModule alias_module> # # Redirect: Allows you to tell clients about documents that used to # exist in your server's namespace, but do not anymore. The client # will make a new request for the document at its new location. # Example: # Redirect permanent /foo http://www.example.com/bar # # Alias: Maps web paths into filesystem paths and is used to # access content that does not live under the DocumentRoot. # Example: # Alias /webpath /full/filesystem/path # # If you include a trailing / on /webpath then the server will # require it to be present in the URL. You will also likely # need to provide a <Directory> section to allow access to # the filesystem path. # # ScriptAlias: This controls which directories contain server scripts. # ScriptAliases are essentially the same as Aliases, except that # documents in the target directory are treated as applications and # run by the server when requested rather than as documents sent to the # client. The same rules about trailing "/" apply to ScriptAlias # directives as to Alias. # ScriptAlias /cgi-bin/ "c:/wamp/bin/apache/apache2.4.9/cgi-bin/"</IfModule><IfModule cgid_module> # # ScriptSock: On threaded servers, designate the path to the UNIX # socket used to communicate with the CGI daemon of mod_cgid. # #Scriptsock cgisock</IfModule>## "c:/wamp/bin/apache/apache2.4.9/cgi-bin" should be changed to whatever your ScriptAliased# CGI directory exists, if you have that configured.#<Directory "c:/wamp/bin/apache/apache2.4.9/cgi-bin"> AllowOverride None Options None Require all granted</Directory><IfModule mime_module> # # TypesConfig points to the file containing the list of mappings from # filename extension to MIME-type. # TypesConfig conf/mime.types # # AddType allows you to add to or override the MIME configuration # file specified in TypesConfig for specific file types. # #AddType application/x-gzip .tgz # # AddEncoding allows you to have certain browsers uncompress # information on the fly. Note: Not all browsers support this. # AddEncoding x-compress .Z AddEncoding x-gzip .gz .tgz # # If the AddEncoding directives above are commented-out, then you # probably should define those extensions to indicate media types: # AddType application/x-compress .Z AddType application/x-gzip .gz .tgz AddType application/x-httpd-php .php AddType application/x-httpd-php .php3 # # AddHandler allows you to map certain file extensions to "handlers": # actions unrelated to filetype. These can be either built into the server # or added with the Action directive (see below) # # To use CGI scripts outside of ScriptAliased directories: # (You will also need to add "ExecCGI" to the "Options" directive.) # #AddHandler cgi-script .cgi # For type maps (negotiated resources): #AddHandler type-map var # # Filters allow you to process content before it is sent to the client. # # To parse .shtml files for server-side includes (SSI): # (You will also need to add "Includes" to the "Options" directive.) # AddType text/html .html AddOutputFilter INCLUDES .html</IfModule>## The mod_mime_magic module allows the server to use various hints from the# contents of the file itself to determine its type. The MIMEMagicFile# directive tells the module where the hint definitions are located.##MIMEMagicFile conf/magic## Customizable error responses come in three flavors:# 1) plain text 2) local redirects 3) external redirects## Some examples:#ErrorDocument 500 "The server made a boo boo."#ErrorDocument 404 /missing.html#ErrorDocument 404 "/cgi-bin/missing_handler.pl"#ErrorDocument 402 http://www.example.com/subscription_info.html### MaxRanges: Maximum number of Ranges in a request before# returning the entire resource, or one of the special# values 'default', 'none' or 'unlimited'.# Default setting is to accept 200 Ranges.#MaxRanges unlimited## EnableMMAP and EnableSendfile: On systems that support it, # memory-mapping or the sendfile syscall may be used to deliver# files. This usually improves server performance, but must# be turned off when serving from networked-mounted # filesystems or if support for these functions is otherwise# broken on your system.# Defaults: EnableMMAP On, EnableSendfile Off##EnableMMAP offEnableSendfile off# AcceptFilter: On Windows, none uses accept() rather than AcceptEx() and# will not recycle sockets between connections. This is useful for network# adapters with broken driver support, as well as some virtual network# providers such as vpn drivers, or spam, virus or spyware filters.AcceptFilter http noneAcceptFilter https none# Supplemental configuration## The configuration files in the conf/extra/ directory can be # included to add extra features or to modify the default configuration of # the server, or you may simply copy their contents here and change as # necessary.# Server-pool management (MPM specific)#Include conf/extra/httpd-mpm.conf# Multi-language error messages#Include conf/extra/httpd-multilang-errordoc.conf# Fancy directory listingsInclude conf/extra/httpd-autoindex.conf# Language settings#Include conf/extra/httpd-languages.conf# User home directories#Include conf/extra/httpd-userdir.conf# Real-time info on requests and configuration#Include conf/extra/httpd-info.conf# Virtual hosts#Include conf/extra/httpd-vhosts.conf# Local access to the Apache HTTP Server Manual#Include conf/extra/httpd-manual.conf# Distributed authoring and versioning (WebDAV)#Include conf/extra/httpd-dav.conf# Various default settings#Include conf/extra/httpd-default.conf# Configure mod_proxy_html to understand HTML4/XHTML1<IfModule proxy_html_module>Include conf/extra/proxy-html.conf</IfModule># Secure (SSL/TLS) connections#Include conf/extra/httpd-ssl.conf## Note: The following must must be present to support# starting without SSL on platforms with no /dev/random equivalent# but a statically compiled-in mod_ssl.#<IfModule ssl_module>SSLRandomSeed startup builtinSSLRandomSeed connect builtin</IfModule>## uncomment out the below to deal with user agents that deliberately# violate open standards by misusing DNT (DNT *must* be a specific# end-user choice)##<IfModule setenvif_module>#BrowserMatch "MSIE 10.0;" bad_DNT#</IfModule>#<IfModule headers_module>#RequestHeader unset DNT env=bad_DNT#</IfModule>#IncludeOptional "c:/wamp/vhosts/*"Include "c:/wamp/alias/*"
View Code
直接在C盘安装的话就直接复制就行。
(2)、国内虚拟机:靠谱助手完整版;下载后先安装引擎,然后在软件内下载UC浏览器就行。
(3)、可以尝试使用360手机助手这类软件来帮助你做真机测试,不过,要是你没其他作为测试机的话,你的手机应该很容易坏!
(4)、怎么混合使用呢?方法在这:
你的电脑先开个wifi出来,然后你的手机得连上这个wifi;这样就是内网;
只要你是有需要测试的时候,双击打开WAMP,加上按照我的配置文件就可以了,Windows用户直接在“开始栏——输入cmd——ipconfig”,然后往下看看,无线网络:192.168.xxx.x这样的你在手机浏览器地址栏输入就行。
上面的是手机,现在给你谈谈靠谱助手;它不需要人工连wifi,只要你打开了一般都可以直接上网了。然后你可以去查下怎么改配置把相关的分辨率大小给改下;同样的方法在靠谱助手的UC浏览器上输入IP地址就行。
14、分析开发的断点:
(1)、国内市场普遍的viewport宽度是320px和360px,像Note2才400px;分辨率,像素这些词语一般是告诉给设计师,我们前端要明白的是viewport;
(2)、字体大小:我相信有部分童鞋会认为浏览器会自适应让你页面的字体随着不同的屏幕大小而自动适应,我告诉你,你错了!
这些字体自适应都是人为设置出来的,我推荐的方案是:
body{font:14px line-height:20px}//网页整体字体以14px为主。
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}
h1{font-size:24px}
h2{font-size:22px}
h3{font-size:18px}
@media only screen and (min-width:360px) {
body,button,input,select,textarea {font-size:18px;line-height:26px;}
h1{font-size:28px}
h2{font-size:26px}
h3{font-size:22px}
}
(3)、class类控制分析:
看到上面大概也了解怎么使用@media了吧;
另外,定义类名的第一个重要性就在这里了:因为你要控制一个class类在320px或360px不同的屏幕上有适应屏幕大小的样式结构!
(4)、我们开发时,一般要做到兼容的浏览器普遍是国内的浏览器(苹果的浏览器都是webkit内核):UC,QQ,360,百度,这些浏览器是国内使用用户量最大的浏览器厂商,虽然不是内核都一样,但是普遍的兼容问题还不是很多,所以我们优先选择兼容的是webkit内核的。
(5)、前端开发性能优化(个人总结建议):
一、单个文件大小不要超过14KB;插件不要超过25KB。
二、优先选择使用字体图标,非要用上图片的话,就使用CSS Sprite方法。同时,将整合到一张图片的图标集合和在网站或webapp不常用的图片进行压缩。
三、seo优化问题:我们常写代码时会经常忽略这个标签会带上title,alt等这些可以填上关键词的地方,这个是必须要说明下,不过在手机端的话,这个好像还真用不上吧。
四、CSS,JS文件尽量以合并的方式,少以分开来写样式。
五、利用CDN技术,减轻空间资源;对企业来讲,这个风险有点大;但手机用户的网络差时会出现文件不能及时加载等问题。
六、图片多使用PNG8来达到优化效果。
七、少对图片进行硬性设置宽高。
八、减少页面请求:css,js,图片数量的多少会对请求有影响;同时要注意class类组合一般情况下不要超过4个,超过的尽量以取个新的class类名来定义会好点。
九、减少DOM访问次数,加载数量多了就影响访问速度。
十、不要出现404页面,避免重定向。
十一、减少cookies体积,设置合理的过期时间。
十二、缓存ajax,用get方式提交;form以post方式提交。
-----------------------------------------------------------------------------------------------------------------------------------
还有其他的,因为我还没用上,所以就不知道怎么解释了,先用着吧!JavaScript方面的我还没熟悉就不做太多共享了,明年再分享吧
------------------------------------------------------------------------------------------------------------------------------------
现在我给大家来谈谈javascript的问题(包括JS框架):
关于数据交互的框架:knockout js :
这个框架学习起来不是特别难,不过要运用的话,还得花心思多练习和熟悉基本的JS语法。网上有他的chm文档,都是中文翻译,不过看完这个后,你还是得重新去看看官方的。
最近公司要求我们学习的框架是AngularJs:
他在国内专门的中文社区,现在我用的是1.3.9版本;这个框架有angular-ui有基于Bootstrap框架的(是自带ng指令的---开心吧);
给你自己定好一个学习时间,定一个学习路线等等规划,对我来说,难点在于交互,我还没搞懂!
JS是所有前端人员的难点和重点,我之前之所以学不懂JS的主要原因是顾虑太多,CSS基础不稳定,自然要去补习,所以我这次是以稳定的CSS基础后再去学习JS的话,应该会轻松很多。同时给自己定的时间长点,学习技术不懂就不懂急不来的,不懂就上网查和问就是了。
JS的面向对象:面向对象是一个思想,他归根到底就是让你写函数封装起来。这个跟OOCSS是一个意思,目的为了让你以后轻松管理代码。(虽然描述得不清晰,我说这个主要是告诉新手,面向对象不难,难的是你练习了吗?学习的过程中不要心烦气躁,保持头脑清晰,冷静的面对逻辑问题;所有的技术由入门到精通都是熟能生巧。)
今年犯了2次错误:
1,入门我就知道有flexbox,但是我当时以为有网格已经很不错了,所以就拒绝学习了;
2,所以的javacript框架我都看不懂,所以也拒绝去学习js框架;现在公司压力来了,学起来没想象中那么困难。
在这里我要说的是 各位童鞋,千万不要去害怕学你现在以为很难的知识和新知识;否则,当你公司真正要用上的时候,你会很痛苦。
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- Vue-cli创建vue项目以及配置文件梳理
介绍 vue-cli是vue提供构建单页应用的脚手架。它能够帮助开发者快速的创建vue项目。这篇文章主要介绍如何使用vue-cli,以及它创建的vue项目结构。还有就是对于build目录下的配置文件进行一些梳理总结。 安装vue-cli 安装vue-cli十分简单,执行下面的命…...
2024/4/21 4:40:36 - node.js react_使用Node和React.js构建实时Twitter流
node.js react介绍 (Introduction) Welcome to the second installation of Learning React, a series of articles focused on becoming proficient and effective with Facebooks React library. If you havent read the first installation, Getting Started and Concepts, …...
2024/4/21 4:40:35 - AngularJS之备忘与诀窍
译自:《angularjs》 备忘与诀窍 目前为止,之前的章节已经覆盖了Angular所有功能结构中的大多数,包括指令,服务,控制器,资源以及其它内容.但是我们知道有时候仅仅阅读是不够的.有时候,我们并不在乎那些功能机制是如果运行的,我们仅仅想知道如何…...
2024/4/28 0:11:41 - ROS机器人导航之初实现
1./home/hao/catkin_lh/src/arbotix_ros arbotix_ros是官方给的包 sudo apt-get install ros-kinetic-arbotix-* 具体的下载位置ros工程包的scr中 作用:给出了仿真机器人需要的里程计和TF坐标转化关系launch文件调用代码<node name"arbotix" pkg…...
2024/4/21 4:40:33 - [pixhawk笔记]6-uORB流程及关键函数解析
本文中将结合代码、文档及注释,给出uORB执行流程及关键函数的解析,由于uORB的机制实现较为复杂,所以本文主要学习如何使用uORB的接口来实现通信。回到上一篇笔记中的代码: #include <px4_config.h> #include <px4_tasks.…...
2024/5/3 4:47:34 - Build a Basic CRUD App with Vue.js and nodejs
https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node#add-authentication-with-okta I’ve danced the JavaScript framework shuffle for years starting with jQuery, then on to Angular. After being frustrated with Angular’s complexity, I found R…...
2024/4/30 17:41:01 - okta使用_如何使用Okta向您的Vue应用添加身份验证
okta使用This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. 本文最初发布在Okta开发人员博客上 。 感谢您支持使SitePoint成为可能的合作伙伴。 I’ve danced the JavaScript framewor…...
2024/5/3 0:34:42 - stack.h file_使用Filestack构建MEAN Stack File Uploader应用
stack.h file介绍 ( Introduction ) Filepicker is a web service which helps us developers smoothly handle file uploading. An amazing feature it provides is to let users to choose the source from where to upload a picture, so you can easily upload a picture f…...
2024/4/20 19:45:13 - 脏值检查
脏值检查,通过digest遍历所有的watcher,最终得到统一的数据,再更新view。脏值检查Change Detection内部的一个非常重要的阶段——digest阶段, 当系统进入此阶段时,将会进行数据检查, 它的处理流程如下:标记dirty false遍历所有通…...
2024/4/20 19:45:11 - 你所要知道的所有关于Angular的变化检测机制
原文地址:Everything you need to know about change detection in Angular 如果想像我一样全面的了解Angular的脏值检测机制,除了浏览源代码之外别无他法,网上可没有太多可用信息。大部分文章都提到,Angular中每个组件都自带一个…...
2024/4/20 19:45:11 - Angular4 组件变化检测总结 (Change Detection)
看了很多有关的文章,也认真观看了Angular2 团队放在youtube的相关演讲视频。(你懂的) Change Detection In Angular 2 我也想用自己的理解总结一下Angular2/4组件变化的原理。内容分这么几个小节: 什么操作会引发组件绑定属性变…...
2024/4/20 19:45:09 - angular1.x 脏检测
写在前面 双向绑定是angular的大亮点,然后支撑它的就是脏检测。一直对脏检测都有一些理解,却没有比较系统的概念。 以下是我阅读网上博文以及angular高级程序设计的理解与总结。 接收指导与批评。 脏检查: 将原对象赋值一份快照。在某个时间&…...
2024/4/21 4:40:30 - angular 脏检查机制
很久没有写点东西了,从今天起,在博客园对自己过往的工作,学习和生活做一些梳理,总结和温故。今天窗外的阳光不那么任性,天空白云点点,蝉鸣依旧嘹亮,安静地坐在阳台上,吹着风…...
2024/5/3 2:21:56 - Angular--变更检测策略
概述 简单来说变化检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变,当检测到模型中绑定的值发生改变时,则同步到视图上,反之,当检测到视图上绑定的值发生改变时,则回调对应的绑定函数。 什么情况下会引起…...
2024/4/21 4:40:27 - 关于Angular的变更检测(Change Detection)
如果你像我一样,想对Angular的变更检测机制有一个深入的理解,由于在网上并没有多少有用的信息,你只能去看源码。大多数文章都会提到每一个组件都会有一个属于自己的变更检测器(change detector),它负责检查…...
2024/4/21 4:40:27 - Angular 4 依赖注入教程之七 ValueProvider的使用
目录 Angular 4 依赖注入教程之一 依赖注入简介Angular 4 依赖注入教程之二 组件服务注入Angular 4 依赖注入教程之三 ClassProvider的使用Angular 4 依赖注入教程之四 FactoryProvider的使用Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象Angular 4 依赖注入教程之六…...
2024/5/3 4:57:52 - Angular No provider for EffectsRootModule错误消息的出现原因和修复方式
错误消息: main.ts:12 NullInjectorError: R3InjectorError(AppModule)[EffectsFeatureModule -> EffectsRootModule -> EffectsRootModule -> EffectsRootModule]: NullInjectorError: No provider for EffectsRootModule! at NullInjector.get (http://l…...
2024/4/25 9:00:06 - angular的provider服务
<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>自定义服务其他的方式</title><script src"day2/src/angular.js"></script><style type"text/css"></style></head&…...
2024/4/21 4:40:23 - Angularjs前端项目环境搭建
Angularjs前端项目环境搭建 AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web…...
2024/4/21 4:40:22 - 前端框架AngularJS入门与实战
1、AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据…...
2024/4/24 13:43:14
最新文章
- 批量视频剪辑新选择:一键式按照指定秒数分割视频并轻松提取视频中的音频,让视频处理更高效!
是否经常为大量的视频剪辑工作感到头疼?还在一个个手动分割、提取音频吗?现在,我们为你带来了一款全新的视频批量剪辑神器,让你轻松应对各种视频处理需求! 首先,进入媒体梦工厂的主页面,并在板…...
2024/5/3 10:57:15 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 《前端防坑》- JS基础 - 你觉得typeof nullValue === null 么?
问题 JS原始类型有6种Undefined, Null, Number, String, Boolean, Symbol共6种。 在对原始类型使用typeof进行判断时, typeof stringValue string typeof numberValue number 如果一个变量(nullValue)的值为null,那么typeof nullValue "?" const u …...
2024/5/2 10:47:24 - 分享一个Python爬虫入门实例(有源码,学习使用)
一、爬虫基础知识 Python爬虫是一种使用Python编程语言实现的自动化获取网页数据的技术。它广泛应用于数据采集、数据分析、网络监测等领域。以下是对Python爬虫的详细介绍: 架构和组成:下载器:负责根据指定的URL下载网页内容,常用的库有Requests和urllib。解析器:用于解…...
2024/5/2 2:37:38 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/1 17:30:59 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/2 16:16:39 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/29 2:29:43 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/2 9:28:15 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/30 9:43:09 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/2 15:04:34 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/29 20:46:55 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/30 22:21:04 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/1 4:32:01 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/27 23:24:42 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/30 9:42:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/2 9:07:46 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/30 9:42:49 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57