网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

使用 Visual Studio Code 和 TypeScript 開(kāi)發(fā)微信小程序

發(fā)布時(shí)間:2018-04-25 09:13 所屬欄目:小程序開(kāi)發(fā)教程

看我大 Visual Studio Code

 

相比于 Sublime,Visual Studio Code 是完全免費(fèi)和開(kāi)源的編輯器。當(dāng)然,當(dāng)初試用 VSCode 還是沖著 Erich Gamma 的名頭來(lái)的,用過(guò)之后根本停不下來(lái)呀:)

 

大愛(ài) TypeScript

VSCode 本身也是用 TypeScript 寫(xiě)成的。TypeScript 最大的成就就是為 Javascript 添加了類(lèi)型系統(tǒng)。讓 Javascript 開(kāi)發(fā)大型工程的能力有了顯著提高。
不要聽(tīng)那些人鼓吹什么 Javascript 的動(dòng)態(tài)類(lèi)型,真正開(kāi)發(fā)的時(shí)候有多少人用?團(tuán)隊(duì)開(kāi)發(fā)的時(shí)候會(huì)給隊(duì)友挖多大坑?另外,使用了 TypeScript 之后,Javascript 的動(dòng)態(tài)化、動(dòng)態(tài)類(lèi)型特性一點(diǎn)點(diǎn)都不會(huì)丟。


相比之下,ES6 還是改造的不夠徹底,一點(diǎn)也不喜歡用。
再安利一下,經(jīng)常看到有人抱著 《Javascript 設(shè)計(jì)模式》看,拜托,一個(gè)沒(méi)有 Class 、沒(méi)有 Interface、沒(méi)有類(lèi)型系統(tǒng)的語(yǔ)言還用啥設(shè)計(jì)模式啊。即使調(diào)用一個(gè) function,還需要看源碼才知道傳什么樣參數(shù)的語(yǔ)言,還封裝個(gè)毛呀。簡(jiǎn)單暴力才是王道!


總之,面對(duì)大型工程或者需要多人合作的時(shí)候,使用 TypeScript 能顯著提升開(kāi)發(fā)效率,項(xiàng)目周期比較長(zhǎng)的時(shí)候,能有效降低維護(hù)成本。

 

使用 Visual Studio Code 開(kāi)發(fā)微信小程序

安裝應(yīng)用

 

安裝應(yīng)用就不說(shuō)了,windows 直接雙擊安裝包、iOS 直接拖到 Application 文件夾就好了。

 

安裝 typescript

安裝 typescript 之前,需要先安裝 Node.js 以便使用它的 npm 進(jìn)行代碼包的管理。VSCode 重度使用 npm,以后還會(huì)多次看到它的身影。
安裝好 Node.js 之后,只要一行命令就可以安裝 typescript 了

npm install -g typescript
npm install -g typescript@next//安裝不穩(wěn)定的測(cè)試版本

 

安裝好之后打開(kāi)終端,輸入 tsc 看到如下界面就安裝好了


DingTalk20170925203440-2017925
DingTalk20170925203440-2017925

typescript 在終端的命令,是 tsc,下一步將 ts 文件編譯為 js 文件的時(shí)候,也需要這個(gè)命令才可以的。
下一步就是配置代碼提示了:)

 

配置 typings 提供代碼提示

typings 的前世今生

MS 剛剛推出 typescript 的時(shí)候,開(kāi)發(fā)了一個(gè)叫做 tsd 的東東提供代碼提示的能力。但是,似乎 tsd 做的太爛了,又出了一個(gè)叫做 typings 的東東來(lái)替代它,這兩個(gè)東東的功能是完全相同的。
在最初設(shè)計(jì) tsd 和 typings 的時(shí)候,他們跟 typescript 是完全分離的兩個(gè)項(xiàng)目,這兩個(gè)項(xiàng)目也被設(shè)計(jì)為可以為不同的編輯器提供代碼提示。同時(shí),也可以應(yīng)用到不同的語(yǔ)言。然而,這么長(zhǎng)時(shí)間過(guò)去了,typings 變成了 typescript 專(zhuān)屬。
于是 typescript 2.0 推出之后,經(jīng)開(kāi)發(fā)者討論,typings 被合并到 typescript 里面,作為 typescript 的一個(gè) submodule 來(lái)開(kāi)發(fā)維護(hù),原本的庫(kù)被 DEPRECATED 了。
按照官方的說(shuō)法,是因?yàn)樵瓉?lái) typings 與 typescript 分離的方式,字典文件是設(shè)計(jì)成全局有效的,經(jīng)常造成字典文件無(wú)法安裝和引入的問(wèn)題。這個(gè)說(shuō)法確實(shí)是有依據(jù)的,因?yàn)槿职惭b字典文件確實(shí)是一件經(jīng)常報(bào)各種錯(cuò)誤的事情,我操作的時(shí)候從來(lái)就沒(méi)有成功過(guò)。

目前,大部分介紹 typings 的文章都是 typing 和 typescript 分離的時(shí)候,也就是 TypeScript 1.x 版本的時(shí)候?qū)懙模?dāng)然,這些文章還是可以參考的,因?yàn)?typings 的使用方式還是向前兼容的,同時(shí),在大部分情況下還是需要這種方式。

介紹 tsd 的文章就可以徹底廢棄了。

 

官方推薦的安裝字典文件的方式

typings 需要讀取 d.ts 作為提示信息的來(lái)源。d.ts 文件不僅可以為 typescript 提供提示信息,也可以為 Javascript 編寫(xiě)的方法提供提示信息。
然而,就算沒(méi)有 d.ts 文件,如果按照 JSDoc 的規(guī)范為 typescript 編寫(xiě)的方法寫(xiě)注釋?zhuān)瑃ypings 也可以提供代碼提示。
例如這樣:

/**
     * 驗(yàn)證 cookie 有效性
     * @param {string} domain domain
     * @param {string} path path
     * @param {cookieEntity} item 需要驗(yàn)證的 cookie
     * @returns {boolean} true cookie 適用于 domain+path
     * @memberof GZCookieStorage
     */
    protected validCookie(domain:string,path:string,item:cookieEntity):boolean{
        let result:boolean = false;
        if(item.domain.indexOf(domain))

        return false;
    }
看,代碼提示出來(lái)了!
看,代碼提示出來(lái)了!

當(dāng)然啦,絕大部分框架都是使用 d.ts 的方式提供代碼提示的。下面就介紹幾種常用的 d.ts 文件安裝方式。
注意,以下所有操作,都要在項(xiàng)目目錄下進(jìn)行,也就是說(shuō),打開(kāi)命令行,進(jìn)入到項(xiàng)目根目錄下,再執(zhí)行這些命令。

 

  1. 對(duì) typescript 兼容性非常好的框架,例如 angular。
npm install angular

啥,這不是在安裝 angular 嗎?對(duì)的,對(duì)于這種框架,Visual Studio Code 會(huì)自動(dòng)下載相應(yīng)的 d.ts 文件并提供非常棒的代碼提示。

 

  1. d.ts 文件單獨(dú)上傳到 npm 中的庫(kù)
npm install typed-we-app --save-dev

這樣可以單獨(dú)下載框架的 d.ts 文件,并交給 npm 管理。--save-dev 的意思是,將這個(gè)文件添加到開(kāi)發(fā)依賴(lài)中。npm install 命令還有許多其他選項(xiàng),在這里就不贅述了。
命令執(zhí)行完后,會(huì)生成一個(gè)文件夾 node_modules 和一個(gè) package.json 文件。node_modules 文件夾保存著 npm 管理的模塊,而 package.json 保存著這些模塊的配置信息。
當(dāng)團(tuán)隊(duì)開(kāi)發(fā)時(shí),拿到一個(gè)新項(xiàng)目,沒(méi)有 node_modules,只有 package.json ,只要在目錄下執(zhí)行 npm install 就可以把所有 modules 都下載下來(lái)了。

 

  1. d.ts 文件沒(méi)有上傳到 npm 管理,是通過(guò) git 提供的,但是已經(jīng)按照 typings 的要求寫(xiě)好了配置文件
    這種也比較簡(jiǎn)單,知道 git 地址之后,執(zhí)行下面的命令
typings install github:Emeryao/typed-we-app -SG

這種方式就不是通過(guò) npm 進(jìn)行管理了,而是直接通過(guò) typings 自帶的命令進(jìn)行管理。運(yùn)行這個(gè)命令之后,會(huì)出現(xiàn)以下幾個(gè)文件。
typings 文件夾和 typings.json 配置文件。
跟先前相同,拿到新項(xiàng)目后,運(yùn)行下

typings install

就可以把所需要的文件安裝好。
從上面可以看出來(lái),node_modules 和 typings 文件夾都可以添加到.gitignore 里面

 

  1. 只有 d.ts 文件
    這種情況指的是,不知道從哪里獲取到的 d.ts 文件。例如:從度娘那里隨便搜索了一下,同事用 QQ 傳來(lái)一個(gè) d.ts 文件。這種情況,連 d.ts 的來(lái)源都不清楚怎么辦呢?
    這時(shí)候,只需要把該文件拷貝到項(xiàng)目目錄里面,然后在源碼的開(kāi)頭引用一下:
/// 

只要 path 引用對(duì)了,就能得到代碼提示。當(dāng)然,這個(gè)提示是當(dāng)前文件有效的。
如果當(dāng)前項(xiàng)目有 typings 文件夾,并且文件夾下面有一個(gè) index.d.ts 文件,可以把 reference 放到這里,這時(shí)候就變成全局有效了。(因?yàn)閂isual Studio Code 會(huì)自動(dòng)的為每個(gè) js、ts 文件引用index.d.ts)

以上就是我用過(guò)的安裝 d.ts 文件的方式,當(dāng)然了,typings 還有好多種方式提供代碼提示,本人沒(méi)有嘗試過(guò),也就不亂寫(xiě)了。需要的同學(xué)可以去 github 主頁(yè)看看。

 

可以在微信小程序里面使用 TypeScript 嗎

這個(gè)問(wèn)題,當(dāng)然是可以嘍。

下面我們就一步一步的,配置 Visual Studio Code ,用它開(kāi)發(fā)微信小程序。

用微信開(kāi)發(fā)者工具新建一個(gè)小程序項(xiàng)目。

這個(gè)步驟就省略了吧,官網(wǎng)上有文檔的。

在 VSCode 中打開(kāi)項(xiàng)目

我這里已經(jīng)有一個(gè)項(xiàng)目了


DingTalk20171007102401-2017107
DingTalk20171007102401-2017107

gfwapdf,下面就一直操作這個(gè)項(xiàng)目嘍。
打開(kāi) VSCode,菜單欄-文件-打開(kāi),找到項(xiàng)目根目錄,gfwapdf,打開(kāi)就可以了。

配置 typings 提供代碼提示

0.打開(kāi)終端,進(jìn)入項(xiàng)目根目錄。
這里有兩種方式,一種是系統(tǒng)的終端,這個(gè)打開(kāi)之后默認(rèn)是用戶(hù)根目錄,需要收到 cd 到項(xiàng)目根目錄下(windows 的命令行打開(kāi)之后應(yīng)該是 C: ,同樣手動(dòng) cd 到項(xiàng)目根目錄下);另一種方式是 VSCode 自帶終端,這個(gè)終端,默認(rèn)路徑就是項(xiàng)目根目錄,直接在這里操作即可。


DingTalk20171007103159-2017107
DingTalk20171007103159-2017107

找不到VSCode 終端窗口的,可以選菜單-查看-集成終端。
1.啟用 typescript
在終端輸入

tsc --init

 

DingTalk20171007103919-2017107
DingTalk20171007103919-2017107

這個(gè)時(shí)候,已經(jīng)可以新建 ts 文件開(kāi)始編碼了。
編寫(xiě)幾行代碼,終端輸入 tsc,就會(huì)編譯 typescript 文件并生成 js 文件。
打開(kāi) tsconfig.json,添加 “watch”:true,然后再執(zhí)行 tsc 命令,就可以 watch ts 文件,只要保存一下,就會(huì)自動(dòng)編譯并生成 js 文件。
DingTalk20171007104313-2017107
DingTalk20171007104313-2017107

注意:這里 watch 功能,需要 tsc 進(jìn)程一直在終端運(yùn)行。可以把它放到后臺(tái)運(yùn)行,也可以開(kāi)啟一個(gè)新的終端。這里,我選擇點(diǎn) VSCode 終端窗口右上角的+號(hào)再開(kāi)啟一個(gè)終端進(jìn)行下面的操作。
木有代碼提示是不行滴,我們需要配置一下讓 VSCode 提供代碼提示。
2.安裝 d.ts 文件
這里采用上一節(jié)"3"的方式安裝。
終端里輸入
typings install github:Emeryao/typed-we-app -SG

等待一會(huì),看到這個(gè)畫(huà)面就成功了。


DingTalk20171007104822-2017107
DingTalk20171007104822-2017107

可以看到,生成了 typings.json 和 typings 文件夾。
試一下提示(可能需要重啟下 VSCode)


DingTalk20171007105357-2017107
DingTalk20171007105357-2017107

ts 文件的提示已經(jīng)搞定了。
3.解決 wxss 的提示

wxss 就是 css 的子集,只要在 VSCode 中把 wxss 的語(yǔ)言模式選成 css 就可以了。


DingTalk20171007105623-2017107
DingTalk20171007105623-2017107

點(diǎn)這里!
 
4.解決 wxml 的提示

推薦安裝 Visual Studio Code 插件: vscode wxml
注意,安裝這個(gè)插件后,千萬(wàn)不能為 wxml 選擇語(yǔ)言模式!
 
5.解決自動(dòng)編譯

上面已經(jīng)解決了 ts 文件自動(dòng)編譯成 js 文件。但是,每次開(kāi)啟 vscode 之后,需要在終端里面手動(dòng)輸入 tsc 命令,也是很煩的。推薦安裝這個(gè)插件
Blade Runner-Run Task When Open
安裝好這個(gè)插件之后,在 VScode 里面選擇菜單-任務(wù)-配置默認(rèn)生成任務(wù)- tsc 構(gòu)建

生成一個(gè) .vscode 文件夾,里面有一個(gè)tasks.json 上面插件會(huì)在 VSCode 每次啟動(dòng)的時(shí)候,自動(dòng)根據(jù) task.json 運(yùn)行一些命令(當(dāng)然是運(yùn)行 tsc 命令嘍),這樣,編譯 ts 的工作就變成完全自動(dòng)的了。
如果看不到 tsc 構(gòu)建這個(gè)選項(xiàng),可能需要打開(kāi)一個(gè) ts 文件后再進(jìn)行上述操作。
ts 文件編譯成 js 文件后,微信開(kāi)發(fā)者工具也會(huì)自動(dòng)的編譯 js 文件。
至此就大功告成了。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/23964.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)
AI智能客服 ×