HTML5开发微信企业号的示例课件.ppt
用友软件股份有限公司姓名 包文哲2014年 12月 12日,HTML5支持U8HR微信企业号二次开发,用友软件股份有限公司HTML5支持U8HR微信企业号二次开发,为什么HTML 5 深受欢迎什么是HTML 5HTML 5 能解决什么问题,HTML 5 介绍,为什么HTML 5 深受欢迎HTML 5 介绍,HTML 5 时代,HTML 5 时代为什么HTML 5 深受欢迎主流浏览器都对,HTML5面对的问题,HTML5吸引人的地方开发者对HTML5的抱怨,HTML5面对的问题HTML5吸引人的地方,HTML 5 时代,富媒体类Canvas用于媒介回放的 video 和 audio 元素,文档结构类新的特殊内容元素，比如 article、footer、header、nav、section,通信交互类Web Storage通信APIWeb workers文件API,HTML 5 的新特征及其应用,其他离线应用程序History API新的表单控件，比如 calendar、date、time、email、url、search地理位置,HTML 5 时代富媒体类文档结构类通信交互类HTML 5,HTML 5 时代,浏览器支持最新版本的 Safari、Chrome、Firefox 、Opera以及 Internet Explorer支持大多数 HTML5 特性。,HTML 5 时代浏览器支持,HTML 5 时代,JavascriptJavaScript是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：ECMAScript，由ECMA-262定义，提供核心语言功能；文档对象模型（DOM），提供访问和操作网页内容的方法和接口；浏览器对象模型（BOM），提供与浏览器交互的方法和接口。,HTML 5 时代Javascript,HTML 5 时代,Javascript示例,HTML 5 时代Javascript,语法的改变HTML5的结构表单及其他新增和改良元素拖放API,HTML5与HTML4的区别,语法的改变HTML5与HTML4的区别,HTML5与HTML4的区别,语法的改变,HTML5与HTML4的区别语法的改变,HTML5与HTML4的区别,HTML5的结构HTML5为了使文档结构更加清晰明确，容易阅读，增加了很多新的结构元素。比如 article、footer、header、nav、section、aside。示例,HTML5与HTML4的区别HTML5的结构,HTML5与HTML4的区别,表单及其他新增和改良元素新增元素与属性,HTML5与HTML4的区别表单及其他新增和改良元素内容语法,HTML5与HTML4的区别,表单及其他新增和改良元素新增元素与属性安全性增强的iframe元素增强的script元素,HTML5与HTML4的区别表单及其他新增和改良元素scr,HTML5与HTML4的区别,拖放API在HTML5中新增了直接拖放操作的API。之前使用mousedown、mousemove和mouseup来实现拖放操作。但是只支持浏览器内部的拖放。HTML5支持浏览器与其他应用程序之间数据的互相拖放。,HTML5与HTML4的区别拖放APIondragscrip,HTML 5 内容概要,HTML 5 内容概要Communication通信API1,HTML 5 内容概要,HTML 5 内容概要XMLHttpRequest Leve,HTML 5 内容概要,HTML 5 内容概要Communication通信API1,Cross-document messaging跨文档消息传输WebSocket APIServer-Sent Events,Communication通信API,Cross-document messaging跨文档消息传,Communication通信API,Cross-document messaging跨文档消息传输功能：实现不同页面、不同端口、不同域之间的消息传递。,侦听方法：window.addEventListener(message, function () ., false);发送消息方法：otherWindows.postMessage(message, targetOrigin);,Communication通信APICross-docume,Communication通信API,WebSocket API功能：客户端与服务端通过socket端口来传递数据。可以实现服务器数据推送技术。,声明方法：var webSocket = new WebSocket(“ws:/localhost:1818/socket”);/接收消息webSocket.onmessage = function (msg) /发送消息webSocket.send(text);,Communication通信APIWebSocket AP,Communication通信API,Server-Sent Events功能：服务器每隔一段时间主动向客户端发送一个带数据的事件。与WebSockt不同的是，WebSockt是双向的，该API实现从服务器端发送到客户端的单向通信机制。,声明方法：var source = new EventSource(WebForm1.aspx);source.onmessage = function (event) ,Communication通信APIServer-Sent,HTML 5 内容概要,HTML 5 内容概要Communication通信API1,基本用法localStoragesessionStorageindexedDB数据库,Web存储,基本用法Web存储,HTML 5 内容概要,HTML 5 内容概要Communication通信API1,Cache Manifest 基础Mainfest文件交互过程applicationCache对象,离线应用程序,Cache Manifest 基础离线应用程序,HTML 5 内容概要,HTML 5 内容概要Communication通信API1,Web Workers 和 DOM线程嵌套适用场合,Web Workers,Web Workers 和 DOMWeb Workers,HTML 5 内容概要,HTML 5 内容概要Communication通信API1,文件对象ArrayBuffer对象与ArrayBufferView对象Blob对象FileReader对象Base64编码支持,文件API,文件对象文件API,HTML 5 内容概要,HTML 5 内容概要XMLHttpRequest Leve,发送数据发送字符串发送表单数据上传文件跨域数据请求,XMLHttpRequest Level 2,发送数据XMLHttpRequest Level 2,HTML 5 内容概要,HTML 5 内容概要XMLHttpRequest Leve,Canvas,HTML5中最激动人心的功能,CanvasHTML5中最激动人心的功能认识canvas元素,图表,Canvas,图表Canvas,HTML 5 内容概要,HTML 5 内容概要XMLHttpRequest Leve,HTML5中新增了通过脚本语言在浏览器历史记录中添加项目的功能在不刷新页面的前提下显示改变浏览器地址栏的功能,History API,HTML5中新增了通过脚本语言在浏览器历史记录中添加项目的功,HTML 5 内容概要,HTML 5 内容概要XMLHttpRequest Leve,HTML5 Geolocation API 用于获得用户的地理位置。示例1在地图中显示结果示例2,HTML5 Geolocation,HTML5 Geolocation API 用于获得用户的地,HTML 5 内容概要,HTML 5 内容概要XMLHttpRequest Leve,U8+ HR 企业微信号,U8+ HR 企业微信号,U8+ HR 企业微信号-我的薪资,U8+ HR 企业微信号-我的薪资,HTML5开发微信企业号的示例课件,
