微信小程序介绍以及开发组件和flex布局

微信小程序介绍以及开发组件和flex布局

微信小程序的介绍

什么是微信小程序？

• 移动互联网时代，手机。
• 手机软件，在手机上中安装很多软件。
• 腾讯和阿里（只安装自己不用别人）
  • 腾讯：微信 + N小程序
  • 阿里：支付宝 + N小程序

如何开发

• 小程序：学习微信开发的语言（前端html、css、js、vue.js）
  • 微信开发者工具
• API：restful接口（Python+django+drf框架）。
  • pycharm

环境搭建

申请一个微信公众平台

保存自己的appid

下载工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CwKWYATQ-1592195221374)(

创建项目

开发程序

1全局配置

{
  "pages": [
    "pages/index/index",
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#FFDAB9",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "李业"
  },
  "tabBar": {
    "selectedColor":"#CD5C5C",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
      }
    ]
  }
}

组件

text

编写文本信息，类似于span标签

view

容器，类似于div标签

image

图片使用方法都和html css中类似

像素

• px
• rpx，750rpx

在开发小程序时给组件定义大小时一律用rpx。不用px。

flex布局

一种非常方便的布局方式。

在容器中记住4个样式即可。

display: flex;   				flex布局
flex-direction: row;			规定主轴的方向：row/column
justify-content: space-around;	元素在主轴方向上的排列方式:flex-start/flex-end/space-around/space-between		
align-items: center;			元素在副轴方向上的排列方式:flex-start/flex-end/space-around/space-between		

设置flex-direction:决定主轴的方向（子元素/项目的排列方向）

1.row;
主轴横向从左至右

2.column;
主轴纵向，从上至下

justify-content属性：

默认情况下，项目都从主轴线的mian start点开始排列在主轴线上。

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

align-items属性：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
ween：两端对齐，项目之间的间隔都相等。

align-items属性：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。