欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序 笔记1 配置

程序员文章站 2024-02-11 16:40:58
...

目录

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"
}

总结:课程资料,侵删

微信小程序 笔记1 配置

屏幕密度与图片尺寸

屏幕 型号 机型 图片大小
一倍屏幕 @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

 

相关标签: 微信小程序