day01 微信小程序

一、如何开发小程序

1.小程序

学习微信开发的语言（前端html、css、js、vue.js）

　　微信开发工具

2.restful接口

Python+django+def框架

　　pycharm

二、环境的搭建

1.python环境

　　django、drf

　　pycharm

2.小程序环境

　　1>申请一个微信公众平台

　　2>保存自己app的id

　　　　wx48e425c85116c802

　　3>下载开发者工具

　　4>创建项目----停车位

        

3.组件

1>text

编写文本信息，类似于span

2>view

容器，类似于div标签

3>image

图片

4>样式

　　像素

　　　　px:像素

　　　　rpx:根据设备的不同，自动调节

　　　　(整个设备的宽度，都是750rpx)

　　　　

4.flex布局

一种非常方便的布局方式，在容器中只需要记住四个样式即可：

1>display:flex;　　　　flex布局

2>flex-direction:row;（或者flex-direction:column;）　　　　规定主轴的方向row/column

3>justify-content:space-around;　元素在主轴上的排列方式flex-start/center/flex-end/space-around/space-between

4>align-items:center;　　　　　　 元素在副轴上的排列方式

app.json

{
  "pages": [
    "pages/index/index",
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#E6E6FA",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序"
  },
  "tabBar": {
    "color":"#000000",
    "selectedColor": "#FF0000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"/image/a1.png",
        "selectedIconPath":"/image/a2.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath":"/image/b1.png",
        "selectedIconPath":"/image/b2.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

index.wxml

<!--index.wxml-->
<view>实例一</view>
<view class="menu_1">
  <view class="item">
    <image src="/image/草莓.png"></image>
  </view>
  <view class="item">
    <image src="/image/苹果.png"></image>
  </view>
  <view class="item">
    <image src="/image/葡萄.png"></image>
  </view>
  <view class="item">
    <image src="/image/西瓜.png"></image>
  </view>
</view>

<view>实例二</view>
<view class="menu_2">
  <view class="item">
    <image src="/image/草莓.png"></image>
    <text>草莓</text>
  </view>
  <view class="item">
    <image src="/image/苹果.png"></image>
    <text>苹果</text>
  </view>
  <view class="item">
    <image src="/image/葡萄.png"></image>
    <text>葡萄</text>
  </view>
  <view class="item">
    <image src="/image/西瓜.png"></image>
    <text>西瓜</text>
  </view>
</view>

index.wxss

 

/**index.wxss**/
image{
  width: 70px;
  height: 70px;
}

.menu_1{
  display: flex;
  /* 规定主轴方向为水平，在水平方向排列 */
  flex-direction: row;
  /* 元素在主轴方向上如何展示：flex-start、center、flex-end、space-around、space-between */
  justify-content: space-around;
}

.menu_2{
  display: flex;
  /* 规定主轴方向为水平，在水平方向排列 */
  flex-direction: row;
  /* 元素在主轴方向上如何展示：flex-start、center、flex-end、space-around、space-between */
  justify-content: space-around;
}
.menu_2 .item{
  display: flex;
   /* 规定主轴方向为垂直，在垂直方向排列 */
  flex-direction: column;
  /* 元素在副轴方向上如何展示，此时文本和图片水平(副轴)居中 */
  align-items: center;
}