現(xiàn)在小程序越來越火蝗柔，各大平臺都有自己的小程序。微信小程序民泵、支付寶小程序癣丧、頭條小程序、抖音小程序洪灯、百度小程序等】茬裕現(xiàn)在我們來看下微信小程序是怎樣開發(fā)的。
第一步：熟悉小程序項目文件目錄签钩，
1掏呼、app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成铅檩，配置小程序的窗口背景色憎夷，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題昧旨。注意該文件不可添加任何注釋
2拾给、app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則兔沃。
3蒋得、微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁
4乒疏、app.js 主要是全局公共的js方法聲明及調(diào)用所在的文件
5额衙、app.json 是小程序整個的配置文件，所有頁面都在此注冊怕吴，不然不能訪問窍侧。會報錯
6、app.wxss 是全局的css文件转绷， 公共css寫在該文件中
7伟件、 .wxml后綴的文件是頁面結(jié)構(gòu)文件
8、 微信小程序是微信全新定義的規(guī)范议经，是基于xml+js的斧账。不支持也不兼容HTML
第二步：熟悉app.json項目配置，底部tabbar爸业、頁面路徑其骄，項目標(biāo)題，導(dǎo)航扯旷，字體顏色等拯爽。
"window": {
"backgroundTextStyle" : "#000" //下拉背景字體，loading圖的樣式
"navigationBarBackgroundColor" : "red" //導(dǎo)航標(biāo)題背景色
"navigationBarTitleText": "標(biāo)題", //導(dǎo)航標(biāo)題內(nèi)容
"navigationBarTextStyle": "#fff" //導(dǎo)航標(biāo)題字體顏色
enablePullDownRefresh : false / true //是否開啟下拉刷新
},
"tabBar": {
"color": "#999999", //底部導(dǎo)航字體顏色
"selectedColor": "#f3c04b",//底部導(dǎo)航選中字體顏色
"borderStyle": "#dcdcdc" , //底部導(dǎo)航上邊線顏色
"backgroundColor": "#f6f6f6", //底部導(dǎo)航背景色
"list": [
{
"pagePath": "pages/home/index", //頁面路徑
"iconPath": "image/tabbar/icon-1.png",//默認(rèn)圖標(biāo)
"selectedIconPath": "image/tabbar/icon-1-1.png",//選中當(dāng)前圖標(biāo)
"text": "首頁"http://tabbar標(biāo)題
},
{
"pagePath": "pages/sort/index",
"iconPath": "image/tabbar/icon-2.png",
"selectedIconPath": "image/tabbar/icon-2-1.png",
"text": "分類"
},
{
"pagePath": "pages/order/index",
"iconPath": "image/tabbar/icon-2.png",
"selectedIconPath": "image/tabbar/icon-2-1.png",
"text": "購物車"
},
{
"pagePath": "pages/my/index",
"iconPath": "image/tabbar/icon-3.png",
"selectedIconPath": "image/tabbar/icon-3-1.png",
"text": "我的"
}
]
},
第三步：小程序路由
wx.switchTab 跳轉(zhuǎn)到tabBar頁面钧忽，并關(guān)閉其他所有非tabBar頁面
wx.reLaunch 關(guān)閉所有頁面毯炮，打開到應(yīng)用內(nèi)的某個頁面
wx.redirectTo 關(guān)閉當(dāng)前頁面逼肯，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，但是不允許跳轉(zhuǎn)到tabbar頁面
wx.navigateTo 保留當(dāng)前頁面桃煎，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面篮幢，但是不能跳轉(zhuǎn)tabbar頁面。
wx.navigateBack 關(guān)閉當(dāng)前頁面为迈，返回上一頁面或多級頁面三椿。
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release" class="nav"></navigator>// 跳轉(zhuǎn)到新的小程序
注意事項：
1、背景圖片不識別葫辐，解決辦法：把圖片上傳至服務(wù)器搜锰，把地址寫在背景路徑，或者把圖標(biāo)轉(zhuǎn)換
2耿战、底部導(dǎo)航欄 tabBar底部導(dǎo)航欄 tabBar是一個數(shù)組蛋叼，只能配置最少2個、最多5個tab
3剂陡、小程序中不能和字節(jié)操作Window對象狈涮，document文檔。小程序中不能和字節(jié)操作Window對象鸭栖，document文檔歌馍。
4、小程序腳本邏輯實在JsCore中運行晕鹊，JsCore是一個沒有窗口的對象環(huán)境骆姐，所以不能再腳本中使用window、zepto捏题、jQuery。
5肉渴、樣式表不支持級聯(lián)選擇器公荧， WXSS支持以 . 開始的類選擇器
6、tabBar的頁面用switchTab進行調(diào)整同规， tabBar的頁面用switchTab進行調(diào)整循狰， 沒有tabBar的頁面用navigateTo進行調(diào)整
第一天的知識就到這了，有不明白的可以留言券勺。
