H5 | 易学教程

使用js实现微信小页面翻页的原理介绍

阅读更多关于使用js实现微信小页面翻页的原理介绍

文中要介绍的内容是四个手机页面，手指向上或者向下滑动可以实现翻页的功能。由于代码比较简短，可能存在许多bug，思路可供大家参考。 1.实现方式介绍：首先我们在页面写一个div----box，这个div又包含4个div---page1-page4； page1到page4每个div大小和屏幕一样大。首先显示page1，使用js监听用户触摸事件，当用户滑动屏幕时，执行css动画，page1向上移动到出界面，page2向上移动到进入界面。动画执行完成后，需要使用js将page的属性-->动画类去掉，以免影响其下一步操作。 2.编写html代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>WeChatPortPage</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <link rel="stylesheet" type="text/css" href="css/animation.css"/> </head> <body> <div

h5 接入微信支付

阅读更多关于 h5 接入微信支付

我们公司，现在用ping++ 做h5接入，用的是 h5"壹收款" 准备：如果公司，现在还没有公众号的话，支付宝。可以把这些工作，给ping++ 来做这些事情注册微信公众号，开通支付功能。注册ping++ (如果是自己开开通的微信支付，要填写相关信息) 微信设置网页授权获取用户基本信息修改回调地址。（不能会报 redirect_uri 错误）开发： 1.查看ping++ 接入文档 https://www.pingxx.com/guidance 2.查看微信接口文档 http://mp.weixin.qq.com/wiki/1/8a5ce6257f1d3b2afb20f83e72b72ce9.html 注意事项： 1.open_id ：只有在微信支付下是需要的，对于当前的公众号是唯一的，如果是多个公众号的用户，统一需要，unit_id 可以查询文档。我现在也正在做，会持续更新的。也遇到了些问题。自己建立了群：436498871 用户获取逻辑在微信段点击进入h5页面时，就获取用户的open_id 创建本地用户，后面在个人中心中，可以设置手机号等登录方式。来实现用户的注入。--好处是，用户的操作性简单，没有什么成本在用户在有交互性的数据时，弹出注册页面。在支付时，也是要把最好把用户的帐号与 open_id 绑定。在微信支付时，open_id是必须获取的来源：

Phaser.js-开发愤怒的小鸟(上)

阅读更多关于 Phaser.js-开发愤怒的小鸟(上)

切入正题，想必大家之前都了解过Phaser.js，PS：不了解的可以在官网进去 http://www.bootcdn.cn/phaser/readme/ 看一下就可以，在开发前要事先去官网把需要的框架组件下载下来，这个游戏写完的下载地址 : http://git.oschina.net/8946a/bird_-jumping 好废话少说下面看干货首先我们先要引用框架，没错就像这样 <script type="text/javascript" src="phaser.min.js"></script> 就像大家所了解的那样接下来我们创建一个DIV 用来放置动画的 “场景” <div id="game_div"></div> 好了，光做完这些还不行，这只是刚刚开始，我们在加一些CSS的东西，让他看起来更加的漂亮 #game_div, p { width: 400px; margin: auto; margin-top: 20px; } OK，一起准备工作都完成了就像现在这样是不是有些迫不及待的进行开发了，废话少说，带大家一起开始进行JS部分的绘制  首先我们要创建游戏的宽高，没错就是这样 var game = new Phaser.Game(400,490,Phaser.AUTO,'game_div'); var game_state = {};

最浪漫的程序员

阅读更多关于最浪漫的程序员

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一直以来，程序员都给大家以高智商低情商，不懂得浪漫不会哄女生开心的形象小优向大家征集了自己做过的最浪漫的事以下作品出乎我的意料，简直是惊喜有一直在全世界不停的找另一半的有一见到漂亮女孩就忍不住给人家画个代码头像的还有大胆表白的三天不见面，就各种说“想你”的一直说“I LOVE YOU”说到吐的更会算好跟你在一起的每一天每一小时每一分每一秒最后，还有用ALERT求婚的（话说你老板同意了吗？）然而小优最服气的，是一个做H5的前端哥们他早早看上同项目组的测试妹子，却一直不敢表白终于有一天赶上大版本的发布深夜大家都走了，只有他跟妹子不约而同的留到了最后他修好最后一行代码，发测试链接给妹子然后忐忑的坐立不安 1秒、2秒、3秒…… 1分、2分、3分…… 短暂而又漫长的10分钟过去了手机嗡嗡嗡地震动起来他长舒了一口气，打开微信她发过来一张大大的H5页面性能测试结果然后说他犹豫片刻，终于勇敢的回复这是小优听过的，最浪漫的爱情！腾讯优测H5测试兼容适配主流真机，分析页面核心性能输入URL就能测，10分钟内出结果 #### 点击这里，快给你的H5也做个测试吧更多精彩内容欢迎关注腾讯优测的微信公众账号：腾讯优测是专业的移动云测试平台，为应用、游戏

H5、React Native、Native应用对比分析

阅读更多关于 H5、React Native、Native应用对比分析

H5、React Native、Native应用对比分析离上次在北京开源中国盛典已经快一个月了，有点想念@oschina的小伙伴了。我必须承认oschina是国内最大的同性社交网站，这也是无可争议的事实，但是，我真想的是妹子！！！［偷笑］。从上次演讲后，有一些同学陆陆续续问我演讲的PPT在哪，还有不少同学希望看到［手稿］，这学习精神，在下实在是佩服啊。有着这么热情的小伙伴，我激动不已啊，所以在此公布［手稿］，方便大家可以将［PPT］和［手稿］双手齐下，：）。2015年，我们要一起努力完成以前吹过的牛逼..... 下面是［多图预警］，请考虑切wifi，土豪请无视我，也可拿红包砸我，：）－－－－－－－－－－－－－－－华丽丽的分割线，主题开始－－－－－－－－－－－－－－－－－－－－－ “存在即合理”。凡是存在的，都是合乎规律的。任何新事物的产生总要的它的道理；任何新事物的发展总是有着取代旧事物的能力。React Native来的正是时候，一则是因为H5发展到一定程度的受限；二则是移动市场的迅速崛起强调团队快速响应和迭代；三则是用户的体验被放大，用户要求极致的快感，除非你牛x（例如：12306最近修改手机号需要用户自己发短信接收验证码）。以下简单的介绍下 H5、React Native、Native的含义：最近三四年间

项目管理_团队协作

阅读更多关于项目管理_团队协作

好久不写博客了，最近懒懒散散也做了不少的事情，也每次都有总结。最近研究JS原生继承，JS组件开发，nodeJS, Appcloud，H5,C3，PHP+mysql，Git同步，还有就是在技术群冒泡啦，回答和研究问题今天研究下Puer 后面好好研究下AngluarJS 来源： oschina 链接： https://my.oschina.net/u/142267/blog/503705

HTML5 实现手机拍照上传

阅读更多关于 HTML5 实现手机拍照上传

背景：移动端H5项目，需要实现调用手机拍照，并将图片压缩上传功能。页面样式：上传图片有原生的方法<input type="file" accept="image/*">，如果只想要拍照上传，不希望用户选择图片上传，可以通过添加capture属性，该属性值有camcorder/microphone/camera...，此处选择camera。PS：该属性存在浏览器兼容性问题，不是所有的浏览器都支持。 <input type="file" accept="image/*" capture="camera" > 因为原生file样式不满足要求，需要进行相应的处理，此时使用定位，在input上面放置我们想要的页面效果。然后当点击上面的元素，就可以触发我们的input进行图片上传。此时的问题是：当点击input上面的元素，需要事件穿透，即相当于点击input。则借助于css3新属性pointer-events。 //使用cursor进行事件穿透，来阻止元素成为鼠标事件的目标 button{ cursor:pointer; pointer-events:none; } ----此时图片上传的样式已经处理好了---- 代码片段： <style > *{ padding: 0; margin: 0; } .wrapper{ width: 320px; height: 50px; margin:

20分钟轻松制作移动网站

阅读更多关于 20分钟轻松制作移动网站

最近关于移动网站开发或APP轻应用的内容越来越多了，，有一些好的方法可以快速开发，但不系统，这里推荐一本书吧。　PhoneGap的目的是用来快速开发移动跨平台 APP，它基于 HTML 5，支持市面上流行的移动设备，《构建跨平台APP：HTML 5+PhoneGap移动应用实战》的特色就是快速学习如何利用 HTML 5和 PhoneGap开发移动 APP。《构建跨平台APP：HTML 5+PhoneGap移动应用实战》分为三篇，第一篇介绍 HTML 5为移动页面设计的一些新元素，包含移动开发的大背景、移动布局、地理位置、Web存储、多媒体等等；第二篇介绍 PhondeGap辅助 HTML 5开发应用的一些 API，包含事件处理、信息处理、加速度、地理位置、指南针、本地存储和多媒体等等；最后一篇通过两个实例，介绍了 HTML 5+PhoneGap开发移动 APP的两个项目开发流程和实现代码。《构建跨平台APP：HTML 5+PhoneGap移动应用实战》适合有一定 HTML+CSS+JavaScript网页开发基础的人员，可作为培训教材使用。来源： oschina 链接： https://my.oschina.net/u/1858072/blog/613429

H5 缓存机制浅析移动端 Web 加载性能优化

阅读更多关于 H5 缓存机制浅析移动端 Web 加载性能优化

腾讯Bugly特约作者：贺辉超 1 H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 H5 应用程序缓存为应用带来三个优势：离线浏览用户可在应用离线时使用它们速度已缓存资源加载得更快减少服务器负载浏览器将只从服务器下载更新过或更改过的资源。根据标准，到目前为止，H5 一共有6种缓存机制，有些是之前已有，有些是 H5 才新加入的。浏览器缓存机制 Dom Storgage（Web Storage）存储机制 Web SQL Database 存储机制 Application Cache（AppCache）机制 Indexed Database （IndexedDB） File System API 下面我们首先分析各种缓存机制的原理、用法及特点；然后针对 Anroid 移动端 Web 性能加载优化的需求，看如果利用适当缓存机制来提高 Web 的加载性能。 2 H5 缓存机制原理分析 2.1 浏览器缓存机制浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。这应该是 WEB

WebAPP输入框被软键盘遮挡肿么办？

阅读更多关于 WebAPP输入框被软键盘遮挡肿么办？

WebAPP输入框被软键盘遮挡肿么办？当输入框处于半屏以下位置软键盘弹出时遇到的坑： 1.输入框被遮挡，看不见输入的内容 2.页面自动上移，但收回软键盘时页面少了一截 3.IOS系统上使用JRoll，IScroll等滑动方案时，光标不随输入框移动 4.软键盘弹出时窗口变小元素错位解决方案： 1、能不用滑动插件就不用。 2、IOS->使用 overflow:auto;-webkit-overflow-scrolling; 尽量避免使用JRoll等插件 3、Android->使用JRoll的fixedinput插件建议从设计角度解决被遮挡的问题，见下文。目前手机系统、浏览器系统众多，版本各异，表现诡异，兼容起来不比当年IE6轻松，麻辣个蛋，好不容易从PC开发跳到移动开发，还以为手机浏览器加了个-webkit前缀是万能的，握勒个去，谁知滑动卡顿、fixed走位、监听安卓返回键、某些机型focus唤不起软键盘、输入框被软键盘遮挡、安卓4.4以下不支持date等表单类型、滥用css3动画整个APP都不好了等等问题接踵而至，前端开发道远而任重啊~~呃。拿我最近的一个项目举个粟子。对于设计师来说，表单理所当然一直往下排，但对于要实现功能的程序猿来说，苦逼啊。上图至少三屏才能显示完，输入框被软键盘遮挡不可避免，还要处理各种兼容问题，软键盘弹出时有的浏览器不改变窗口高度

订阅 H5