微信小程序 笔记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