border-1px
|
|
单行省略
|
|
多行省略
|
|
css强制换行
|
|
更改文本选择样式
|
|
清除浮动
|
|
滚动条样式
|
|
使文本内容无法选择
|
|
文字渐变
|
|
css切换开关
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
简单使用
抓取app,微信小程序,手机端网页等信息进阶使用
解决pc端浏览器不能打开微信端需要登录授权的页面重点介绍
开发时,可在pc端浏览器模拟微信登录,实现无缝开发pc与手机处于同一个Wifi网络,通过手机设置wifi网络的http代理,把服务器地址指向pc的ip地址。
配置教程不再阐述,配置教程:https://juejin.im/post/5a420adff265da432c241adc
配置成功后,此时,在手机端打开任一app或者网页,都会在小花瓶中看到有站点信息,但不能查看其详细信息,需要设置一下。
配置你要抓取的网站:要在Proxy==>SSL Proxy Settings 下添加你要抓的网站host,这样就能看到该网站下的网络接口信息,没有添加的不能显示详细信息
结果:设置过的网站就能看到,其余为 unknow
例子:https://www.homemadecake.cn/sp/order/history
从小花瓶中可以看到,整个微信登录授权的跳转过程:
触屏设备上的Safari中focus()
有些限制。水果触屏设备的设计师们认为软键盘老是弹出来是很烦人的,用户体验不好。所以他们为表单获焦软键盘弹出设置了以下两个条件:
focus()
方法使表单获焦。直接点击表单或者点击其他元素然后在点击事件处理函数中调用focus()
方法使表单获焦。
|
|
问题:页面上有一个回到顶部按钮,采用fixed布局,z-index:1000,页面上内容页中间有一个导航栏,当页面滚动到导航栏位置时,导航栏采用fixed z-index:1001固定在头部,此时document.documentElement.scrollTop 点击回到顶部失效
解决方式: 设置页面上的所有层不可大于回到顶部按钮的层级 <1000
|
|
|
|
|
|
|
|
|
|
可以使用 https://github.com/zenorocha/clipboard.js 兼容性较好
|
|
|
|
优点:目前java后台,可以在jsp、html页面嵌套java语法、数据交互,不用采取ajax请求,加快前后端数据交互。
缺点:数据字段嵌套在前端页面,内容较多时,字段混乱,嵌套java语法降低前端开发后期维护性。
优点:方便后台测试接口
缺点:前端需要搭建后台java环境、后台每出新接口,前端需要重新更新代码编译运行,降低前端开发速度,尤其是当后台编写出错、项目运行不了,需要把报错信息交给后台处理完成后再重新编译运行,前端根本开展不了工作。
前端每次新建页面都要先向后台报项目文件目录,后台编写url地址和这个文件的位置作一个映射
优点:后台对url地址可控性更强
缺点:大大降低前端开发效率
目前是采取绝对路径方式引入
优点:
缺点:正确前端引入资源的方式是相对路径,所以如果后台没有做好url跳转,前端往往连静态页面都编写不了
目前由于没有前后端分离,项目结构嵌套在java项目结构下,前端url、资源的引入前端都无法控制,无法做到基本的前端工程化、前端的打包压缩添加版本号等等;
正确的流程应该是这样的:前端src开发(可采用less等预编译器加快前端开发)→前端dist打包发布
优点:前端有完整目录结构,结构清晰、前端自动化、后期维护性较好
缺点:由于没有压缩合并资源等等问题,增加网站资源引入、性能差等问题
前端负责前端页面编写、展示,调用接口,后端负责写接口,各司其职,互不影响
目录清晰、后期维护性强;
加快前后端开发速度
可使用Vue等比较优秀的框架,提高开发速度,加快网站速度
目前大部分公司都采取前后端分离的开发模式,前后端各司其职,互不影响,前后端的后期可维护性都更加好。
以上。
在实际开发中,除去a标签跳转,经常会使用window.location.href去跳转页面,这个方法在绝大多数浏览器中都不会存在问题,但在一次项目中,发现在安卓微信浏览器中,调用微信SDK分享成功之后调用window.location.reload()
刷新本页面,但并没有生效:
|
|
href是location对象的一个属性,reload()则是location对象的方法
所以对于href,可以为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容。
对于reload()则是重新加载当前文档,如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
但对于安卓手机微信中的浏览器,reload只是从缓存中装载文档,所以当你使用该方法,是失效的;
建议少用window.reload(),应该使用window.location.href=””来代替。
使用location.href代替reload(),而且在以后的使用中也强烈建议大家使用location.href来进行刷新或者跳转
|
|
这一个多月,开发了一个微信公众号的微信H5商城。
地址:
前端:jQuery + rem + flex
后台: java
公司一共两个前端,我负责一个后台管理系统项目,一人独立前端开发。另外一个同事A前端开发这个公众号商城。由于公司开发策略有变,公众号商城放在首位,我被迫放在现有项目,加入商城开发。
所谓接盘侠,就是接别人的烂摊子,继续开发,所以我可以算是二次开发?
加入项目,此时页面大概有10多个,已经写得差不多了,但只是静态页面,后台接口还没有。我心里美滋滋的,心想还不错,不用我来写页面,直接等后台接口渲染数据加载,优化下就完事了。
直到我真正看到代码的时候
毕竟我来公司也两个月了,但一直都是独立一人开发项目,和同事A也没有多大的接触,只有时聊天,说说前端流行的东西,也略知其水平一二。
由于这个项目已经开发了一段时间了,目录结构再改要花更多时间,迫于时间不能改了,只能顺着A的路径走了,后来到了现在项目上线了,随着文件的增多,目录结构越来越乱,找文件的时间也花得比较多,也挺懊悔当初没有改回来,导致现在找文件速度有点慢。
此时页面也差不多写完了,命名不规范,样式混乱我能怎么办,我也相当无奈,也不能一个个地找,一个个地改回来吧,现有的就只能随他去吧,我看了代码之后也细心明确告诉A,他写的代码的不足之处,后来到现在好一点了,也许还需要点沉淀与积累吧?
关于标签大量使用了标签选择器和 :nth-child() ,而没有正确使用class出现的问题。一开始我也没觉得是个问题,后台等到需求不断变的时候,功能不断变化,有时候在这个div里加上一个内容,之前使用标签选择器和:nth-child()来控制样式会变得非常致命。这就为什么大牛都推荐使用class来控制样式的原因吧。
虽然A水平没有自己好,但是还要一起开发的,我只能自己接手比较难的模块,简单点的模块就交给A。
由于静态页面与渲染数据、事件绑定有紧密联系,所以最好一个模块当中,html、css、js都要自己来写会比较好,自己对页面内容,事件的把控都会比较熟悉。
所谓移动端适配,就是要根据移动设备的屏幕大小来显示适当比例的内容与图像。因为A没有做过移动端,没有考虑到适配问题,这让我相当无奈,因为当时我接手的时候页面已经差不多写完了。没办法,只能一个一个地改,所以说,刚开始真的很重要很重要,直接影响了之后的开发与迭代了。
使用rem.js
我是通过使用rem单位和一个rem.js来解决移动端适配问题。
|
|
通过获得屏幕的宽度大小,来改变html的font-size
很多时候用户都会有一些误操作,比如填写表单的时候手机号码不正确或者漏填信息、后台接口错误提示等等,都应该给予适当的误操作提示,一开始我是使用alert()直接完事,但用户体验相当不好,尤其是移动端,相当难看而又让用户再点一次,感到恶心,后来模仿其他平台做法自己写了一个通用方法弹出层进行错误提示。
|
|
这个问题相当重要,直接影响你的开发进度和心情。由于需求不明确,往往在开发当中,等你写完了这个页面或者开发完这个功能之后,很有可能需求发生更改,UI很可能会变,所以当你写完一个页面之后,产品和UI告诉你,”之前的那个页面老板说不好看,需要重做,这个是最新的页面” 我想你会相当崩溃的,直到我三番四次地改,我才发现了这个问题的严重性。可笑可笑
意见
往往在浏览器中调试是不会出现问题的,等到真的放上服务器,用真机测试时,会出现各种各样的问题。
首先,在开发过程中,有条件和时间的话,可以开启一个本地服务器,多在真机中测试。而一些微信支付、微信分享等功能需要放到服务器上测试的,就要多测试,基于微信公众号开发,调用微信JDK,这也没什么办法的。
IOS微信浏览器是自带一个返回键的,而安卓端有些是用home键来控制返回,有些是没有返回的,例如在下单页面中,需要填写用户收获信息,我会在同一个页面来进行,利用一个弹出层来控制,页面来会有一个关闭按钮,确保安卓端与ios都可以点击关闭,而不是按”返回”,返回到上一个页面,这个流程就是不对的,所以在开发中,要与产品沟通好,了解整个流程,确保安卓端以及IOS端的流程一致,避免一些不必要的开发。由于使用了比较笨重的jquery,其他兼容性问题出现得比较少,如有出现,直接Google,搜一下,相信就有解决方法了。
这个项目中,整个团队都是从零出发,需求不明确,在开发中遇到的问题还是比较多,与同事交流讨论也比较多,大家一步一步讨论、一步一步优化以及提出自己的建议,每个人都尽力做好自己的事情,在开发过程中还是挺开心的,等到真的测试上线了,看到自己做的东西,心情又会很开心。我知道自己代码还是写得不够好,还是不太会利用面向对象方式来编程,相信下次会越来越好。
致自己,加油。
日常开发,常常有一些方法、正则、表达式经常需要用到,在此记录,作为总结和方便查找。
|
|
|
|
|
|
|
|
参考网址
http://madscript.com/javascript/javscript-float-number-compute-problem/
|
|
|
|
|
|
注意这里的 flex-grow 定义了内部元素未达到容器宽度时的处理方式,flex-shrink 则定义了超过外部容器宽度时内部元素的宽度处理方式。而且缺一不可,否则会在特殊情况下表现出错误的效果