1.WXSS样式导入

1.1 在 .wxml中添加对应的类名

<view class="first"> 1 </view>
<view class="second"> 2 </view>
<view> 3 </view>

1.2 在 .wxss中使用 @import 导入

list.wxss

@import "list copy.wxss";
.first{
  color: red;
}

list copy.wxss

.second{
  color: green;
}

1.3 效果演示

2. 全局样式

2.1 写在 app.wxss 中的样式为全局样式

app.wxss

• 以iphone6为例：1rpx=0.5px

view{
  padding: 10rpx;  /* 5px */
  margin:10rpx;
  background-color: skyblue;
}

<view> 1 </view>
<view> 2 </view>
<view> 3 </view>

2.2 效果演示

3. 局部样式

3.1 写在 页面.wxss 中的样式为局部样式

• 当局部样式和全局样式冲突时，根据就近原则，局部会覆盖全局
• 当全局样式的权重大于或等于局部样式的时候，才会覆盖局部

list.wxml

<view> 1 </view>
<view> 2 </view>
<view> 3 </view>

app.wxss

/*权重（0,0,1）*/
view{
 padding: 10rpx;
 margin:10rpx;
 background-color: skyblue;
}
/*权重（0,1,1）*/
view:nth-child(1){
 background-color: lightpink;
}

list.wxss

 /*权重（0,0,1）*/
view{
 background-color: green;
}

3.2 效果演示

4.全局配置

4.1 window 节点常见的配置项

4.1.1 效果演示

    "window":{
    "backgroundTextStyle":"light",
    //导航条背景颜色
    "navigationBarBackgroundColor": "#ccc",
    //导航条标题文本
    "navigationBarTitleText": "liyl's weixin",
    //导航条文本颜色 可选值：black/white
    "navigationBarTextStyle":"white"
  },

4.2 下拉刷新

    //下拉刷新
    "enablePullDownRefresh": true,
    //下拉刷新时候窗口的背景颜色
    "backgroundColor": "#ffccbb",
    //下拉刷新时 小圆点的颜色 可选值：dark/light
    "backgroundTextStyle": "dark",
    //上拉触底的距离
    "onReachBottomDistance": 50

5. tabBar

5.1.1 什么是tabBar

5.1.2 tabBar的六个组成部分

5.1.3 tabBar的配置项

5.1.4 每个tab项的配置选项

5.1.5 代码演示

app.json

"pages": [
    //tabbar的页面必须放在最前面
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "pages/images/home.png",
        "selectedIconPath": "pages/images/home_fill.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "pages/images/message.png",
        "selectedIconPath": "pages/images/message-fill.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "pages/images/contacts.png",
        "selectedIconPath": "pages/images/contacts-fill.png"
      }
    ]
  },

5.1.6 效果展示

6.发送数据请求

6.1 小程序中数据网络请求的限制

6.2 配置request的合法域名

• 配置步骤：首页->开发->开发管理->开发设置->服务器域名

6.3 发送 GET 请求

6.3.1 在 home.wxml 设置一个按钮

<button type="primary" bindtap="sendGet"> 点击发起GET请求 </button>

6.3.2 在 home.js 中配置请求参数

Page({
  sendGet() {
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: "GET",
      data: {
        name: 'zs',
        age: 18
      },
      success: (res) => {
        console.log(res);
      }
    })
  }
})

6.3.3 效果展示

6.4 发送 POST 请求

6.4.1 在 home.wxml 设置一个按钮

<button type="primary" bindtap="sendPost"> 点击发起POST请求 </button>

6.4.2 在 home.js 中配置请求参数

Page({
  sendPost() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 30
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  }
})

6.4.3 效果展示

6.5 页面加载时 自动发送 GET/POST 请求

 onLoad(options) {
    this.sendGet();
    this.sendPost();
 },