小(xiao)程序開發(fa)我們需要(yao)下(xia)載相應的開發(fa)工具(ju)，個人比較(jiao)推薦的是微信官方出的開發(fa)工具(ju)。畢竟是官方工具(ju)。

首先(xian)貼出官方開發工(gong)具下載地址：//developers.weixin.qq.com/miniprogram/dev/devtools/download.html

官方開發(fa)工具的下載

至(zhi)于怎么(me)安(an)裝就(jiu)不用我說了。下載(zai)下來后雙擊(ji)就(jiu)可以安(an)裝了。安(an)裝后需要掃碼登(deng)錄。掃碼登(deng)后的(de)界面如下。

新建項目

項目(mu)名字可(ke)(ke)以隨便(bian)填，很多剛(gang)入門(men)小程(cheng)序開(kai)(kai)發的(de)人會有(you)疑慮，我沒有(you)注冊(ce)小程(cheng)序能直(zhi)接(jie)開(kai)(kai)發嗎。這里明確的(de)告訴(su)你，沒有(you)注冊(ce)小程(cheng)序也是可(ke)(ke)以學習開(kai)(kai)發小程(cheng)序的(de)。只需要(yao)按照我上圖所示點(dian)擊(ji)使(shi)用(yong)測試號體驗即可(ke)(ke)。

下(xia)面是小(xiao)程序開發工具的(de)界面

開發(fa)工具界面

到(dao)這里我(wo)們的(de)武(wu)器便裝(zhuang)備好了，接下來(lai)開始為武(wu)器填(tian)充子彈了。

接下來帶領大家零基礎入門自己的(de)第一(yi)個簡單(dan)小程序(xu)。

由于是(shi)入門(men)所以我們的(de)小程序比較(jiao)簡(jian)單(dan)主(zhu)要包含以下(xia)功能

• 兩個頁面：首頁，個人中心頁
• 底部tab實現
• 頂部標題設置

項目效果圖

一(yi)，代碼(ma)目錄

項目目錄

二，展開講解

images：目錄用(yong)來存放一些我們的圖片資源，如項目里底部tab的圖標，就放在這里。

pages： 這(zhe)里是我們寫小程序的主要代碼目(mu)錄，目(mu)前我們有(you)兩個頁面首頁和個人中(zhong)心頁。

app.json: 我(wo)們小程(cheng)序的一些全局配置都在這(zhe)(zhe)里。如我(wo)們底部的兩個tab就(jiu)是在這(zhe)(zhe)里配置的。

三，小程(cheng)序(xu)開發(fa)三劍客

我(wo)(wo)們開發小(xiao)程序需要創建三個對應的文件，比如我(wo)(wo)們創建首頁index。在index下需要創建如下三個文件

這三個文件(jian)就是(shi)我(wo)們開發(fa)小程序(xu)必(bi)不可少的三劍(jian)客

• index.wxml:確定首頁的大體模樣。比如我們建大樓，這里的代碼來確定樓長什么樣，多高，多寬，多少層等。
• index.wxss:這里主要做一些樣式的設置，如我們的樓外觀，需要貼什么樣的瓷磚，刷什么顏色。
• index.js:用來處理我們首頁的一些事件，讓首頁具備某些能力。如我們樓里有游樂場，電影院等。通過js來處理這些事件。
• 這就是我們首頁的大致。下面帶大家看下簡單代碼

<!--index.wxml-->
<view style="color:blue; ">
 我是傳說中的首頁
</view>

這就是index.wxml,這里我們只(zhi)是簡單展示(shi)一段話。

index.wxss和index.js用的(de)是默認的(de)，沒有(you)什(shen)么東西(xi)，這里就不貼出來了(le)，大家想看可以下載源(yuan)碼(ma)看。

四，看(kan)下app.json都配置了些什么

// app.json
{
 // 設置我們小程序的頁面：首頁，個人中心
 "pages": [
 "pages/index/index",
 "pages/me/me"
 ],
 // 設置標題欄字體顏色等信息
 "window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "30天入門小程序01",
 "navigationBarTextStyle": "black"
 },
 // 底部模塊tab
 "tabBar": {
 "list": [{
 "pagePath": "pages/index/index",
 "text": "首頁",
 "iconPath": "/images/tab1n.png",
 "selectedIconPath": "/images/tab1y.png"
 },
 {
 "pagePath": "pages/me/me",
 "text": "我的",
 "iconPath": "/images/tab2n.png",
 "selectedIconPath": "/images/tab2y.png"
 }]
 }
}

個人中心里的代碼就不貼出來啦，大家下載(zai)源碼看下就行。

入門(men)第一節課，不(bu)需要大家(jia)知道太多，按(an)照(zhao)源碼(ma)里，大致看下，了解下小程序的代碼(ma)長(chang)什么樣子就行(xing)。其(qi)實很簡單。

今(jin)天就到這(zhe)里，接下來的(de)課(ke)程我會盡量錄成(cheng)視頻，感覺文章不太形(xing)象。對于新手來說，視頻學(xue)起來可能效率更(geng)高些(xie)。