HTML5开发微信企业号的示例

YonyouSoftwareCorporation用友软件股份有限公司姓名包文哲2014年12月12日HTML5支持U8HR微信企业号二次开发YonyouSoftwareCorporation为什么HTML5深受欢迎什么是HTML5HTML5能解决什么问题HTML5介绍YonyouSoftwareCorporationHTML5时代为什么HTML5深受欢迎主流浏览器都对HTML5提供了支持。为什么？各浏览器之间不统一，光是修改兼容性的问题就浪费了大量时间。微软的推动YonyouSoftwareCorporationHTML5面对的问题HTML5吸引人的地方开发者对HTML5的抱怨YonyouSoftwareCorporationHTML5时代富媒体类Canvas用于媒介回放的video和audio元素文档结构类新的特殊内容元素，比如article、footer、header、nav、section通信交互类WebStorage通信APIWebworkers文件APIHTML5的新特征及其应用其他离线应用程序HistoryAPI新的表单控件，比如calendar、date、time、email、url、search地理位置YonyouSoftwareCorporationHTML5时代浏览器支持最新版本的Safari、Chrome、Firefox、Opera以及InternetExplorer支持大多数HTML5特性。YonyouSoftwareCorporationHTML5时代JavascriptJavaScript是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：ECMAScript，由ECMA-262定义，提供核心语言功能；文档对象模型（DOM），提供访问和操作网页内容的方法和接口；浏览器对象模型（BOM），提供与浏览器交互的方法和接口。YonyouSoftwareCorporationHTML5时代Javascript示例YonyouSoftwareCorporation语法的改变HTML5的结构表单及其他新增和改良元素拖放APIHTML5与HTML4的区别YonyouSoftwareCorporationHTML5与HTML4的区别语法的改变!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN!DOCTYPEhtmlYonyouSoftwareCorporationHTML5与HTML4的区别HTML5的结构HTML5为了使文档结构更加清晰明确，容易阅读，增加了很多新的结构元素。比如article、footer、header、nav、section、aside。示例YonyouSoftwareCorporationHTML5与HTML4的区别表单及其他新增和改良元素新增元素与属性内容语法备注表单内元素的form属性textareaform=testform/textarea示例代码清单4-1.html，元素放在表单外部formactioninputtype=submitvalue=v1formaction=s1.aspx单击不同的按钮时可以提交到不同页面autofocusinputtype=textautofocus自动获得光标焦点表单内元素的required属性inputid=emailtype=emailrequired/内容为空白不允许提交placeholderinputtype=textplaceholder=请输入未输入状态的输入提示文本框的list属性inputtype=textlist=greetings类似于选择框，示例代码清单4-8.htmlpatterninputtype=textpattern=”[0-9]“正则验证新增input类型示例代码清单4-15.htmlYonyouSoftwareCorporationHTML5与HTML4的区别表单及其他新增和改良元素新增元素与属性安全性增强的iframe元素增强的script元素scriptsrc=test.jsasynconload=myInit()/scriptscriptsrc=test2.jsdeferonload=myInit2()/scriptYonyouSoftwareCorporationHTML5与HTML4的区别拖放API在HTML5中新增了直接拖放操作的API。之前使用mousedown、mousemove和mouseup来实现拖放操作。但是只支持浏览器内部的拖放。HTML5支持浏览器与其他应用程序之间数据的互相拖放。ondragscript当拖动元素时运行脚本ondragendscript当拖动操作结束时运行脚本ondragenterscript当元素被拖动至有效的拖放目标时运行脚本ondragleavescript当元素离开有效拖放目标时运行脚本ondragoverscript当元素被拖动至有效拖放目标上方时运行脚本ondragstartscript当拖动操作开始时运行脚本ondropscript当被拖动元素正在被拖放时运行脚本YonyouSoftwareCorporationHTML5内容概要Communication通信API1Web存储2离线应用程序3WebWorkers4文件API5YonyouSoftwareCorporationHTML5内容概要XMLHttpRequestLevel26Canvas7HistoryAPI8HTML5Geolocation9HTML5测试10YonyouSoftwareCorporationHTML5内容概要Communication通信API1Web存储2离线应用程序3WebWorkers4文件API5YonyouSoftwareCorporationCross-documentmessaging跨文档消息传输WebSocketAPIServer-SentEventsCommunication通信APIYonyouSoftwareCorporationCommunication通信APICross-documentmessaging跨文档消息传输功能：实现不同页面、不同端口、不同域之间的消息传递。侦听方法：window.addEventListener(message,function(){..},false);发送消息方法：otherWindows.postMessage(message,targetOrigin);YonyouSoftwareCorporationCommunication通信APIWebSocketAPI功能：客户端与服务端通过socket端口来传递数据。可以实现服务器数据推送技术。声明方法：varwebSocket=newWebSocket(“ws://localhost:1818/socket”);//接收消息webSocket.onmessage=function(msg){}//发送消息webSocket.send(text);YonyouSoftwareCorporationCommunication通信APIServer-SentEvents功能：服务器每隔一段时间主动向客户端发送一个带数据的事件。与WebSockt不同的是，WebSockt是双向的，该API实现从服务器端发送到客户端的单向通信机制。声明方法：varsource=newEventSource(WebForm1.aspx);source.onmessage=function(event){}YonyouSoftwareCorporationHTML5内容概要Communication通信API1Web存储2离线应用程序3WebWorkers4文件API5YonyouSoftwareCorporation基本用法localStoragesessionStorageindexedDB数据库Web存储YonyouSoftwareCorporationHTML5内容概要Communication通信API1Web存储2离线应用程序3WebWorkers4文件API5YonyouSoftwareCorporationCacheManifest基础Mainfest文件交互过程applicationCache对象离线应用程序YonyouSoftwareCorporationHTML5内容概要Communication通信API1Web存储2离线应用程序3WebWorkers4文件API5YonyouSoftwareCorporationWebWorkers和DOM线程嵌套适用场合WebWorkersYonyouSoftwareCorporationHTML5内容概要Communication通信API1Web存储2离线应用程序3WebWorkers4文件API5YonyouSoftwareCorporation文件对象ArrayBuffer对象与ArrayBufferView对象Blob对象FileReader对象Base64编码支持文件APIYonyouSoftwareCorporationHTML5内容概要XMLHttpRequestLevel26Canvas7HistoryAPI8HTML5Geolocation9HTML5测试10YonyouSoftwareCorporation发送数据发送字符串发送表单数据上传文件跨域数据请求XMLHttpRequestLevel2YonyouSoftwareCorporationHTML5内容概要XMLHttpRequestLevel26Canvas7HistoryAPI8HTML5Geolocation9HTML5测试10YonyouSoftwareCorporationCanvasHTML5中最激动人心的功能认识canvas元素Canvas的概念与特征保存和恢复绘图状态变形缩放旋转变换矩阵将画布导出为图像Canvas高级功能加载图像调整和剪切图像变形像素处理基本图像效果视频处理处理图像和视频创建动画循环记忆要绘制的形状改变方向圆周运动反弹制作动画物理常识速度、加速度、摩擦力碰撞检测动量守恒实现高级动画YonyouSoftwareCorporation图表CanvasYonyouSoftwareCorporationHTML5内容概要XMLHttpRequestLevel26Canvas7HistoryAPI8HTML5Geolocation9HTML5测试10YonyouSoftwareCorporationHTML5中新增了通过脚本语言在浏览器历史记录中添加项目的功能在不刷新页面的前提下显示改变浏览器地址栏的功能HistoryAPIYonyouSoftwareCorporationHTML5内容概要XMLHttpRequestLevel26Canvas7HistoryAPI8HTML5Geolocation9HTML5测试10YonyouSoftwareCorporationHTML5GeolocationAPI用于获得用户的地理位置。示例1在地图中显示结果示例2HTML5GeolocationYonyouSoftwareCorporationHTML5内容概要XMLHttpRequestLevel26Canvas7HistoryAPI8HTML5Geolocation9HTML5测试10YonyouSoftwareCorporationU8+HR企业微信号YonyouSoftwareCorporationU8+HR企业微信号---我的薪资YonyouSoftwareCorporation