編程學習網(wǎng) > 小程序 > 如何用TypeScript開發(fā)微信小程序
2016
11-28

如何用TypeScript開發(fā)微信小程序

微信小程序來了!這個號稱干掉傳統(tǒng)app的玩意兒雖然目前處于內(nèi)測階段,不過目前在應用號的官方文檔里已經(jīng)放出了沒有內(nèi)測號也能使用的模擬器了。

TypeScript:

TypeScript 是C#之父Anders Hejlsberg的又一力作,相信喜歡C#語法的朋友們對TypeScript一定也會愛不釋手。

簡單的聊一聊TypeScript吧

  • TS是一個應用程序級的JavaScript開發(fā)語言。
  • TS是JavaScript的超集,可以編譯成純JavaScript。
  • TS跨瀏覽器、跨操作系統(tǒng)、跨主機,開源。
  • TS始于JS,終于JS。遵循JavaScript的語法和語義,方便了無數(shù)的JavaScript開發(fā)者。
  • TS可以重用現(xiàn)有的JavaScript代碼,調(diào)用流行的JavaScript庫。
  • TS可以編譯成簡潔、簡單的JavaScript代碼,在任意瀏覽器、Node.js或任何兼容ES3的環(huán)境上運行。
  • TypeScript比JavaScript更具開發(fā)效率,包括:靜態(tài)類型檢查、基于符號的導航、語句自動完成、代碼重構(gòu)等。
  • TS提供了類、模塊和接口,更易于構(gòu)建組件。

順便說一句,TypeScript雖然只關心生成JavaScript之前的這些內(nèi)容(意味著不關心生成出的JS代碼的運行效率),但是根據(jù)鄙人的觀察和比較,TypeScript所生成的JavaScript代碼比絕大部分的前臺開發(fā)自己寫的JavaScript的代碼質(zhì)量高至少一個數(shù)量級!!

TypeScript另一個優(yōu)點:

TypeScript在各大主流的IDE和編輯器里有智能提示!

重要的事情要說三遍!寫TypeScript有智能提示!寫TypeScript有智能提示!寫TypeScript有智能提示!

用TypeScript開發(fā)微信小程序

扯了半天TypeScript,那么究竟怎么用TypeScript開發(fā)微信小程序呢?

非常簡單,和微信官方的 JavaScript開發(fā)方式 沒有太大區(qū)別,依舊是4個核心文件

  • App:     代碼整個應用程序的抽象對象,可以設置全局的方法和變量
  • Page:    頁面抽象對象,承載頁面業(yè)務邏輯
  • WXML:  頁面的結(jié)構(gòu),相當于html 
  • JSON:   配置文件
  • WXSS:  頁面的樣式,相當于css

由于目前騰訊沒有小程序的TypeScript版本的API,所以OneCode team針對目前騰訊放出的所有的小程序JavaScript API開發(fā)了一個TypeScript版本的API類型定義文件 wxAPI.d.ts

只需要在您的程序中引用該文件,如果是使用Visual Studio來開發(fā)的話,就能有代碼提示了。

下面是用TypeScript開發(fā)的Demo App的代碼示例:

/// <reference path="./wxAPI.d.ts"/>

App({
    onLaunch: function() {
        //調(diào)用API從本地緩存中獲取數(shù)據(jù)
        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 {
            //調(diào)用登錄接口
            wx.login({
                success: () => {
                    wx.getUserInfo({
                        success: (res) => {
                            that.globalData.userInfo = res.userInfo;
                            cb(that.globalData.userInfo);
                        }
                    });
                }
            });
        }
    },
    globalData: {
        userInfo: null
    }
});

 

來自:http://www.cnblogs.com/onecodeonescript/p/6060862.html

 

掃碼二維碼 獲取免費視頻學習資料

Python編程學習

查 看2022高級編程視頻教程免費獲取