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

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

官方開發工具的下載

至于怎么安裝(zhuang)(zhuang)就不用(yong)我(wo)說了。下(xia)載下(xia)來后(hou)雙擊就可以安裝(zhuang)(zhuang)了。安裝(zhuang)(zhuang)后(hou)需要掃(sao)碼登錄。掃(sao)碼登后(hou)的界面如下(xia)。

新建項目

項目名字可(ke)以隨便填(tian)，很多(duo)剛入(ru)門小(xiao)程序(xu)(xu)開發的人會有疑慮，我(wo)沒有注(zhu)冊小(xiao)程序(xu)(xu)能直接(jie)開發嗎(ma)。這(zhe)里明確的告訴你，沒有注(zhu)冊小(xiao)程序(xu)(xu)也是可(ke)以學習(xi)開發小(xiao)程序(xu)(xu)的。只(zhi)需(xu)要按(an)照我(wo)上(shang)圖所示(shi)點擊使用測試(shi)號體驗(yan)即(ji)可(ke)。

下面是(shi)小程序(xu)開發工(gong)具的界面

開發工具界面

到這里我們的武器便裝備(bei)好了，接下來開(kai)始為武器填(tian)充子彈了。

接下來(lai)帶領大家零基(ji)礎入門自己的第(di)一個簡(jian)單(dan)小程序。

由于(yu)是入門所(suo)以(yi)我(wo)們的小程序比(bi)較簡單主要(yao)包(bao)含以(yi)下功能

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

項(xiang)目(mu)效果圖

一，代碼目錄

項目目錄

二，展開(kai)講(jiang)解(jie)

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

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

app.json: 我(wo)(wo)們小程序的(de)一(yi)些全局(ju)配(pei)置都在(zai)這里。如(ru)我(wo)(wo)們底部(bu)的(de)兩(liang)個tab就是在(zai)這里配(pei)置的(de)。

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

我們(men)開發小程序(xu)需(xu)要(yao)創(chuang)建三個對應的文件，比如我們(men)創(chuang)建首(shou)頁index。在index下(xia)需(xu)要(yao)創(chuang)建如下(xia)三個文件

這(zhe)三(san)(san)個文件就是(shi)我(wo)們開發小程序必不可少的(de)三(san)(san)劍客

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

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

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

index.wxss和index.js用(yong)的是默認的，沒有什(shen)么(me)東西，這里就(jiu)不貼出來了，大家想看(kan)可以下載源碼看(kan)。

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

// 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"
 }]
 }
}

個(ge)人中心(xin)里的代碼(ma)就不貼出(chu)來啦(la)，大(da)家下(xia)載(zai)源碼(ma)看下(xia)就行。

入門第一節課，不需要大(da)家知道太多，按(an)照源碼里，大(da)致看下(xia)，了解下(xia)小程(cheng)序的代(dai)碼長什么樣子就行。其實很簡單。

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