微信小程序开发Day001

1. 问题(为什么学微信小程序)

• 什么是微信小程序?

  + 移动互联网时代,手机;
  + 手机软件,手机中安装很多软件
  + 腾讯和阿里巴巴的竞争(竞争用户)
  	-微信 + 小程序
  	-支付宝 + 小程序
  

• 为什么做小程序?

  微信的用户基数大
  在微信我们的用户多
  

• 如何开发小程序?

  • 小程序:学习微信开发的语言(前端html css js vue)
    • 微信开发者工具
  • API:restful接口(Python+djanjo+drf框架)
    • pycharm

2. 环境的搭建

2.1 python环境

• 虚拟环境
  • django
  • drf
• pycharm

2.2 小程序环境

2.2.1 申请微信公众平台账号

https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

2.2.2 保存自己的appid

appid = [你的appid]

2.2.3 下载开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.2.4创建项目

2.2.4.1 自动生成

2.2.4.2自己创建

注:在全局配置page中添加页面,小程序工具软件会自动生成文件夹和文件

3.开发小程序

3.1全局配置(app.json):

{
  //页面配置
  "pages": [
    "pages/index/index",
    "pages/home/home",
    "pages/other/other"
  ],
  //窗口配置
  "window": {
    //顶部窗口颜色
    "navigationBarBackgroundColor": "#FFDEAD",
    //文字颜色
    "navigationBarTextStyle": "white",
    //文字内容
    "navigationBarTitleText": "我的小程序"
  },
  //底部空间(选项卡)
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        //选中的图标
        "selectedIconPath":"static/tabBar/phone.png",
        //默认图标
        "iconPath":"static/tabBar/cumputer.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "selectedIconPath":"static/tabBar/phone.png",
        "iconPath":"static/tabBar/cumputer.png"
      },
      {
        "pagePath": "pages/other/other",
        "text": "我的",
        "selectedIconPath":"static/tabBar/phone.png",
        "iconPath":"static/tabBar/cumputer.png"
      }
    ]
  }
}

3.2组件

3.2.1 text组件

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

3.2.2 view组件

盒子模型,类似于div标签(容器);

3.2.3 image组件

图片

3.3样式

3.3.1像素

• px

• rpx像素,会针对设备不同对设备的像素进行调整

  整个屏幕的宽度为750rpx

4.flex布局

一种非常方便的布局方式

在容器中记住四个样式:

display: flex;								flex布局
flex-direction: column;				规定主轴的方向	row/column

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

align-items: center;					
元素在副轴上的排列方式			flex-start/flex-end/space-around/space-between

5. 实战:

看完上面这些,就可以开发几乎全部的页面了,可以随意找项目练习;

5.1 index.wxml (类似于html文档)

<!--pages/index/index.wxml-->
<view>示例01</view>
<view class="menu-1">
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
</view>
<view>示例02</view>
<view class="menu-2">
  <view class="item">
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <text>精品01</text>
  </view>
  <view class="item">
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <text>精品01</text>
  </view>
  <view class="item">
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <text>精品01</text>
  </view>
  <view class="item">
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <text>精品01</text>
  </view>
</view>
<view>示例03</view>
<view class="action">
  <view class="item">
    <view class="title">
      第一场拍卖吃的东西
    </view>
    <view class="tips">
      <view class="status">2020-01-01</view>
      <view class="count">111次围观</view>
     
    </view>
    <view class="big">
      <image src="../../static/code-wallpaper-22.jpg"></image>
    </view>
    <view class="small">
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
    </view>
  </view>
</view>
<view class="action">
  <view class="item">
    <view class="title">
      第一场拍卖吃的东西
    </view>
    <view class="tips">
      <view class="status">2020-01-01</view>
      <view class="count">111次围观</view>
     
    </view>
    <view class="big">
      <image src="../../static/code-wallpaper-22.jpg"></image>
    </view>
    <view class="small">
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
    <image src="../../static/code-wallpaper-22.jpg"></image>
    </view>
  </view>
</view>

5.2 index.wxss (类似于css文档)

/* pages/index/index.wxss */
.menu-1 image,
.menu-2 image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.menu{
  /* flex布局 */
  display: flex;
  /* 让当前元素水平排列 */
  /* 专业叫法:规定主轴的方向为水平 */
  flex-direction:row;
  /* 让你的孩子在水平方向排列方式(space-between[居中] space-around[靠边居中] flex-start[默认] center[居中]) */
  justify-content: space-around;
  /* 在附轴方向如何排列 */
  align-items: flex-end;
  height: 500rpx;
}
.menu .item{
  display: flex;
  /* 让当前元素垂直排列 */
  /* 专业叫法:规定主轴的方向为垂直 */
  flex-direction: column;
  align-items: center;
}
.menu-1{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.menu-2{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.menu-2 .item{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.action .item{

}
.action .title{
  font-size: 50rpx;
  font-weight: 600rpx;
}
.action .tips{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 32rpx;
  color: #8c8c8c;
}
.action .item .big{
  height: 400rpx;
  overflow: hidden;
}
.action .item .big image{
  height: 100%;
  width: 100%;
}
.action .item .small{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.action .item .small image{
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}