1.小程序框架

小程序技术：学习微信开发的语言（前端html、css/js/vue.js）

  • 微信开发者工具

API：restful接口（Python+django+drf框架）

  • pycharm/vscode

    2、环境的搭建

  • 虚拟环境

    • django
    • drf
  • vscode

    2.1小程序账号申请

    2.2 保存自己的appid

    appid：wx80948281d878faeb

    2.3 下载开发者工具

    1.   根据系统，下载相应版本

    2.4 创建项目

    3、开发小程序

    3.1 全局配置

  1. pages
  2. window
    1. 标题栏，标题文字
    2. 底部栏，底部icon

      3.2 组件

      3.2.1 text
      边学文本信息，类似span
      3.2.2 view
      容器，类似于div标签
      3.2.3 image
      图片

      3.3 样式

      3.3.1 像素
  • px
  • rpx：750rpx，微信固定宽度为750rpx，随设备变化，rpx会自动变化

    4 flex布局

    flex是一种非常方便的布局方式
  1. flex布局

display: flex
2、规定主轴方向
flex.direction: row 规定主轴方向为水平
flex.direction: colum 规定主轴方向为垂直
3、在主轴方向如何排列

  • justify-content: flex-start 在主轴方向从左分布
  • justify-content: flex-end在主轴方向从右分布
  • justify-content: space-around 在主轴方向上平均分布
  • justify-content: center 在主轴方向居中分布
  • justify-content: space-between 在主轴方向左右对齐分布

4、在副轴上如何排列

  • align-items: flex-start 在副轴上居左展示
  • align-items: cener 在副轴上居中展示
  • align-items: flex-end 在副轴上居右展示
  • align-items: space-around
  • align-items: space-between

    5 实战

image.pngimage.png