微信小程序 WXSS模板样式，全局和页面配置，网络请求

阅读原文时间：2023年07月08日阅读：1

【黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)】 https://www.bilibili.com/video/BV1834y1676P/?p=26&share_source=copy_web&vd_source=03c1dc52eeb3747825ecad0412c18ab1

WXSS 模板样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。

WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。

与 CSS 相比，WXSS 扩展的特性有：

rpx 尺寸单位
@import 样式导入

1. 什么是 rpx 尺寸单位

rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。

2. rpx 的实现原理

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，

在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。

在较小的设备上，1rpx 所代表的宽度较小
在较大的设备上，1rpx 所代表的宽度较大

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

3. rpx 与 px 之间的单位换算（以iphone6为例）

在 iPhone6 上，屏幕宽度为375px，共有 750 个物理像素，等分为 750rpx。则：

750rpx = 375px = 750 物理像素

1rpx = 0.5px = 1物理像素

就是宽度px = 750rpx，然后换算。

官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。

开发举例：在 iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx

1. 什么是样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

2. @import 的语法格式

@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

注意这个路径是从根目录开始的

/*wxss*/
@import "/路径";

定义在 app.wxss 中的样式为全局样式，作用于每一个页面

在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。

注意：

① 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

② 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

① pages

记录当前小程序所有页面的存放路径

② window
全局设置小程序窗口的外观

③ tabBar
设置小程序底部的 tabBar 效果

④ style
是否启用新版的组件样式

小程序窗口的组成部分

navigationBar 导航栏区域

background 背景区域默认不可见，下拉才显示

body 页面的主题区域用来显示wxml的布局

了解 window 节点常用的配置项

navigationBarTitleText 导航栏标题文字内容
navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle 导航栏标题颜色，仅支持 black / white

backgroundColor #ffffff 窗口的背景色
backgroundTextStyle 下拉loading的样式，仅支持 dark / light

enablePullDownRefresh false 是否全局开启下拉刷新
onReachBottomDistance 50 页面上拉触底事件触发时距页面底部距离，单位为px

//app.json
"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },

设置导航栏的标题

设置步骤：app.json -> window -> navigationBarTitleText

设置导航栏的背景色

app.json -> window -> navigationBarBackgroundColor

设置导航栏的标题颜色

设置步骤：app.json -> window -> navigationBarTextStyle

全局开启下拉刷新功能

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为:app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。

设置下拉刷新时 loading 的样式

当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。

设置上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。设置步骤： app.json -> window -> 为 onReachBottomDistance 设置新的数值

注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可

举个例子，网上购物，有那种滚动条，滚动条快到底的时候就会自动加载，这个距离就是上拉触底的距离

//app.json
"window":{
    "enablePullDownRefresh": true,
    "backgroundTextStyle":"dark",
    "backgroundColor": "#efefef",

    "navigationBarBackgroundColor": "#bce672",
    "navigationBarTitleText": "时光",
    "navigationBarTextStyle":"white",

    "onReachBottomDistance":50
  },

1. 什么是 tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

底部 tabBar
顶部 tabBar

注意：

tabBar中只能配置最少 2 个、最多 5 个 tab 页签
当渲染顶部 tabBar 时，不显示 icon，只显示文本

2. tabBar 的 6 个组成部分

① backgroundColor：tabBar 的背景色

② selectedIconPath：选中时的图片路径

③ borderStyle：tabBar 上边框的颜色

④ iconPath：未选中时的图片路径

⑤ selectedColor：tab 上的文字选中时的颜色

⑥ color：tab 上文字的默认（未选中）颜色

3. tabBar 节点的配置项

必填：

list 是tab页签的列表

Array类型里面最少2个、最多5个 tab

非必填

position tabBar 的位置

仅支持 bottom/top 默认bottom
borderStyle tabBar上边框的颜色

仅支持 black/white
color

tab上文字的默认（未选中）颜色
selectedColor

tab 上的文字选中时的颜色
backgroundColor

tabBar 的背景色

4. 每个 tab 项的配置选项

必填：

pagePath

页面路径，页面必须在 pages 中预先定义
text

是 tab 上显示的文字

非必填：

iconPath 未选中时的图标路径；

当 postion 为 top 时，不显示 icon
selectedIconPath 选中时的图标路径；

当 postion 为 top 时，不显示 icon

//注意路径不能以斜杠开头
//app.json
"tabBar": {
"list":[
{"pagePath":"pages/index/index",
"text": "首页"},
{"pagePath": "pages/list/list",
"text": "list"
}
]
},

- 案例：配置 tabBar

获得图片资源

https://pan.baidu.com/s/1crZTQdIZ7OSDkZIpIWkhYw&pwd=1234

这个是黑马的课程资源。图片在 day2-->资料.rar-->images

通过 app.json 文件的 pages 节点，快速新建 tab 页面

配置 tabBar 选项

① 打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点

② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象

③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

pagePath 指定当前 tab 对应的页面路径【必填】
text 指定当前 tab 上按钮的文字【必填】
iconPath 指定当前 tab 未选中时候的图片路径【可选】
selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

//app.json

"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact",
"pages/list/list",
"pages/index/index",
"pages/logs/logs"
],

"tabBar": {
"list":[
{"pagePath":"pages/home/home",
"text": "首页",
"iconPath": "images/tabs/home.png",
"selectedIconPath": "images/tabs/home-active.png"
},
{"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/tabs/message.png",
"selectedIconPath": "images/tabs/message-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "images/tabs/contact.png",
"selectedIconPath": "images/tabs/contact-active.png"
}
]
},

注意，tab的这几个页面必须放到头部渲染，不然不显示TabBar

页面配置

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3. 页面配置中常用的配置项

和全局配置的一样

网络数据请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下

两个限制：

① 只能请求 HTTPS 类型的接口

② 必须将接口的域名添加到信任列表中

需要先在你的域名服务器的根目录下放置小程序的认证文件，然后才能配置

微信开发者工具-> 详情 ->项目配置 ->request 合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口

配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意事项：

① 域名只支持 https 协议

② 域名不能使用 IP 地址或 localhost

③ 域名必须经过 ICP 备案

④ 服务器域名一个月内最多可申请 5 次修改

3. 发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求

4. 发起 POST 请求

调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求

//wxml
<button bindtap="getInfo">发起get请求</button>
<button bindtap="postInfo">发起post请求</button>

//js
  getInfo(){
  wx.request({
    url: 'https://applet-base-api-t.itheima.net/api/get',
    method:"GET",
    data:{
      name:"时光",
      age:21
    },
    success:(res)=> {
      console.log(res.data)
   }
  })
  },
  postInfo(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/post',
      method:"POST",
      data:{
        name:"时光",
        age:21
      },
      success:(res)=> {
        console.log(res)
     }
    })
  },

5. 在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数

/**js
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     this.函数名
  },

6. 跳过 request 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https协议的接口。

此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时

开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，

跳过 request 合法域名的校验。

注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！部署和上线就不能用了

微信开发者工具 - 详情 - 本地设置 - 不校验合法域名、web-view,TLS版本以及Https证书

7. 关于跨域和 Ajax 的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。

案例-生活本地的首页布局

要是不使用接口的话可以直接在js的对象数组里放数据，然后调用

//wxml
<swiper indicator-dots="true" autoplay="true" circular="true"
class="HomeSwiper">
  <swiper-item wx:for="{{swiperList}}" wx:for-key="id">
    <image src="{{item.image}}" mode="scaleToFill"/>
  </swiper-item>
</swiper>
<view class="Homecategories">
  <view class="HomeCitem" wx:for="{{categoriesList}}" wx:for-key="id">
    <image src="{{item.icon}}" mode=""/>
    <text>{{item.name}}</text>
  </view>
</view>

<view class="HomeImgBox">
  <image src="/images/link-01.png" mode="widthFix"/>
  <image src="/images/link-02.png" mode="widthFix"/>
</view>

//wxss
.HomeSwiper{
  height: 350rpx;
}
.HomeSwiper image{
  width: 100%;
}
.Homecategories{
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid #efefef;
  border-top: 1px solid #efefef;
}
.HomeCitem{
  width: 33.3%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
}
.HomeCitem image{
  width: 60rpx;
  height: 60rpx;
}
.HomeCitem text{
  font-size: 24rpx;
  margin-top: 10rpx;
}
.HomeImgBox{
 padding: 20rpx 10rpx;
  display: flex;
  justify-content: space-around;
}
.HomeImgBox image{
width: 45%;
}

//js
data: {
     swiperList:[],
     categoriesList:[],
  },
  // 获取轮播图
  getSwiperList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method:"GET",
      success:(res)=>{
        this.setData({
        swiperList: res.data
        })
      }
    })
  },
  // 获取九宫格
  getCategories(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method:"GET",
      success:(res)=>{
        this.setData({
          categoriesList: res.data
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList()
    this.getCategories()
  },

手机扫一扫

移动阅读更方便

你可能感兴趣的文章

微信小程序 - WXML 模板语法

痞子衡嵌入式：MCUXpresso IDE下生成镜像文件的方法及其与IAR,MDK差异

JavaScript 实现 (ECMAScript 6)

[转载]Python 资源大全中文版

2506-nginx的配置-域名分发与负载均衡（只有配置无原理）

spring social理解