微信小程序 筆記1 配置

目錄

app.json下的window

 app.json下的tabBar

屏幕密度與圖片尺寸


app.json下的window

//app.json:注意json不能有註釋,只是筆記
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  //window控制的是導航欄
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FFCF00", //導航欄顏色(最上面的)
    "navigationBarTitleText": "外賣",//導航欄標題
    "navigationBarTextStyle": "black",//導航欄文字樣式。要麼black要麼white
    "navigationStyle":"custom"//隱藏導航欄,不想隱藏不加(大多數時候都不隱藏)
    "backgrondColor":"pink",//下拉刷新的顏色,需要和下拉刷新配合使用
    "enablePullDownRefresh":true//下拉刷新
    "backgroundTextStyle":"light"//下拉刷新字體顏色
  },
  "sitemapLocation": "sitemap.json"
}

 app.json下的tabBar

{
  "pages": [
    "pages/index/index",
    "pages/wx/wx",
    "pages/QQ/QQ",
    
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FFCF00",
    "navigationBarTitleText": "外賣",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "backgrondColor": "pink",
    "backgrondTextStyle": "light"
  },
  "tabBar": {//可以做2-5個欄目
    "color": "#000000",
    "selectedColor": "#FFF",
    "backgroundColor": "#FFCF00",//背景色
    "borderStyle": "black",//欄目邊界
    "list": [
    {
      "pagePath": "pages/index/index",//注意:第一個必須是pages裏面第一個頁面
      "text": "QQ",
      "iconPath": "images/wx.jpg",
      "selectedIconPath": "images/wx2.jpg"
    },
    {
      "pagePath": "pages/QQ/QQ",
      "text": "QQ",
      "iconPath": "images/wx.jpg",
      "selectedIconPath": "images/wx2.jpg"
    },
    {
      "pagePath": "pages/QQ/QQ",
      "text": "QQ",
      "iconPath": "images/wx.jpg",
      "selectedIconPath": "images/wx2.jpg"
    },
    {
      "pagePath": "pages/QQ/QQ",
      "text": "QQ",
      "iconPath": "images/wx.jpg",
      "selectedIconPath": "images/wx2.jpg"
    }]
  },
  "sitemapLocation": "sitemap.json"
}

總結:課程資料,侵刪

屏幕密度與圖片尺寸

屏幕 型號 機型 圖片大小
一倍屏幕 @1x 3gs 44px
二倍屏幕 @2x 5s,6s,7,8 44px*2
三倍屏幕 @3x 6+,7+,8+ 44px*3
四倍屏幕 @4x    

點擊按鈕的建議採用200*200px圖片素材,防止圖片失真,因爲圖片只能縮小不能放大。

圖片尺寸要能被2整除,不能有小數

做的時候要以iPhone6尺寸爲基準,建議兩側邊距:20px,24px,30px,32px

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章