## [視頻講解](https://edu.csdn.net/course/detail/9531) 小程序開發我們需要下載相應的開發工具，個人比較推薦的是微信官方出的開發工具。畢竟是官方工具。 首先貼出官方開發工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html  至于怎么安裝就不用我說了。下載下來后雙擊就可以安裝了。安裝后需要掃碼登錄。掃碼登錄后的界面如下。  項目名字可以隨便填，很多剛入門小程序開發的人會有疑慮，我沒有注冊小程序能直接開發嗎。這里明確的告訴你，沒有注冊小程序也是可以學習開發小程序的。只需要按照我上圖所示點擊無appid體驗即可。 ## 下面是小程序開發工具的界面  到這里我們的武器便裝備好了，接下來開始為武器填充子彈了。 ## 接下來帶領大家零基礎入門自己的第一個簡單小程序。 由于是入門所以我們的小程序比較簡單主要包含以下功能 - 兩個頁面：首頁，個人中心頁 - 底部tab實現 - 頂部標題設置  ### 一，代碼目錄  ### 二，展開講解 - images：目錄用來存放一些我們的圖片資源，如項目里底部tab的圖標，就放在這里。 - pages： 這里是我們寫小程序的主要代碼目錄，目前我們有兩個頁面首頁和個人中心頁。 - app.json: 我們小程序的一些全局配置都在這里。如我們底部的兩個tab就是在這里配置的。 ### 三，小程序開發三劍客 我們開發小程序需要創建三個對應的文件，比如我們創建首頁index。在index下需要創建如下三個文件  這三個文件就是我們開發小程序必不可少的三劍客 - index.wxml:確定首頁的大體模樣。比如我們建大樓，這里的代碼來確定樓長什么樣，多高，多寬，多少層等。 - index.wxss:這里主要做一些樣式的設置，如我們的樓外觀，需要貼什么樣的瓷磚，刷什么顏色。 - index.js:用來處理我們首頁的一些事件，讓首頁具備某些能力。如我們樓里有游樂場，電影院等。通過js來處理這些事件。 這就是我們首頁的大致。下面帶大家看下簡單代碼 ``` <!--index.wxml--> <view style="color:blue; "> 我是傳說中的首頁 </view> ``` 這就是index.wxml,這里我們只是簡單展示一段話。 index.wxss和index.js用的是默認的，沒有什么東西，這里就不貼出來了，大家想看可以下載源碼看。 ### 四，看下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" }] } } ``` 個人中心里的代碼就不貼出來啦，大家下載源碼看下就行。 #### 入門第一節課，不需要大家知道太多，按照源碼里，大致看下，了解下小程序的代碼長什么樣子就行。其實很簡單。 今天就到這里，接下來的課程我會盡量錄成視頻，感覺文章不太形象。對于新手來說，視頻學起來可能效率更高些。如果想提前看視頻加我個人微信。 如果你有關于微信小程序的問題。也可以加我私人微信：2501902696（備注小程序） # [配套筆記和視頻](http://www.hmoore.net/java-qiushi/xiaochengxu123/760223) 我以后會把每一節的代碼放到百度網盤供大家下載 源碼:https://pan.baidu.com/s/1uG63tvDj41KlRvGMe3NNSg 密碼:i778 如果連接失效請加我微信2501902696（備注小程序）