微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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;				规定主轴排列方向

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐