微信小程序怎么開發(fā)？小程序開發(fā)工具

微信小程序不同于公眾號。不是申請一個(gè)賬號就可以立即發(fā)文章了，寫代碼是必不可少的過程。騰訊為此提供了一整套開發(fā)工具解決方案，包括編譯代碼、調(diào)試和上傳，全部在開發(fā)工具中直接完成。下面就介紹一下這個(gè)微信開發(fā)工具的使用步驟。

1、小程序開發(fā)工具下載

開發(fā)工具的下載可通微信官網(wǎng)平臺獲得：

下載小程序

分別提供Windows64、windows32和mac版本。

下載之后，直接安裝。

2、創(chuàng)建小程序項(xiàng)目

安裝后，打開微信web開發(fā)者工具，用個(gè)人微信掃描二維碼登錄。

小程序開發(fā)平臺" width="650" height="520" title="小程序開發(fā)平臺" align="" />

登錄后，選擇“本地小程序項(xiàng)目”。

進(jìn)入后，可以點(diǎn)擊“+”號按鈕新建一個(gè)項(xiàng)目。本地已經(jīng)創(chuàng)造了項(xiàng)目，這里都會看到。

創(chuàng)建項(xiàng)目時(shí)，需要在平臺上填寫申請的小程序AppID，這在之前關(guān)于申請賬號的文章中已經(jīng)提到。如果實(shí)在不想麻煩，就直接選“無 AppID”，代價(jià)是不能在真機(jī)上調(diào)試代碼，但不會影響開發(fā)。

3、開發(fā)界面

項(xiàng)目創(chuàng)建完成后，可以進(jìn)入開發(fā)環(huán)境。左側(cè)是導(dǎo)航欄，主要有三個(gè)界面。

編輯界面

這是開發(fā)的主場景。左邊是顯示效果的模擬器，可以直接交互。右邊是編寫代碼的編輯器，包括代碼文件的導(dǎo)航。代碼有4種類型：

js: JavaScript代碼，主要處理邏輯。

wxml：類似于html，它負(fù)責(zé)在頁面上顯示控件。

wxss：類似css的樣式文件，用于調(diào)整布局，美化界面。

json：json格式的配置文件。

經(jīng)歷過前端開發(fā)的朋友對這些應(yīng)該不陌生，基本都是一樣的套路。

修改代碼后，需要手工保存。模擬器中的版本保存后會自動刷新。

調(diào)試界面

如果你用過Chrome的開發(fā)工具或者其他類似的web前端調(diào)試工具，這里就不用多說什么了。

包括了各種功能，例如控制臺調(diào)試、頁面源代碼、網(wǎng)絡(luò)請求、頁面元素等。符合開發(fā)的各種調(diào)試要求。

項(xiàng)目界面

這里是基本的信息和部分項(xiàng)目的配置。如果你沒有配置好接口的域名，AppID (微信小程序要求后臺接口必須是https協(xié)議)，但必須添加網(wǎng)絡(luò)請求的功能，請確保將“開發(fā)環(huán)境不驗(yàn)證請求域名以及 TLS 版本”給勾選上，否則無法成功發(fā)出請求?！?nbsp;

4、demo

如果在創(chuàng)建新的項(xiàng)目時(shí)選上了“在當(dāng)前目錄中創(chuàng)建 quick start 項(xiàng)目”，就可以看到一個(gè)簡單的“hello world”小程序?？梢詭椭懔私馕⑿判〕绦虻幕敬a結(jié)構(gòu)。

當(dāng)然，這個(gè)還不足以讓你了解小程序的各種功能?！靶〕绦蚴纠钡脑创a下載在官網(wǎng)也有提供?？梢詮拇a詳細(xì)了解小程序的各種控件的基本用法。

小程序開發(fā)需具備編程語言基礎(chǔ)，對于不懂技術(shù)的人來說還是有一定難度的?，F(xiàn)在出現(xiàn)了很多傻瓜式小程序開發(fā)工具，通過套用小程序模板就可快速開發(fā)一個(gè)小程序。應(yīng)用公園就是一款可視化小程序開發(fā)平臺，平臺上有各大行業(yè)的小程序模板，只需按照流程操作，即可一套代碼同時(shí)生成小程序和APP,非常方便。