如何用TypeScript開發微信小程序

微信小程序來了！這個號稱幹掉傳統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的代碼示例：

/// <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定義文件！