這篇文章主要介紹了怎么用TypeScript開發(fā)微信小程序,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
為太谷等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及太谷網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站制作、太谷網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
TypeScript:
TypeScript是C#之父Anders Hejlsberg的又一力作,相信喜歡C#語法的朋友們對(duì)TypeScript一定也會(huì)愛不釋手。
簡(jiǎn)單的聊一聊TypeScript吧
TS是一個(gè)應(yīng)用程序級(jí)的JavaScript開發(fā)語言。
TS是JavaScript的超集,可以編譯成純JavaScript。
TS跨瀏覽器、跨操作系統(tǒng)、跨主機(jī),開源。
TS始于JS,終于JS。遵循JavaScript的語法和語義,方便了無數(shù)的JavaScript開發(fā)者。
TS可以重用現(xiàn)有的JavaScript代碼,調(diào)用流行的JavaScript庫。
TS可以編譯成簡(jiǎn)潔、簡(jiǎn)單的JavaScript代碼,在任意瀏覽器、Node.js或任何兼容ES3的環(huán)境上運(yùn)行。
TypeScript比JavaScript更具開發(fā)效率,包括:靜態(tài)類型檢查、基于符號(hào)的導(dǎo)航、語句自動(dòng)完成、代碼重構(gòu)等。
TS提供了類、模塊和接口,更易于構(gòu)建組件。
順便說一句,TypeScript雖然只關(guān)心生成JavaScript之前的這些內(nèi)容(意味著不關(guān)心生成出的JS代碼的運(yùn)行效率),但是根據(jù)鄙人的觀察和比較,TypeScript所生成的JavaScript代碼比絕大部分的前臺(tái)開發(fā)自己寫的JavaScript的代碼質(zhì)量高至少一個(gè)數(shù)量級(jí)?。?nbsp;
TypeScript另一個(gè)優(yōu)點(diǎn):
TypeScript在各大主流的IDE和編輯器里有智能提示!
重要的事情要說三遍!寫TypeScript有智能提示!寫TypeScript有智能提示!寫TypeScript有智能提示!
用TypeScript開發(fā)微信小程序
扯了半天TypeScript,那么究竟怎么用TypeScript開發(fā)微信小程序呢?
非常簡(jiǎn)單,和微信官方的JavaScript開發(fā)方式?jīng)]有太大區(qū)別,依舊是4個(gè)核心文件
App: 代碼整個(gè)應(yīng)用程序的抽象對(duì)象,可以設(shè)置全局的方法和變量
Page: 頁面抽象對(duì)象,承載頁面業(yè)務(wù)邏輯
WXML: 頁面的結(jié)構(gòu),相當(dāng)于html
JSON: 配置文件
WXSS: 頁面的樣式,相當(dāng)于css
由于目前騰訊沒有小程序的TypeScript版本的API,所以O(shè)neCode team針對(duì)目前騰訊放出的所有的小程序JavaScript API開發(fā)了一個(gè)TypeScript版本的API類型定義文件 wxAPI.d.ts
只需要在您的程序中引用該文件,如果是使用Visual Studio來開發(fā)的話,就能有代碼提示了。
下面是用TypeScript開發(fā)的Demo App的代碼示例:
///
App({
onLaunch: function() {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
let logs: any = wx.getStorageSync('logs');
if (!Array.isArray(logs)) {
logs = []; } (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 } });
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“怎么用TypeScript開發(fā)微信小程序”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!