
【H5/web】
青峰
热爱编程,喜欢开源、分享。
展开
-
nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了。(1)nginx配置如下:(2)域名访问:js css文件无法加载;(3)IP访问:js css文件可以正常加载; 解决方法: nginx配置文件中,增加如下配置: location ~ .*转载 2017-06-14 22:36:59 · 64289 阅读 · 6 评论 -
解决:JS代码URL传中文参数乱码
如题:解决JS代码URL传中文参数乱码方法和步骤:传参数之前对中文的url参数进行 window.location = encodeURI(encodeURI("xxx.html?title="+"中文"));接收参数的地方 decodeURI(getUrlParam('title'));getUrlParam 方法如下:// 获取url中的参数func原创 2016-11-11 20:25:54 · 9243 阅读 · 0 评论 -
window.location 与 window.open
window.location = "http://www.baidu.com" 跳转后有后退功能window.location.replace("http://www.baidu.com") 跳转后没有后退功能window.open("http://www.baidu.com") 要新的窗口打开链接原创 2016-11-10 10:34:15 · 1037 阅读 · 0 评论 -
MUI:全局变量、常量、共享数据、跨webview传参的综述
很多编程语言都有全局变量,但js语言没有。HTML5+虽然也可以扩展类似plus.globle,但权衡后我们发现,新增类似的方案,不会对便利性有很大的提升,但对App的性能有负面影响,所以我们还是没有提供全局变量,但在本文中详述其他共享数据的方法。共享数据有几种方法。localStoragelocalStorage是HTML5标准,可跨webview使用。是持久化存转载 2016-11-03 20:02:16 · 7049 阅读 · 0 评论 -
MUI:页面传参终极版
页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。在普通浏览器端常用的方法有如下几种:1.利用URL传参在页面跳转的时候通过设置window.location.href添加参数,在接收参数的页面通过window.location.search获取参数字符串。发送参数的页面:window.location.href = 'new.html?ta转载 2016-11-03 19:51:10 · 22431 阅读 · 2 评论 -
MUI:页面跳转问题(原生回跳到hb)
我用个hb开发一个app,期间用了原生的东西(h5页面占了大部分功能),而app是用离线进行打包的,现在遇到一个比较棘手的问题,(1)h5跳转到原生页面,我是用插件进行跳转,跳转是没问题代码如下private Context context;@Overridepublic void init(AbsMgr arg0, String arg1) {this.conte转载 2016-11-03 19:54:37 · 4743 阅读 · 0 评论 -
学习积累----MUI
mui中默认在plus环境下和微信环境下设置了样式几个样式:> .mui-plus-visible:在plus环境下显示,非plsu环境下隐藏> .mui-wechat-visible:在wechat环境下显示,非wechat环境下隐藏> .mui-plus-hidden:在plus环境下隐藏,非plsu环境下显示> .mui-wechat-hidden:在wechat环境下隐藏,原创 2016-10-21 20:24:00 · 1257 阅读 · 0 评论 -
学习积累——js
一、window.open和window.location.href的几种用法JavaScript:window.open('http://www.baidu.com','_self')"> 点击这里 http://www.baidu.com','_self');void 0" href="#"> 点击这里 _blank 表示新开一个窗口, _parent表示父框架原创 2016-10-09 20:21:27 · 338 阅读 · 0 评论 -
mui 浏览器跨域实现
from:http://ask.dcloud.net.cn/question/17373APP开发时 是不需要JSONP支持的 mui本身就支持 但是 如果是微信或者浏览器的普通模式就不支持。所以贴出以下代码 大家可参考使用。(参考了zepto)var jsonpID = 0; $.ajaxJSONP = function(url, options){ if (转载 2016-05-17 12:49:07 · 4462 阅读 · 0 评论 -
优化JS加载时间过长的一种思路
1.背景去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点缓慢,大约需要20多秒。和另外一个同事一起花了一两天进行了代码优化、代码压缩、中间件优化以及服务部署优化后使地图出图缩短到了9秒上下。这里对上次的经验做一个总结,提供一种优化JS文件加载时间过长的思路。这里的中间件使用的是tomcat6.0。2.代码优化2.1代码模块化代码重构,使代码模块化转载 2016-11-29 10:11:09 · 5356 阅读 · 0 评论 -
使用uglify给js、css 压缩、混淆
grunt使用小记之uglify:最全的uglify使用DEMO http://www.cnblogs.com/artwl/p/3449303.html(这个里的build all 方法不错,直接把一个文件夹下面的所有的全部处理了)http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.htmlhtt原创 2016-11-29 10:10:35 · 7576 阅读 · 0 评论 -
解决div高度不自动增加的问题
div style="height:auto;width:100%"> xxxxdiv>如果上面的div不自动增高,在其下面加上:div style="height:auto;width:100%"> xxxxdiv>div style="clear:both;">div>如何还不行,将上面的div包裹一个div再加上:div>原创 2016-11-22 18:00:08 · 4415 阅读 · 0 评论 -
移动端touch事件影响click事件的相关解决方法
http://blog.youkuaiyun.com/feniuben/article/details/21159271主题 JavaScript 上周做了一个项目,发现一个DOM元素触发touch事件,竟然还会触发别的元素的click事件。我先描述一下,当时遇到的问题。项目初始状态是下面这张图:我给右上方的的搜索按钮,绑定了一个touchstart事件,点转载 2017-03-29 11:42:55 · 8587 阅读 · 0 评论 -
移动HTML5前端性能优化指南
编者按:前端工程师的菜!最近移动Html 5越来越火,想有一个体验流畅的Html 5 应用,这篇优化指南就别放过咯。腾讯的同学将关键的注意点与优化方法都总结出来,全文高能干货,非常值得深度学习 >>>概述PC优化手段在Mobile侧同样适用在Mobile侧我们提出三秒种渲染完成首屏指标基于第二点,首屏加载3秒完成或使用Loading基于联通3G网络平均338KB/s(2.71M转载 2017-03-29 11:29:54 · 2992 阅读 · 0 评论 -
js合并json对象
var mergeJsonObject = function (jsonbject1, jsonbject2) { var resultJsonObject={}; for(var attr in jsonbject1){ resultJsonObject[attr]=jsonbject1[attr]; } for(var attr in jsonbject2){ resultJsonObject[attr]=jsonbject2[attr]; } return resultJsonOb原创 2017-03-01 14:53:03 · 5650 阅读 · 0 评论 -
grunt全面学习
http://ninghao.net/video/1983原创 2016-12-19 14:35:31 · 477 阅读 · 0 评论 -
图解script的三种加载方式
摘录如下:可以很清晰的看出:: 脚本的获取和执行是同步的。此过程中页面被阻塞,停止解析。:脚本的获取是异步的,执行是同步的。脚本加载不阻塞页面的解析,脚本在获取完后并不立即执行,而是等到DOMready之后才开始执行。: 脚本的获取是异步的,执行是同步的。但是和<script defer = "defer">的不同点在于脚本获取后会立刻执行,这就会造成脚本的执行顺序和页转载 2016-12-28 13:21:52 · 2577 阅读 · 0 评论 -
浏览器的工作原理:新式网络浏览器幕后揭秘
from: https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/序言这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码。她写道:转载 2016-12-14 10:01:07 · 475 阅读 · 0 评论 -
解决微信浏览器video全屏的问题
在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之前加其他元素。 video id="videoID"webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"x5-video-player-type="h5"x5-video-player-fullscr原创 2016-12-13 12:06:27 · 31847 阅读 · 5 评论 -
微信浏览器如何不使用缓存
微信浏览器是在webview的上层做的缓存:就是如果请求过了这个地址,就会存在本地,之后不取线上了。那么如何不适用缓存呢?在调试阶段或者频繁更新的页面加入以下头信息:原创 2016-12-13 09:45:28 · 4583 阅读 · 0 评论 -
CSS 元素垂直居中的 6种方法
转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/2012年03月30日 ⁄ Web设计 ⁄ 评论数 1 ⁄ 被围观 306+利用CSS进行元素转载 2016-03-24 18:48:53 · 3696 阅读 · 0 评论 -
MUI-基础01
如果你没有研究mui就贸然的上手HBuilder,那你的开发过程是痛苦的,花一点时间研究下mui,对你之后开发app有很大的帮助。网址教程再好,也会有疏漏的地方,还需要你仔细阅读官方文档,附地址:http://dcloudio.github.io/mui/initmui封装了很多常用的页面方法,都需要在init中设置,例如转载 2016-03-18 22:53:21 · 3335 阅读 · 0 评论 -
HTML5应用性能调优工具WAPA – 介绍篇
WAPA来源WAPA是Web Application Performance Analyzer(Web应用性能分析器)的简称,其来源于Intel软件与服务部门全球合作伙伴关系事业部HTML5应用团队的创新项目。旨在给开发者提供如何编写高性能HTML5应用程序提供代码级别的建议。众所周知,Web应用很长一段时间因为其性能底下的问题,无法和本地应用在用户体验上相媲美,随着HTML5以及转载 2013-09-17 16:09:07 · 1474 阅读 · 0 评论 -
HTML5 前端框架 jQuery Mobile 使用教程
1. 简介jQuery Mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的针对触屏智能手机与平板电脑的Web应用的前端开发框架。jQuery Mobile构建于大名鼎鼎的jQuery 以及 jQuery UI类库之上,为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问性。转载 2013-09-17 16:09:08 · 5434 阅读 · 0 评论 -
用HTML5/CSS3/JS开发Android/IOS应用
现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。 在文章的末尾,也介绍了使用JAVA、C#、Lua以及AS3来开发安卓应用的工具。 希望大家都能找到适合自己的开发工具!祝大家开发安转载 2013-09-16 17:16:32 · 2680 阅读 · 0 评论 -
html5高价值的android屏幕适配精华教程(HTML5+CSS3)!
猪猪,想必你也知道,Android平台的终端至少有千种之多,各个版本的系统都有,再加上2次开发改造的系统,版本确实不少;而且分辨率也相当分散,并不像iphone哪么集中。 因此,想让一款软件适配所有的终端,压力确实比西天取经还大。不过,事在人为,还是有办法尽量适配大多数终端的。 所谓终端的兼容适配就是屏幕适配。屏幕适配往往指的就是屏幕大小和屏幕密度的适配。终端适配转载 2013-09-16 16:23:44 · 20670 阅读 · 1 评论 -
解决Html5用canvas绘制不出来图片的问题
如果使用html5的ctx.drawImage(img,0,0);绘制不出来,就改为:img.onload = function(){ctx.drawImage(img,0,0);}只有img 加载完了,你画它才有意义。原创 2013-09-16 16:07:06 · 10474 阅读 · 1 评论 -
基于HTML5的超级玛丽游戏demo
【CSON原创】基于HTML5的超级玛丽游戏demo功能说明: 基于HTML5的超级玛丽游戏的demo,方向键左右控制移动,方向键上控制跳跃,该游戏基于本人开发的HTML5游戏框架cnGameJS(详情点击这里:HTML5游戏框架cnGameJS开发实录)。 请用最新版本浏览器查看。效果展示: 代码实现: 该游戏demo主要转载 2013-09-05 11:20:22 · 7950 阅读 · 0 评论 -
HTML5游戏框架cnGameJS开发实录
cnGameJS是本人开发的一个基于HTML5的游戏框架,包括资源加载,碰撞检测,动画等模块。本系列文章主要介绍各个模块的开发流程,以及附上两个使用该框架进行开发的游戏demo。目录:1.核心函数模块2.资源加载模块3.基本图形模块4.外部输入模块5.碰撞检测模块6.动画模块7.精灵对象8.游戏循环对象9.游戏地图对象转载 2013-09-05 11:18:54 · 1636 阅读 · 0 评论 -
利用HTML5开发Android
● Android设备多分辨率的问题Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍三种解决方式:1 viewport属性 2 CSS控制 3 JS控制1 viewport属性放在HTML的中 Html转载 2013-09-05 12:43:19 · 26916 阅读 · 4 评论 -
Cocos2d-x-html5之HelloWorld深入分析与调试
另:本章所用Cocos2d-x版本为:Cocos2d-html5-v2.1.1http://cn.cocos2d-x.org/download html5的时代正在来临,其可以方便的运行在多平台上并调用OPENGL 进行图形渲染,大量使用html5开发的2D和3D游戏正在涌现,Cocos2d-x也顺应形势推出了相应的版本,今天我们来学习一下Coco转载 2013-09-24 10:33:22 · 9653 阅读 · 0 评论 -
Notepad++代码自动完成(jQuery版)
写在前面:一直很喜欢 Notepad++ 这款IDE,小巧灵活、功能齐全。这篇文章早就写了,但一直没有放到外部的blog中来,今天移到这儿,让更多的人知道其实Notepad++照样可以很强大。Notepad++有很多的插件可以安装,有兴趣的同学不妨自己研究一下,相信会有惊喜等着你。Notepad++代码自动完成(jQuery版)Notepad++的代码提示文件是一个XML文件,转载 2013-09-24 10:55:53 · 7263 阅读 · 0 评论 -
Webstorm & PhpStorm的序列号和证书
WebStorm注册码User Name:EMBRACE License Key:===== LICENSE BEGIN =====24718-1204201000001h6wzKLpfo3gmjJ8xoTPw5mQvYYA8vwka9tH!vibaUKS4FIDIkUfy!!f3C"rQCIRbShpSlDcFT1xmJi5转载 2013-09-24 13:55:26 · 51832 阅读 · 4 评论 -
MUI-几种页面打开方式
几种打开页面的方式1.初始化时创建子页面2.直接打开新页面3.预加载页面1.初始化时创建子页面1234567891011121314mui.init({ subpages: [{原创 2016-03-18 22:39:05 · 30092 阅读 · 2 评论 -
MUI多端发布开发指南
一套代码,实现wap、微信公众号、iOS和Android的App以及流应用,并且保证在App平台上有更好的体验,这对于提升开发效率有巨大的帮助。实现多端发布,需要处理平台差异,尤其是HTML5+规范扩展的浏览器并不支持的API,需要兼容降级或动态去除方案。本文详细讲述了mui的多端发布功能,能做什么,不能做什么,能做的怎么做。运行环境识别多端发布首先需要识别在不同的运行环境转载 2016-03-30 15:01:41 · 3850 阅读 · 0 评论 -
使用jQuery Mobile和Phone Gap开发Android应用程序
经过了一段时间的学习,初步了解了该如何使用jQuery Mobile和 Phone Gap来开发一个Android应用程序,也想把这些东西介绍给大家。 1、 软件准备 要进行android app的开发,当然需要准备Java, eclipse和安装Android SDK,这个部分网络上面很多方法,搜索“安装Android SDK”即可找到很多答案,所以就不再这里浪费口水。 2、 知转载 2014-02-11 14:05:11 · 1705 阅读 · 0 评论 -
PhoneGap对比原生android应用程序
什么是PhoneGap,其实就是在手机中可以写html代码的插件,下面一段话来源网摘“PhoneGap是一个开放源代码的,跨平台的构建移动应用程序的框架。在PhoneGap中,完全通过HTML,CSS和JavaScript构建应用程序,但是它们却可以像本地程序一样使用iPhone 、iPad,Android,blackberry,Symbian,Palm等硬件功能。PhoneGap的目标就是通过标转载 2014-02-10 15:44:42 · 4901 阅读 · 1 评论 -
一步一步学Jquery+HTML5做游戏教程讨论
第一次写教程~希望大家多提提意见~共同进步~嘿嘿 教程地址: 一步一步学做游戏 第一回:游戏分析一步一步学做游戏 第二回:让蘑菇随鼠标动起来一步一步学做游戏 第三回:让熊动起来一步一步学做游戏 第四回:熊碰撞边界处理 一步一步学做游戏 第五回:熊碰撞蘑菇处理 一步一步学做游戏 第六回:绘制奖品一步一步学做游戏 第七回:熊碰到奖品处理一步一步学做游戏 第八回:转载 2013-09-24 13:49:19 · 3374 阅读 · 5 评论 -
一步一步学Cocos2d-html5做游戏教程(入门篇)
原来使用Jquery+html5写了一个游戏,并写了几篇文章讲述了实现的过程现在使用Cocos2d-html5引擎按照原来思路把游戏写一遍,欢迎拍砖~游戏地址:http://www.html5china.com/html5games/Mushroom/Mushroom/index.html目录:一步一步学Cocos2d-html5做游戏 第一回:Cocos2d-html5目转载 2013-09-24 13:48:30 · 5084 阅读 · 0 评论 -
Cocos2d-html5游戏开发,常用工具集合
代码编辑器IDEWebStorm (Windows, Mac) Cocos2d-html5官方团队在用,非常优秀的工具,请大家支持正版动画编辑器 Animation EditorSpriteHelper关卡编辑器 Level EditorLevelHelper位图字体工具Bitmap Font ToolsBMFont (Windows)Fon转载 2013-09-24 13:42:50 · 2948 阅读 · 0 评论