微信小程序简单页面开发案例_小程序功能开发设计案例1

1.组件照片组合

<view>示例一</view>
<view class="menu">
    <view class="item">
    	<text>精品</text>
   		<image src="/.../.../xxx.jpg"></image>
    </view>
    <view class="item">
    	<text>精品</text>
   		<image src="/.../.../xxx.jpg"></image>
    </view>
    <view class="item">
    	<text>精品</text>
   		<image src="/.../.../xxx.jpg"></image>
    </view><view class="item">
    	<text>精品</text>
   		<image src="/.../.../xxx.jpg"></image>
    </view>
</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="/../xxx.jpg"></image>
         </view>
        <view class="small">
        	<image src="/../xxx.jpg"></image>
            <image src="/../xxx.jpg"></image>
            <image src="/../xxx.jpg"></image>
            <image src="/../xxx.jpg"></image>
            <image src="/../xxx.jpg"></image>
        </view>
     </view>
</view>
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

• flex布局

  /*示例一样式*/
  image{
      width:100rpx;
      height:100rpx
      border-radius:50rpx;
  }
  .menu{
      display:flex;
      /*在水平方向排列   row规定主轴的方向为水平*/
      flex-direction:row;
      /*在水平方向排列  在主轴方向如何让排列center space-around space-between flex-start*/
      justify-content:center;//居中
      
      /*在副轴方向如何让排列* flex-begin flex-end*/
      align-items:center;
  }
  .menu .item{
       display:flex;
       flex-direction:column;
      
  }
  
  /*示例二样式*/
  .ation .item .title{
      font-size:50rpx;
      font-weight:600;
  }
  .ation .item .tips{
      display:flex;
      flex-direction:row;
      justify-content:space-between;//居中
      font-size:30rpx;
      color:pink;
  }
  .ation .item .big{
      height:400rpx;
      overflow:hidden;
  }
  .ation .item .big image{
      width:100%;
      heigit:100%;
  }
  .ation .item .small{
      display:flex;
      justify-content:flax-start;//居中
  }
  .ation .item .small image{
      height:100rpx;
      width:100rpx;
      padding-right:20rpx;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51

• 一种常用方便的布局方式

2.小程序里边特殊的样式

• px
• rpx 自适应排列 宽度：750rpx

3.实战页面

• 首页
• 拍卖页面
• 消息页面
• 个人页面
  • 不需要写二级页面只需要写一级页面

4.tabBar导航

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

5.全局配置

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}
1
2
3
4
5
6
7
8
9

• 全局配置 网址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
• tabBer网址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar