HTML5開發(fā)微信企業(yè)號的示例課件

1、用友軟件股份有限公司姓名 包文哲2014年 12月 12日HTML5支持U8HR微信企業(yè)號二次開發(fā)用友軟件股份有限公司HTML5支持U8HR微信企業(yè)號二次開發(fā)為什么HTML 5 深受歡迎什么是HTML 5HTML 5 能解決什么問題HTML 5 介紹為什么HTML 5 深受歡迎HTML 5 介紹HTML 5 時(shí)代為什么HTML 5 深受歡迎主流瀏覽器都對HTML5提供了支持。為什么？各瀏覽器之間不統(tǒng)一，光是修改兼容性的問題就浪費(fèi)了大量時(shí)間。微軟的推動HTML 5 時(shí)代為什么HTML 5 深受歡迎主流瀏覽器都對HTML5面對的問題HTML5吸引人的地方開發(fā)者對HTML5的抱怨HTML5面對的問題

2、HTML5吸引人的地方HTML 5 時(shí)代富媒體類Canvas用于媒介回放的 video 和 audio 元素文檔結(jié)構(gòu)類新的特殊內(nèi)容元素，比如 article、footer、header、nav、section通信交互類Web Storage通信APIWeb workers文件APIHTML 5 的新特征及其應(yīng)用其他離線應(yīng)用程序History API新的表單控件，比如 calendar、date、time、email、url、search地理位置HTML 5 時(shí)代富媒體類文檔結(jié)構(gòu)類通信交互類HTML 5 HTML 5 時(shí)代瀏覽器支持最新版本的 Safari、Chrome、Firefox 、Ope

3、ra以及 Internet Explorer支持大多數(shù) HTML5 特性。HTML 5 時(shí)代瀏覽器支持HTML 5 時(shí)代JavascriptJavaScript是一種專為與網(wǎng)頁交互而設(shè)計(jì)的腳本語言，由下列三個(gè)不同的部分組成：ECMAScript，由ECMA-262定義，提供核心語言功能；文檔對象模型（DOM），提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口；瀏覽器對象模型（BOM），提供與瀏覽器交互的方法和接口。HTML 5 時(shí)代JavascriptHTML 5 時(shí)代Javascript示例HTML 5 時(shí)代Javascript語法的改變HTML5的結(jié)構(gòu)表單及其他新增和改良元素拖放APIHTML5與HTM

4、L4的區(qū)別語法的改變HTML5與HTML4的區(qū)別HTML5與HTML4的區(qū)別語法的改變HTML5與HTML4的區(qū)別語法的改變HTML5與HTML4的區(qū)別HTML5的結(jié)構(gòu)HTML5為了使文檔結(jié)構(gòu)更加清晰明確，容易閱讀，增加了很多新的結(jié)構(gòu)元素。比如 article、footer、header、nav、section、aside。示例HTML5與HTML4的區(qū)別HTML5的結(jié)構(gòu)HTML5與HTML4的區(qū)別表單及其他新增和改良元素新增元素與屬性內(nèi)容語法備注表單內(nèi)元素的form屬性示例代碼清單4-1.html，元素放在表單外部formaction單擊不同的按鈕時(shí)可以提交到不同頁面autofocus自動獲

5、得光標(biāo)焦點(diǎn)表單內(nèi)元素的required屬性內(nèi)容為空白不允許提交placeholder未輸入狀態(tài)的輸入提示文本框的list屬性類似于選擇框，示例代碼清單4-8.htmlpattern正則驗(yàn)證新增input類型示例代碼清單4-15.htmlHTML5與HTML4的區(qū)別表單及其他新增和改良元素內(nèi)容語法HTML5與HTML4的區(qū)別表單及其他新增和改良元素新增元素與屬性安全性增強(qiáng)的iframe元素增強(qiáng)的script元素HTML5與HTML4的區(qū)別表單及其他新增和改良元素scrHTML5與HTML4的區(qū)別拖放API在HTML5中新增了直接拖放操作的API。之前使用mousedown、mousemove和m

6、ouseup來實(shí)現(xiàn)拖放操作。但是只支持瀏覽器內(nèi)部的拖放。HTML5支持瀏覽器與其他應(yīng)用程序之間數(shù)據(jù)的互相拖放。ondragscript當(dāng)拖動元素時(shí)運(yùn)行腳本ondragendscript當(dāng)拖動操作結(jié)束時(shí)運(yùn)行腳本ondragenterscript當(dāng)元素被拖動至有效的拖放目標(biāo)時(shí)運(yùn)行腳本ondragleavescript當(dāng)元素離開有效拖放目標(biāo)時(shí)運(yùn)行腳本ondragoverscript當(dāng)元素被拖動至有效拖放目標(biāo)上方時(shí)運(yùn)行腳本ondragstartscript當(dāng)拖動操作開始時(shí)運(yùn)行腳本ondropscript當(dāng)被拖動元素正在被拖放時(shí)運(yùn)行腳本HTML5與HTML4的區(qū)別拖放APIondragscripHTML

7、 5 內(nèi)容概要Communication通信API1Web存儲2離線應(yīng)用程序3Web Workers4文件API5HTML 5 內(nèi)容概要Communication通信API1HTML 5 內(nèi)容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5測試10HTML 5 內(nèi)容概要XMLHttpRequest LeveHTML 5 內(nèi)容概要Communication通信API1Web存儲2離線應(yīng)用程序3Web Workers4文件API5HTML 5 內(nèi)容概要Communication通信API1Cross-docume

8、nt messaging跨文檔消息傳輸WebSocket APIServer-Sent EventsCommunication通信APICross-document messaging跨文檔消息傳Communication通信APICross-document messaging跨文檔消息傳輸功能：實(shí)現(xiàn)不同頁面、不同端口、不同域之間的消息傳遞。偵聽方法：window.addEventListener(message, function () ., false);發(fā)送消息方法：otherWindows.postMessage(message, targetOrigin);Communicatio

9、n通信APICross-documeCommunication通信APIWebSocket API功能：客戶端與服務(wù)端通過socket端口來傳遞數(shù)據(jù)?？梢詫?shí)現(xiàn)服務(wù)器數(shù)據(jù)推送技術(shù)。聲明方法：var webSocket = new WebSocket(“ws:/localhost:1818/socket”);/接收消息webSocket.onmessage = function (msg) /發(fā)送消息webSocket.send(text);Communication通信APIWebSocket APCommunication通信APIServer-Sent Events功能：服務(wù)器每隔一段時(shí)間主

10、動向客戶端發(fā)送一個(gè)帶數(shù)據(jù)的事件。與WebSockt不同的是，WebSockt是雙向的，該API實(shí)現(xiàn)從服務(wù)器端發(fā)送到客戶端的單向通信機(jī)制。聲明方法：var source = new EventSource(WebForm1.aspx);source.onmessage = function (event) Communication通信APIServer-Sent HTML 5 內(nèi)容概要Communication通信API1Web存儲2離線應(yīng)用程序3Web Workers4文件API5HTML 5 內(nèi)容概要Communication通信API1基本用法localStoragesessionSto

11、rageindexedDB數(shù)據(jù)庫Web存儲基本用法Web存儲HTML 5 內(nèi)容概要Communication通信API1Web存儲2離線應(yīng)用程序3Web Workers4文件API5HTML 5 內(nèi)容概要Communication通信API1Cache Manifest 基礎(chǔ)Mainfest文件交互過程applicationCache對象離線應(yīng)用程序Cache Manifest 基礎(chǔ)離線應(yīng)用程序HTML 5 內(nèi)容概要Communication通信API1Web存儲2離線應(yīng)用程序3Web Workers4文件API5HTML 5 內(nèi)容概要Communication通信API1Web Worker

12、s 和 DOM線程嵌套適用場合Web WorkersWeb Workers 和 DOMWeb WorkersHTML 5 內(nèi)容概要Communication通信API1Web存儲2離線應(yīng)用程序3Web Workers4文件API5HTML 5 內(nèi)容概要Communication通信API1文件對象ArrayBuffer對象與ArrayBufferView對象Blob對象FileReader對象Base64編碼支持文件API文件對象文件APIHTML 5 內(nèi)容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5測試

13、10HTML 5 內(nèi)容概要XMLHttpRequest Leve發(fā)送數(shù)據(jù)發(fā)送字符串發(fā)送表單數(shù)據(jù)上傳文件跨域數(shù)據(jù)請求XMLHttpRequest Level 2發(fā)送數(shù)據(jù)XMLHttpRequest Level 2HTML 5 內(nèi)容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5測試10HTML 5 內(nèi)容概要XMLHttpRequest LeveCanvasHTML5中最激動人心的功能認(rèn)識canvas元素Canvas的概念與特征保存和恢復(fù)繪圖狀態(tài)變形縮放旋轉(zhuǎn)變換矩陣將畫布導(dǎo)出為圖像Canvas高級功能加載圖像調(diào)整

14、和剪切圖像變形像素處理基本圖像效果視頻處理處理圖像和視頻創(chuàng)建動畫循環(huán)記憶要繪制的形狀改變方向圓周運(yùn)動反彈制作動畫物理常識速度、加速度、摩擦力碰撞檢測動量守恒實(shí)現(xiàn)高級動畫CanvasHTML5中最激動人心的功能認(rèn)識canvas元素圖表Canvas圖表CanvasHTML 5 內(nèi)容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5測試10HTML 5 內(nèi)容概要XMLHttpRequest LeveHTML5中新增了通過腳本語言在瀏覽器歷史記錄中添加項(xiàng)目的功能在不刷新頁面的前提下顯示改變?yōu)g覽器地址欄的功能History APIHTML5中新增了通過腳本語言在瀏覽器歷史記錄中添加項(xiàng)目的功HTML 5 內(nèi)容概要XMLHttpRequest Level 26Canvas7History API8HTML5 Geolocation9HTML5測試10HTML 5 內(nèi)容概要XMLHttpRequest LeveHTML5 Geolocation API 用于獲得用戶的地理位置。示例1在地圖中顯示結(jié)果示例2H