程序IT圈
只提供有用的編程技術，關注即可習得新技能
在去年2017年1月9日，張小龍在2017微信公開課Pro上發布的小程序正式上線 。時至今日，小程序已經有整整一年時間了 。在2017年12月28日，微信更新的 6.6.1 版本開放了小游戲，「跳一跳」小游戲在那一晚徹底火了。由于微信的流量龐大，所以很多開發者看好小程序，我也不例外 。
微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗 。
小程序是一種不需要下載安裝即可使用的應用，它實現了應用觸手可及的夢想，用戶掃一掃或者搜一下即可打開應用 。
（小程序短視頻介紹，建議wifi下觀看）
了解完小程序到底是什么，接下來是本文的重點 。對于沒接觸過小程序編程的，可以看過來 。小編帶大家入坑 。這篇文章大致說一下如何一步一步創建個簡單的小程序出來 。
首先，先看一下效果圖 。因為是個學習案例，所以功能非常簡單，就是一個簡單的頁面展示功能 。后面有時間和精力，會再去完善功能的 。
搭建小程序環境
目前最新的工具是2017.12.15 更新的，版本號（1.01.1712150）
下載地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
安裝環境，是很簡單的，下載完安裝包直接安裝即可。
我們的開發環境如下：
如何創建第一個小程序
可以先不用注冊小程序ID
點擊確定，第一個小程序"Hello World"已經可以運行了，簡不簡單哈！
介紹一下項目結構
從上面項目結構圖，可以看到一個頁面構成主要有三大部分構成 index.wxml 、index.wxss 、index.js 。一看，怎么跟前端的這么類似 。認真一看，這功能還真是沒差別 。對于會一點前端知識的，我想，要入門小程序開發，應該是很簡單的 。
一個網頁主要 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 是用來處理這個頁面和用戶的交互。小程序的頁面跟這個完全相同 ，不一樣的就是改了個名字 。
除了以上頁面的三大構成，還有項目的根目錄還有一個 app.json 和 project.config.json 。
app.json 是對當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。
project.config.json 可以針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等 。
（附上一張官方文檔截圖）
配置項目的底部導航
介紹完小程序的具體目錄，接下來，帶大家看看如何配置項目的底部導航 。
小程序要實現這個底部導航其實很簡單，我們只要在根目錄下的app.json文件中配置：
具體屬性值可以看底下這張截圖，很明確的說明了：
具體官方文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
如何創建個新頁面
小程序的頁面創建，都是需要在配置文件中配置一下路徑，不然無法訪問 。配置也非常簡單，只需要在app.json文件下找到一個pages的屬性值 。
pages屬性：接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改。
注意：文件名不需要寫文件后綴 ，而且路徑不能寫錯！
重點：頁面如何加載數據
介紹完如何創建一個新頁面，下面就開始重點介紹，我們如何給一個頁面加上內容 。還是以一開始的例子 ，效果圖如下 。我們發現這個頁面就是上面一個橫向列表+底部是個縱向列表組成 。
要實現上圖這個頁面，首先你要先學習一下小程序開發組件 。小程序提供了一系列基礎組件，組件是視圖層的基本組成單元，一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內 。這部分，肯定需要你花功夫自己去學習小程序的官方文檔，這個不是簡單一句兩句就能講明白的 。
官方文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
學習完基本組件后，這還不夠。因為上圖的數據都是網絡請求過來展示的，所以你還需要繼續學習小程序提供的原生API 。比如下面的例子用網絡如何請求數據 等等。
學習官方文檔如何使用API：
https://mp.weixin.qq.com/debug/wxadoc/dev/api/
源碼獲取方式
1、源碼已經上傳到github，喜歡的可以點Star一下，后續看情況維護 。
地址：
https://github.com/llpdev/ToutiaoWechat
2、代碼也已經上傳到微信公眾號，后臺回復【123】，獲取源碼 。
小編也只是剛接觸小程序開發，目前也只會一些簡單的，遇到不懂的，就多研究一下官方文檔和官方提供的學習案例 。如果上面有錯誤，請在評論區留言 。學習小程序開發，最好你要有一些前端開發網頁的基本知識，這樣學起來一定會更加輕松 。
本文屬于原創，如有轉載，請標注原作者，版權歸本公眾號所有。如果你喜歡我寫的文章請關注程序IT圈，歡迎大家繼續關注本公眾號的技術博文。如果您覺得這篇文章對你有所幫助的話，不妨點個贊或給個贊賞哈，您的支持就是我堅持原創的動力~~
推薦閱讀：
關注【程序IT圈】，讓我們一起成長
合適分享|值得留言
關注微信
