什麼是小程序
英文名 mini program,一種嶄新的應用程式。2016年張小龍（微信創始人）提出微信應用號，當時他的描述是，小程序是一種不需要下載安裝即可使用的應用，他實現了應用觸手可及的夢想，用戶掃一掃或者搜一下即可打開應用，也體現了用完即走的理念，用戶不用關心是否安裝太多應用的問題，應用無處不在，隨時可用，但又無序安裝卸載。因為蘋果公司告了所以改名微信小程序。2017年年初，給用戶開放了入口。但是隻能企業，後面對個人開放了。目前比較火爆的微信小程序，跳一跳之類的。官網：mp.weixin.qq.com
開發準備工作
註冊小程序賬號，利用微信號註冊即可，註冊地址為：https://mp.weixin.qq.com/
小程序開發者工具下載，下載地址為：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
開發工具介紹
開發者工具分為四個部分：模擬器，編輯器，調試器，工具欄
- 模擬器：當我們保存了編輯的代碼，就可以直接在模擬器中看到效果
- 編輯器：小程序所有的開發代碼都可以在這裡修改。
- 調試器：繼承了許多調試小程序需要的功能
- 工具欄：用於編譯，預覽小程序的源代碼
項目搭建
1、選擇在本地創建的項目目錄
2、填寫AppID
- 查找AppID，登錄小程序官網官網：mp.weixin.qq.com->設置->開發設置->AppID
項目目錄介紹
|–pages
|--每個頁面(index) //在pages文件夾中，每一個頁面都是有個文件夾
index.js
index.wxml
index.wxss
index.json
|--utils
app.js
app.json
app.wxss
project.config.json //工程配置文件 描述整個項目的參數
1、pages:放所有頁面的文件夾，此目錄下的每一個文件夾代表一個頁面，那咱們的項目兩個頁面就兩個文件夾
2、每個頁面包含四個文件
.wxml文件是界面文件， ---->html
.js是事件交互文件，用於處理界面的點擊事件等功能； --->js
.wxss為界面美化文件，讓界面顯示的更加美觀； --->css
.json為配置文件，用於修改導航欄顯示樣式等，小程序每個頁面必須有.wxml和.js文件，
其他兩種類型的文件可以不需要。
3、util：該文件件主要用於存放全局的一些.js文件，公共用到的一些事件處理代碼文件可以放到該文件夾下，
用於全局調用。
4、app.js : 系統的方法處理文件，主要處理程序的聲明週期的一些方法；例如：程序剛開始運行時事件處理等
5、app.json : 系統全局配置文件，設置導航頭的顏色，字體大小，下面有沒有tabbar等功能，具體頁面的配置在頁面的json文件中單獨修改；
6、app.wxss : 全局的界面美化代碼
7、project.config.json 通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置.考慮到這點，小程序開發者工具在每個項目的根目錄都會生成一個 project.config.json，
app.js
App() 註冊一個小程序，整個的app在整個小程序裡面只會調用一次，整體是一個app，app下面有很多page，在這個app裡面配置的東西，在每個頁面都可以使用
onLaunch 函數類型 聲明週期函數-監聽小程序初始化，全局只會觸發一次
globalData：全局的數據
app.json
pages 接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的[路徑+文件名]
信息，數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改。
注：文件名不需要寫文件後綴，因為框架會自動去尋找路徑下 .json, .js, .wxml, .wxss四個文件進行整合。 如果添加後綴報錯。
windows 小程序所有頁面的頂部背景顏色，文字顏色定義在這裡的
“backgroundTextStyle”:”light”, //下拉 loading 的樣式，僅支持 dark/light
“navigationBarBackgroundColor”: “#fff”, //導航欄背景顏色，如”#000000” 顏色值最好不要寫單詞，十六進制也不要簡寫
“navigationBarTitleText”: “WeChat”, //導航欄標題文字內容
“navigationBarTextStyle”:”black” //導航欄標題顏色，僅支持 black/white
Page配置
“pages”:[
“pages/index/index”,
“pages/center/center”
],
在tabBar裡面進行設置的路由，將會固定在頁面的底部。
頭部配置
“window”:{
“backgroundTextStyle”:”light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “WeChat”,
“navigationBarTextStyle”:”black”
}
路由配置
“tabBar”: {
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “首頁”,
“iconPath”:”img/index.png”, //默認的圖標
“selectedIconPath”:”img/linghtZB.png” //選中後的圖標
},
{
“pagePath”: “pages/center/center”,
“text”: “個人中心”,
“iconPath”: “img/center.png”,
“selectedIconPath”: “img/center.png”
}
]
}
結束
微信小程序的介紹以及小程序開發工具以及具體的配置信息都已經分享完了，瞭解了這些就可以開始小程序的開發啦。
常用的標籤及語法見下一篇文章博客啦^_^
小編會陸續更新小編在實際開發中總結的知識或者走過的坑，覺得小編的文章有用，記得關注，評論，轉發哦
閱讀更多 小胖世界 的文章
