pyrhon微信小程序（二）

接一，继续学习。和大家一起学习进步。

学习全局配置。
属性类型描述
entryPagePath string 小程序默认启动首页
pages string[] 页面路径列表
window Object 全局的默认窗口表现
tabBar Object 底部 tab 栏的表现
networkTimeout Object 网络超时时间
debug boolean 是否开启 debug 模式，默认关闭
functionalPages boolean 是否启用插件功能页，默认关闭

{
    
    
  "pages":[             //配置页面
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    			//配置默认窗口
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#BBFFFF",    //设置背景颜色（rgd颜色）
    "navigationBarTitleText": "小卖部",                 //设置名称
    "navigationBarTextStyle":"black"     		//导航标题颜色
  },
 "tabBar": {
    
    
    "selectedColor":"#ddd",				//设置颜色
    "list": [
      {
    
    
        "pagePath": "pages/index/index",			//地址
        "text": "首页",				//名称
        "iconPath": "pages/static/tabber/1161511.png",			//图片
        "selectedIconPath": "pages/static/tabber/1161511.png"
      },
      {
    
    
        "pagePath": "pages/shop/shop",
        "text": "商品",
        "iconPath": "pages/static/tabber/3966732.png",
        "selectedIconPath": "pages/static/tabber/3966732.png"
      }
    ]
  }
}

组件：
test:编写文本信息：类似于span标签

view:容器，类似于div标签

image:图片

flex布局：

/* pages/index/index.wxss */
.c1{
    
    
  color:red;
}
image{
    
    
  /*宽*/
  width: 100rpx;
  /*高*/
  height: 100px;
}
.menu{
    
    
  display: flex;

  /*水品方向排列,规定主轴方向，row水品方向，。column垂直方向*/
  flex-direction: column;

  /*元素在主轴方向如何展示*/
  justify-content: space-around;
  /*元素在副轴方向如何展示,flex-start：中间，flex-end:末尾*/
  align-items: flex-start;

}
.menu.item{
    
    
  display: flex;
  flex-direction: column;
}

样式：

 display: flex;		flex布局
  flex-direction: row;			规定主轴方向
  justify-content: space-around;		规定主轴上排列方向
  align-items: flex-start;				规定主轴排列方向

pyrhon微信小程序（二）

猜你喜欢