學(xué)習(xí)技術(shù)不要光看視頻、教材，一定要?jiǎng)邮謱?shí)踐。只有實(shí)戰(zhàn)，技術(shù)才會(huì)變得簡(jiǎn)單。小程序相比其他編程語(yǔ)言來(lái)說(shuō)，可以讓我們更快做出一些技術(shù)產(chǎn)品。

開(kāi)始前的準(zhǔn)備

小程序的開(kāi)發(fā)有兩樣?xùn)|西必不可少，一個(gè)是小程序開(kāi)發(fā)的技術(shù)文檔；還有一個(gè)就是小程序的開(kāi)發(fā)者工具。

開(kāi)發(fā)者工具：小程序開(kāi)發(fā)者工具下載地址

大家可以根據(jù)自己電腦的操作系統(tǒng)來(lái)下載對(duì)應(yīng)的穩(wěn)定版安裝包進(jìn)行安裝。就和我們寫(xiě)Word、PPT文檔要用Office的軟件一樣，我們要在開(kāi)發(fā)者工具上多多動(dòng)手，技術(shù)才能掌握的更加真切。

技術(shù)文檔：小程序技術(shù)文檔

技術(shù)文檔大家先只需要花五分鐘左右的時(shí)間了解大致的結(jié)構(gòu)即可，先按照我們的教學(xué)步驟學(xué)完之后再來(lái)看也不遲。官方的小程序技術(shù)文檔過(guò)于全面而且詳細(xì)，對(duì)于初學(xué)者或者零基礎(chǔ)的朋友來(lái)說(shuō)，我們會(huì)引導(dǎo)大家如何循序漸進(jìn)的學(xué)習(xí)文檔里的技術(shù)知識(shí)。

多看技術(shù)文檔和多用開(kāi)發(fā)工具也是我們學(xué)習(xí)其他編程語(yǔ)言或技術(shù)最為重要的兩點(diǎn)，凡是脫離技術(shù)文檔和開(kāi)發(fā)工具看視頻、看文章以及搜集再多的資料都是舍本求末的錯(cuò)誤做法，而這也是很多初學(xué)者的一個(gè)通病。

值得注意的是小程序的開(kāi)發(fā)功能更新非常頻繁，很多網(wǎng)上的教程內(nèi)容都比較過(guò)時(shí)，而只有技術(shù)文檔才是同步最新的。無(wú)論你是初學(xué)者還是高手，技術(shù)文檔都是我們技術(shù)開(kāi)發(fā)的基礎(chǔ)與落腳點(diǎn)，常讀常新。

注冊(cè)微信小程序

小程序的注冊(cè)非常方便，打開(kāi)小程序注冊(cè)頁(yè)面，按照要求填入個(gè)人的信息，驗(yàn)證郵箱和手機(jī)號(hào)，掃描二維碼綁定你的微信號(hào)即可，3分鐘左右的時(shí)間即可搞定。

注冊(cè)頁(yè)面：小程序注冊(cè)頁(yè)面

注冊(cè)小程序時(shí)不能使用注冊(cè)過(guò)微信公眾號(hào)、微信開(kāi)放平臺(tái)的郵箱哦，也就是需要你使用一個(gè)其他郵箱才行。

當(dāng)我們注冊(cè)成功后，就可以自動(dòng)登入到小程序的后臺(tái)管理頁(yè)面啦，如果你不小心關(guān)掉了后臺(tái)頁(yè)面，也可以點(diǎn)擊小程序后臺(tái)管理登錄頁(yè)進(jìn)行登錄。

后臺(tái)管理頁(yè)：小程序后臺(tái)管理登錄頁(yè)

小程序和微信公眾號(hào)的登錄頁(yè)都是同一個(gè)頁(yè)面，他們會(huì)根據(jù)你的不同的注冊(cè)郵箱來(lái)進(jìn)行跳轉(zhuǎn)。

進(jìn)入到小程序的后臺(tái)管理頁(yè)后，點(diǎn)擊左側(cè)菜單的開(kāi)發(fā)進(jìn)入設(shè)置頁(yè)，然后再點(diǎn)擊開(kāi)發(fā)設(shè)置，在開(kāi)發(fā)者ID里就可以看到AppID(小程序ID)，這個(gè)待會(huì)我們有用。

注意小程序的ID（AppID）不是你注冊(cè)的郵箱和用戶名，你需要到后臺(tái)查看才行哦~

新建一個(gè)模板小程序

安裝完開(kāi)發(fā)者工具之后，我們使用微信掃碼登錄開(kāi)發(fā)者工具，然后使用開(kāi)發(fā)者工具新建一個(gè)小程序的項(xiàng)目，

• 項(xiàng)目名稱：這個(gè)可以根據(jù)自己的需要任意填寫(xiě)，可以是中文；
• 目錄：大家需要先在電腦上新建一個(gè)空文件夾，然后選擇這個(gè)空文件夾；
• AppID：就是之前我們找到的AppID(小程序ID)（也可以點(diǎn)擊右邊的下拉框，下拉選擇AppID）
• 開(kāi)發(fā)模式為小程序
• 后端服務(wù)選擇不使用云服務(wù)，注意為了教學(xué)的需要，先選擇不使用云服務(wù)
• 語(yǔ)言為JavaScript

點(diǎn)擊新建確認(rèn)之后就能在開(kāi)發(fā)者工具的模擬器里看到一個(gè)簡(jiǎn)單的Hello World模板小程序，在編輯器里看到這個(gè)小程序的源代碼。

小任務(wù)： 分別點(diǎn)擊開(kāi)發(fā)者工具工具欄上的模擬器、編輯器、調(diào)試器，以及下面的手機(jī)下拉框、顯示百分比，看看有什么效果。找到開(kāi)發(fā)者工具的菜單欄，在項(xiàng)目菜單欄里找到查看所有項(xiàng)目，在設(shè)置菜單欄里找到外觀設(shè)置，切換一下主題、調(diào)試器主題（深色、淺色）。

接下來(lái)，我們點(diǎn)擊開(kāi)發(fā)者工具的工具欄里的預(yù)覽圖標(biāo)，就會(huì)彈出一個(gè)二維碼，使用你的手機(jī)微信掃描這個(gè)二維碼就能在微信里看到這個(gè)小程序啦。以后我們要自己開(kāi)發(fā)一個(gè)小程序都可以按照上面的操作新建一個(gè)模板小程序，然后在這個(gè)的基礎(chǔ)上修改開(kāi)發(fā)。

如果你沒(méi)有使用微信登錄開(kāi)發(fā)者工具，以及你的微信不是該小程序的開(kāi)發(fā)者是沒(méi)法預(yù)覽的哦。這個(gè)Hello World模板小程序非常簡(jiǎn)單，但是它的文件結(jié)構(gòu)卻是完整的。

開(kāi)通云開(kāi)發(fā)服務(wù)

點(diǎn)擊微信開(kāi)發(fā)者工具的“云開(kāi)發(fā)”圖標(biāo)，在彈出框里點(diǎn)擊“開(kāi)通”，同意協(xié)議后，會(huì)彈出創(chuàng)建環(huán)境的對(duì)話框。這時(shí)會(huì)要求你輸入環(huán)境名稱和環(huán)境ID，以及當(dāng)前云開(kāi)發(fā)的基礎(chǔ)環(huán)境配額（基礎(chǔ)配額免費(fèi)，而且足夠你使用哦）。

建議你環(huán)境名稱可以使用 xly、環(huán)境ID自動(dòng)生成即可，當(dāng)你的云開(kāi)發(fā)環(huán)境出現(xiàn)問(wèn)題的時(shí)候，你可以提供你的環(huán)境ID，云開(kāi)發(fā)團(tuán)隊(duì)會(huì)有專人為你解答。

按照對(duì)話框提示的要求填寫(xiě)完之后，點(diǎn)擊創(chuàng)建，會(huì)初始化環(huán)境，環(huán)境初始化成功后會(huì)自動(dòng)彈出云開(kāi)發(fā)控制臺(tái)，這樣我們的云開(kāi)發(fā)服務(wù)就開(kāi)通啦。大家可以花兩分鐘左右的時(shí)間熟悉一下云開(kāi)發(fā)控制臺(tái)的界面。

文件結(jié)構(gòu)與頁(yè)面組成

在了解以下知識(shí)時(shí)，大家只需要結(jié)合開(kāi)發(fā)者工具的編輯器對(duì)照著介紹，一一展開(kāi)文件夾、用編輯器查看文件的源代碼，大致瀏覽一下即可。這就是實(shí)戰(zhàn)學(xué)習(xí)的方法（和看書(shū)、看視頻的學(xué)習(xí)方法不同），千萬(wàn)不要死記硬背哦，你以后用多了自然就記住啦~

小程序的文件結(jié)構(gòu)

在開(kāi)發(fā)者工具的編輯器里可以看到小程序源文件的根目錄下有app.js、app.json和app.wxss，這是小程序必不可少的三個(gè)主體文件，下面我們來(lái)大致了解一下小程序文件結(jié)構(gòu)（只需要大致了解就可以啦~不理解也沒(méi)有關(guān)系）。

• app.json：小程序的公共設(shè)置，可以對(duì)小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置多 tab 等；
• app.wxss：小程序的公共樣式表，可以配置整個(gè)小程序的文字的字體、顏色、背景，圖片的大小等樣式；
• app.js：小程序的邏輯（這個(gè)可以先放著，不用管）
• pages文件夾：這里存放著小程序的所有頁(yè)面，展開(kāi)pages文件夾就可以看到有index和logs兩個(gè)頁(yè)面文件夾；

小任務(wù)：在結(jié)合開(kāi)發(fā)者工具實(shí)戰(zhàn)了解了上面的知識(shí)之后，你明白了哪個(gè)文件夾是小程序的根目錄嗎？

小程序的頁(yè)面組成

在每一個(gè)頁(yè)面文件夾里都有四個(gè)文件，這四個(gè)文件的名稱都是一樣的，它們分別為：

• json文件，和上面的app.json作用基本相同，只是app.json控制的是整個(gè)小程序的設(shè)置，而頁(yè)面的json文件只控制單個(gè)頁(yè)面的配置（因?yàn)橛袝r(shí)候全局配置就夠用了，所以頁(yè)面配置有時(shí)候是空的）；
• wxml文件，小程序的頁(yè)面結(jié)構(gòu)，文字、圖片、音樂(lè)、視頻、地圖、輪播等組件都會(huì)放在這里；
• wxss文件，小程序的頁(yè)面樣式，和app.wxss一樣是控制樣式，而頁(yè)面的wxss文件是控制單個(gè)頁(yè)面的樣式；
• js文件，這個(gè)是控制小程序頁(yè)面的邏輯（這個(gè)可以先放著，不用管）

小程序的全局配置

在前面我們已經(jīng)提到，app.json可以對(duì)整個(gè)小程序進(jìn)行全局配置，而配置的依據(jù)就需要我們參考技術(shù)文檔了。

技術(shù)文檔：小程序全局配置

打開(kāi)上面的小程序全局配置技術(shù)文檔，里面會(huì)有很多你看不懂的名稱，這是非常正常的，大家也不需要記，只需要花兩三分鐘時(shí)間快速瀏覽一下即可，后面我們會(huì)教大家如何結(jié)合技術(shù)文檔來(lái)實(shí)戰(zhàn)學(xué)習(xí)。

json語(yǔ)法

在對(duì)小程序進(jìn)行配置之前，可以使用開(kāi)發(fā)者工具打開(kāi)app.json文件，對(duì)照著下面的json語(yǔ)法來(lái)進(jìn)行理解：

• 大括號(hào){}保存對(duì)象，我們來(lái)看一下app.json，哪些地方用到了大括號(hào){}，{}里面就是對(duì)象；
• 中括號(hào)[]保存數(shù)組，我們可以看到中括號(hào)[]里有“pages/index/index”等（這是小程序頁(yè)面的路徑），那這些頁(yè)面路徑就是數(shù)組啦；數(shù)組里的值都是平級(jí)的關(guān)系；
• 各個(gè)數(shù)據(jù)之間由英文字符逗號(hào),隔開(kāi)，注意這里的數(shù)據(jù)包括對(duì)象、數(shù)據(jù)、單條屬性與值，大家可以結(jié)合app.json仔細(xì)比對(duì)逗號(hào),出現(xiàn)的位置，平級(jí)數(shù)據(jù)的最后一條數(shù)據(jù)不要加逗號(hào),，也就是只有數(shù)據(jù)之間才有逗號(hào)。
• 字段名稱（屬性名）與值之間用冒號(hào):隔開(kāi)，字段名稱在前，字段的取值在后；
• 字段名稱用雙引號(hào)””給包著；

注意，這里所有的標(biāo)點(diǎn)符號(hào)都需要是英文狀態(tài)下的，也就是我們經(jīng)常聽(tīng)說(shuō)的全角半角里的半角狀態(tài)，不然會(huì)報(bào)錯(cuò)哦。很多之前沒(méi)有接觸過(guò)編程的童鞋經(jīng)常會(huì)犯這樣的錯(cuò)誤，一定要多多注意！當(dāng)我們要輸入編程里的標(biāo)點(diǎn)符號(hào)時(shí)，一定要先確認(rèn)一下，你的輸入法是漢語(yǔ)形態(tài)，還是字母形態(tài)，如果輸?shù)氖菨h字形態(tài)，一定要切換哦~

設(shè)置小程序窗口表現(xiàn)

使用開(kāi)發(fā)者工具打開(kāi)app.json文件，可以看到如下代碼里有一個(gè)window的字段名（如前面所說(shuō)，字段名要用雙引號(hào)””包著），它的值是一個(gè)對(duì)象（如前面所說(shuō)，{}大括號(hào)里的就是對(duì)象），可見(jiàn)對(duì)象可以是一組數(shù)據(jù)的集合，這個(gè)集合里包含著幾條數(shù)據(jù)。

"window": {


    "backgroundTextStyle": "light",


    "navigationBarBackgroundColor": "#fff",


    "navigationBarTitleText": "WeChat",


    "navigationBarTextStyle": "black"


  },

這些就是window配置項(xiàng)，可用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

小任務(wù)：打開(kāi)小程序全局配置查看backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle的配置描述（大致了解即可）。

使用開(kāi)發(fā)者工具的編輯器將以上屬性的值改成如下代碼（這里的backgroundTextStyle只有在設(shè)置了下拉刷新樣式時(shí)才會(huì)比較明顯，以后會(huì)介紹）

"window": {


    "backgroundTextStyle": "dark",   


    "navigationBarBackgroundColor": "#1772cb",


    "navigationBarTitleText": "云開(kāi)發(fā)技術(shù)訓(xùn)練營(yíng)", 


    "navigationBarTextStyle": "white"  


  },

添加完成之后記得保存代碼哦，文件修改沒(méi)有保存會(huì)在標(biāo)簽頁(yè)有一個(gè)小的綠點(diǎn)。可以使用快捷鍵（同時(shí)按）Ctrl和S來(lái)保存（Mac電腦為Command和S）。

然后點(diǎn)擊開(kāi)發(fā)者工具的編譯圖標(biāo)，就能看到更新之后的效果啦，也可以點(diǎn)擊預(yù)覽，使用手機(jī)微信掃描生成的二維碼查看實(shí)際效果。

小任務(wù)： navigationBarBackgroundColor值是 #F8F8F8， #1772cb，這是十六進(jìn)制顏色值，它是一個(gè)非常基礎(chǔ)而且用途范圍極廣的計(jì)算機(jī)概念，大家可以搜索了解一下：1、如何使用電腦版微信、QQ的截圖工具取色（取色顏色會(huì)有一點(diǎn)偏差）；2、RGB顏色與十六進(jìn)制顏色如何轉(zhuǎn)換；

新建小程序頁(yè)面

新建頁(yè)面的方法有兩種，一種是使用開(kāi)發(fā)者工具在pages文件夾下新建；還有一種是通過(guò)app.json的pages配置項(xiàng)來(lái)新建，我們先來(lái)看第2種方法。

通過(guò)app.json新建頁(yè)面

pages配置項(xiàng)是設(shè)置頁(yè)面的路徑，也就是我們?cè)谛〕绦蚶飳?xiě)的每一個(gè)頁(yè)面都需要填寫(xiě)在這里。使用開(kāi)發(fā)者工具打開(kāi)app.json文件，在pages配置項(xiàng)里新建一個(gè)home頁(yè)面（頁(yè)面名稱可以是任意英文名），代碼如下：

"pages/home/home",


"pages/index/index",


"pages/logs/logs"

大家寫(xiě)的時(shí)候可以回顧一下json語(yǔ)法，每個(gè)頁(yè)面后都記得要用逗號(hào),隔開(kāi)，如果你的文件代碼寫(xiě)錯(cuò)了，開(kāi)發(fā)者工具會(huì)報(bào)錯(cuò)。

在模擬器就能看到我們新建的這個(gè)首頁(yè)了，會(huì)顯示如下內(nèi)容：

pages/home/home.wxml

大家再來(lái)看看小程序的文件夾結(jié)構(gòu)，是不是在pages文件夾下面多了一個(gè)home的文件夾？而且這個(gè)文件夾還自動(dòng)新建了四個(gè)頁(yè)面文件。

我們刪掉文件目錄下的index和logs文件夾，然后把a(bǔ)pp.json的pages配置項(xiàng)修改為：

"pages": [


  "pages/home/home",


  "pages/list/list",


  "pages/partner/partner",


  "pages/more/more"


],

也就是我們刪掉了index和logs頁(yè)面配置項(xiàng)的同時(shí)，又新增了三個(gè)頁(yè)面(list、partner、more，這三個(gè)頁(yè)面名稱大家可以根據(jù)自己需要來(lái)命名)。

小任務(wù)：這些新建的頁(yè)面文件都在電腦上的什么呢？比如在開(kāi)發(fā)者工具右鍵點(diǎn)擊home文件夾或者h(yuǎn)ome.wxml，選擇“在硬盤打開(kāi)”就可以看到該文件在我們電腦的文件夾里什么的位置啦