TypeScript簡介:
TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集,而且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程。安德斯·海爾斯伯格,C#的首席架構師,已工作于TypeScript的開發。
TypeScript擴展了JavaScript的語法,所以任何現有的JavaScript程序可以不加改變的在TypeScript下工作。TypeScript是為大型應用之開發而設計,而編譯時它產生 JavaScript 以確保兼容性。
TypeScript 支持為已存在的 JavaScript 庫添加類型信息的頭文件,擴展了它對于流行的庫如 jQuery,MongoDB,Node.js 和 D3.js 的好處。
微信小程序來了!這個號稱干掉傳統app的玩意兒雖然目前處于內測階段,不過目前在應用號的官方文檔里已經放出了沒有內測號也能使用的模擬器了。
工具和文檔可以參考官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1477926804193
TypeScript:
TypeScript是C#之父Anders Hejlsberg的又一力作,相信喜歡C#語法的朋友們對TypeScript一定也會愛不釋手。
簡單的聊一聊TypeScript吧
TS是一個應用程序級的JavaScript開發語言。
TS是JavaScript的超集,可以編譯成純JavaScript。
TS跨瀏覽器、跨操作系統、跨主機,開源。
TS始于JS,終于JS。遵循JavaScript的語法和語義,方便了無數的JavaScript開發者。
TS可以重用現有的JavaScript代碼,調用流行的JavaScript庫。
TS可以編譯成簡潔、簡單的JavaScript代碼,在任意瀏覽器、Node.js或任何兼容ES3的環境上運行。
TypeScript比JavaScript更具開發效率,包括:靜態類型檢查、基于符號的導航、語句自動完成、代碼重構等。
TS提供了類、模塊和接口,更易于構建組件。
順便說一句,TypeScript雖然只關心生成JavaScript之前的這些內容(意味著不關心生成出的JS代碼的運行效率),但是根據鄙人的觀察和比較,TypeScript所生成的JavaScript代碼比絕大部分的前臺開發自己寫的JavaScript的代碼質量高至少一個數量級??!
TypeScript另一個優點:
TypeScript在各大主流的IDE和編輯器里有智能提示!
重要的事情要說三遍!寫TypeScript有智能提示!寫TypeScript有智能提示!寫TypeScript有智能提示!
用TypeScript開發微信小程序
扯了半天TypeScript,那么究竟怎么用TypeScript開發微信小程序呢?
非常簡單,和微信官方的JavaScript開發方式沒有太大區別,依舊是4個核心文件
App: 代碼整個應用程序的抽象對象,可以設置全局的方法和變量
Page: 頁面抽象對象,承載頁面業務邏輯
WXML: 頁面的結構,相當于html
JSON: 配置文件
WXSS: 頁面的樣式,相當于css
由于目前騰訊沒有小程序的TypeScript版本的API,所以OneCode team針對目前騰訊放出的所有的小程序JavaScript API開發了一個TypeScript版本的API類型定義文件 wxAPI.d.ts
只需要在您的程序中引用該文件,如果是使用Visual Studio來開發的話,就能有代碼提示了。
下面是用TypeScript開發的Demo App的代碼示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/// <reference path="./wxAPI.d.ts"/> App({ onLaunch: function() { //調用API從本地緩存中獲取數據 let logs: any = wx.getStorageSync( 'logs' ); if (!Array.isArray(logs)) { logs = []; } (<any[]>logs).unshift(Date.now()); wx.setStorageSync( 'logs' , logs); }, getUserInfo: function(cb: (param: any) => void ) { let that = this if ( this .globalData.userInfo) { cb( this .globalData.userInfo) } else { //調用登錄接口 wx.login({ success: () => { wx.getUserInfo({ success: (res) => { that.globalData.userInfo = res.userInfo; cb(that.globalData.userInfo); } }); } }); } }, globalData: { userInfo: null } }); |
感興趣的朋友,可以去 https://code.msdn.microsoft.com/How-to-develop-WeChat-1105555e 上面下載完整的代碼樣例以及非常關鍵的微信小程序TypeScript API定義文件!
更多腳本樣例, 訪問微軟One Code樣例庫:http://aka.ms/onescriptsamples 更多代碼樣例, 訪問微軟One Script樣例庫:http://aka.ms/onecodesamples
以上所述是小編給大家介紹的使用TypeScript開發微信小程序的方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
原文鏈接:http://www.cnblogs.com/onecodeonescript/p/6060862.html