HTML5开发微信企业号的示例课件.ppt

1、Yonyou Software Corporation用友软件股份有限公司姓名 包文哲2014年 12月 12日HTML5支持U8HR微信企业号二次开发Yonyou Software Corporation为什么HTML 5 深受欢迎什么是HTML 5HTML 5 能解决什么问题HTML 5 介绍Yonyou Software CorporationHTML 5 时代为什么HTML 5 深受欢迎 主流浏览器都对HTML5提供了支持。为什么？各浏览器之间不统一，光是修改兼容性的问题就浪费了大量时间。微软的推动Yonyou Software CorporationHTML5面对的问题HTML5吸引

2、人的地方开发者对HTML5的抱怨Yonyou Software CorporationHTML 5 时代富媒体类Canvas用于媒介回放的 video 和 audio 元素文档结构类新的特殊内容元素，比如 article、footer、header、nav、section通信交互类Web Storage通信APIWeb workers文件APIHTML 5 的新特征及其应用其他离线应用程序History API新的表单控件，比如 calendar、date、time、email、url、search地理位置Yonyou Software CorporationHTML 5 时代浏览器支持最新版

3、本的 Safari、Chrome、Firefox、Opera以及 Internet Explorer支持大多数 HTML5 特性。Yonyou Software CorporationHTML 5 时代JavascriptJavaScript是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：ECMAScript，由ECMA-262定义，提供核心语言功能；文档对象模型（DOM），提供访问和操作网页内容的方法和接口；浏览器对象模型（BOM），提供与浏览器交互的方法和接口。Yonyou Software CorporationHTML 5 时代Javascript示例Yonyou So

4、ftware Corporation语法的改变HTML5的结构表单及其他新增和改良元素拖放APIHTML5与HTML4的区别Yonyou Software CorporationHTML5与HTML4的区别语法的改变Yonyou Software CorporationHTML5与HTML4的区别HTML5的结构HTML5为了使文档结构更加清晰明确，容易阅读，增加了很多新的结构元素。比如 article、footer、header、nav、section、aside。示例Yonyou Software CorporationHTML5与HTML4的区别表单及其他新增和改良元素新增元素与属性内容

5、语法备注表单内元素的form属性示例代码清单4-1.html，元素放在表单外部formaction单击不同的按钮时可以提交到不同页面autofocus自动获得光标焦点表单内元素的required属性内容为空白不允许提交placeholder未输入状态的输入提示文本框的list属性类似于选择框，示例代码清单4-8.htmlpattern正则验证新增input类型示例代码清单4-15.htmlYonyou Software CorporationHTML5与HTML4的区别表单及其他新增和改良元素新增元素与属性安全性增强的iframe元素增强的script元素Yonyou Software Cor

6、porationHTML5与HTML4的区别拖放API在HTML5中新增了直接拖放操作的API。之前使用mousedown、mousemove和mouseup来实现拖放操作。但是只支持浏览器内部的拖放。HTML5支持浏览器与其他应用程序之间数据的互相拖放。ondragscript当拖动元素时运行脚本ondragendscript当拖动操作结束时运行脚本ondragenterscript当元素被拖动至有效的拖放目标时运行脚本ondragleavescript当元素离开有效拖放目标时运行脚本ondragoverscript当元素被拖动至有效拖放目标上方时运行脚本ondragstartscript当

7、拖动操作开始时运行脚本ondropscript当被拖动元素正在被拖放时运行脚本Yonyou Software CorporationHTML 5 内容概要Communication通信API1Web存储2离线应用程序3Web Workers4文件API5Yonyou Software CorporationHTML 5 内容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5测试10Yonyou Software CorporationHTML 5 内容概要Communication通信API1Web存储2离线应

8、用程序3Web Workers4文件API5Yonyou Software CorporationCross-document messaging跨文档消息传输WebSocket APIServer-Sent EventsCommunication通信APIYonyou Software CorporationCommunication通信APICross-document messaging跨文档消息传输功能：实现不同页面、不同端口、不同域之间的消息传递。侦听方法：window.addEventListener(message,function().,false);发送消息方法：otherW

9、indows.postMessage(message,targetOrigin);Yonyou Software CorporationCommunication通信APIWebSocket API功能：客户端与服务端通过socket端口来传递数据。可以实现服务器数据推送技术。声明方法：var webSocket=new WebSocket(“ws:/localhost:1818/socket”);/接收消息webSocket.onmessage=function(msg)/发送消息webSocket.send(text);Yonyou Software CorporationCommunic

10、ation通信APIServer-Sent Events功能：服务器每隔一段时间主动向客户端发送一个带数据的事件。与WebSockt不同的是，WebSockt是双向的，该API实现从服务器端发送到客户端的单向通信机制。声明方法：var source=new EventSource(WebForm1.aspx);source.onmessage=function(event)Yonyou Software CorporationHTML 5 内容概要Communication通信API1Web存储2离线应用程序3Web Workers4文件API5Yonyou Software Corporat

11、ion基本用法localStoragesessionStorageindexedDB数据库Web存储Yonyou Software CorporationHTML 5 内容概要Communication通信API1Web存储2离线应用程序3Web Workers4文件API5Yonyou Software CorporationCache Manifest 基础Mainfest文件交互过程applicationCache对象离线应用程序Yonyou Software CorporationHTML 5 内容概要Communication通信API1Web存储2离线应用程序3Web Worker

12、s4文件API5Yonyou Software CorporationWeb Workers 和 DOM线程嵌套适用场合Web WorkersYonyou Software CorporationHTML 5 内容概要Communication通信API1Web存储2离线应用程序3Web Workers4文件API5Yonyou Software Corporation文件对象ArrayBuffer对象与ArrayBufferView对象Blob对象FileReader对象Base64编码支持文件APIYonyou Software CorporationHTML 5 内容概要XMLHttpR

13、equest Level 26Canvas7History API8HTML5 Geolocation9HTML5测试10Yonyou Software Corporation发送数据发送字符串发送表单数据上传文件跨域数据请求XMLHttpRequest Level 2Yonyou Software CorporationHTML 5 内容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5测试10Yonyou Software CorporationCanvasHTML5中最激动人心的功能认识canvas元素C

14、anvas的概念与特征保存和恢复绘图状态变形缩放旋转变换矩阵将画布导出为图像Canvas高级功能加载图像调整和剪切图像变形像素处理基本图像效果视频处理处理图像和视频创建动画循环记忆要绘制的形状改变方向圆周运动反弹制作动画物理常识速度、加速度、摩擦力碰撞检测动量守恒实现高级动画Yonyou Software Corporation图表CanvasYonyou Software CorporationHTML 5 内容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5测试10Yonyou Software Corp

15、orationHTML5中新增了通过脚本语言在浏览器历史记录中添加项目的功能在不刷新页面的前提下显示改变浏览器地址栏的功能History APIYonyou Software CorporationHTML 5 内容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5测试10Yonyou Software CorporationHTML5 Geolocation API 用于获得用户的地理位置。示例1在地图中显示结果示例2HTML5 GeolocationYonyou Software CorporationHTML 5 内容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5测试10Yonyou Software CorporationU8+HR 企业微信号Yonyou Software CorporationU8+HR 企业微信号-我的薪资Yonyou Software Corporation