現(xiàn)在小程序越來越火，各大平臺(tái)都有自己的小程序。微信小程序、支付寶小程序、頭條小程序、抖音小程序、百度小程序等?，F(xiàn)在我們來看下微信小程序是怎樣開發(fā)的。
第一步：熟悉小程序項(xiàng)目文件目錄，
1、app.json 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋

2、app.wxss 是整個(gè)小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

3、微信小程序中的每一個(gè)頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個(gè)頁面是小程序的首頁

4、app.js 主要是全局公共的js方法聲明及調(diào)用所在的文件

5、app.json 是小程序整個(gè)的配置文件，所有頁面都在此注冊(cè)，不然不能訪問。會(huì)報(bào)錯(cuò)

6、app.wxss 是全局的css文件， 公共css寫在該文件中

7、 .wxml后綴的文件是頁面結(jié)構(gòu)文件

8、 微信小程序是微信全新定義的規(guī)范，是基于xml+js的。不支持也不兼容HTML

image.png

第二步：熟悉app.json項(xiàng)目配置，底部tabbar、頁面路徑，項(xiàng)目標(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)的某個(gè)頁面

wx.redirectTo   關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，但是不允許跳轉(zhuǎn)到tabbar頁面

wx.navigateTo   保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，但是不能跳轉(zhuǎn)tabbar頁面。

wx.navigateBack   關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面。

<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release" class="nav"></navigator>// 跳轉(zhuǎn)到新的小程序

注意事項(xiàng)：
1、背景圖片不識(shí)別，解決辦法：把圖片上傳至服務(wù)器，把地址寫在背景路徑，或者把圖標(biāo)轉(zhuǎn)換

2、底部導(dǎo)航欄 tabBar底部導(dǎo)航欄 tabBar是一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè)tab

3、小程序中不能和字節(jié)操作Window對(duì)象，document文檔。小程序中不能和字節(jié)操作Window對(duì)象，document文檔。

4、小程序腳本邏輯實(shí)在JsCore中運(yùn)行，JsCore是一個(gè)沒有窗口的對(duì)象環(huán)境，所以不能再腳本中使用window、zepto、jQuery。

5、樣式表不支持級(jí)聯(lián)選擇器， WXSS支持以 . 開始的類選擇器

6、tabBar的頁面用switchTab進(jìn)行調(diào)整， tabBar的頁面用switchTab進(jìn)行調(diào)整， 沒有tabBar的頁面用navigateTo進(jìn)行調(diào)整

第一天的知識(shí)就到這了，有不明白的可以留言。