WX01--微信小程序介绍

day01 微信小程序

1. 问题

• 什么是微信小程序？

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

• 为什么要做小程序？

  微信用户基数大。
  在微信上用我们小程序会比较便捷。
  

• 如何开发小程序？
  

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

2.环境的搭建

2.1 Python环境

• 虚拟环境
  • django
  • drf
• pycharm

2.2 小程序环境

2.2.1 申请一个微信公众平台

2.2.2 保存自己的appid

appid = wx1a3fac0e7easdfffs

2.2.3 下载开发者工具

2.2.4 创建项目

3.开发小程序

3.1 全局配置

{
  "pages": [     // 页面配置
    "pages/index/index",
    "pages/home/home"
  ],
      
  "window": {
    "navigationBarBackgroundColor": "#FFDAB9",  // 小程序标题背景色 只支持16进制 
    "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"
      }
    ]
  }
}

3.2 组件(标签)

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

#  view标签
  容器，类似于div标签

# image标签
  图片

3.3 样式

3.3.1 像素

px
 
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx

# 小程序中：
  建议使用rpx像素，是相对像素，会根据页面宽度自动跳转像素，
  手机默认宽度是750rpx
  如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素
  建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

4.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