微信小程序学习笔记（day01）

day01 微信小程序

问题

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

• 为什么用小程序

微信用户基数大
在微信上用小程序较为便捷

• 如何开发

小程序：学习微信开发的语言（前端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下载微信开发者工具

2.2.3创建项目

小程序配置

{
    "pages": [//含有几个页面
        "pages/index/index",
        "pages/home/home"
    ],
    "window": {//设置窗口
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Hello",
        "navigationBarTextStyle": "black"
    },
    "tabBar": {//关于底部tab的相关配置
        "selectedColor": "#CD5C5C",//某一tab被选中时的颜色
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "static/tabbar/icon_menu_choice.png",//某一tab的图标
                "selectedIconPath": "static/tabbar/icon_menu_choice_pressed.png"//某一tab被选中时的图标
            },
            {
                "pagePath": "pages/home/home",
                "text": "我的",
                "iconPath": "static/tabbar/icon_menu_me.png",
                "selectedIconPath": "static/tabbar/icon_menu_me_pressed.png"
            }
        ]
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

3 微信小程序

3.2组件

3.2.1 text

编写文本信息，类似于span

3.2.2 view

容器，类似于div

3.2.3 image

即img

以上三个组件可以覆盖大部分微信小程序功能

3.3像素

• px
• rpx，整个页面宽度等于750rpx

4 flex布局

一种非常方便的布局方式
在容易中记住四个样式即可

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