WXSS模板语法

WXSS（Weixin Style Sheet)是一套样式语言，用于美化WXML组件样式，类似CSS

WXSS具有CSS的大部分特性，扩展特性包括

  • rpx尺寸单位
  • @import样式引入

rpx

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

rpx实现原理

监狱不同设备屏幕大小不同，为实现屏幕自动适配，rpx把所有设备的屏幕在宽度上等分为750份(即当前屏幕总宽度为750rpx)

  • 在较小的设备上，rpx代表的宽度越小
  • 在较大的设备上，rpx代表的宽度越大
  • 小程序在不同设备上运行时，会自动把rpx的样式单位换算成对应的像素单位来渲染

rpx与px单位换算

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

750rpx=375px=750物理像素

1rpx=0.5px=1物理像素

所以建议在开发微信小程序时，设计师可以用iphone6作为视觉标准。

样式导入

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

@import语法格式

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

1
2
3
4
// common.wxss
.box {
	padding: 5px;
}
1
@import "common.wxss"

全局样式和局部样式

  1. 定义在app.wxss中的样式为全局样式，作用每一个页面
  2. 在页面的.wxss文件定义的样式为局部样式，作用当前页面
  3. 局部与全局冲突时，就近原则，局部会覆盖全局
  4. 局部权重大于或等于全局时，才不会覆盖

全局配置

全局配置文件及常用的配置项

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

  1. Pages：记录当前小程序所有页面的存放路径
  2. window：全局设置小程序窗口外观
  3. tabBar：设置小程序底部的tabBar效果
  4. style：是否启用新版组件样式

小程序窗口组成部分

window

window节点常用的配置项

属性名 类型 默认值 说明
navigationBarTitleText String 字符串 导航栏标题文字内容
navigationBarBackgroundColor HexColor #000000 导航栏标题背景色
navigationBarTextStyle String white 导航栏标题背景色仅支持black/white
backgroundColor HexColor #ffffff 窗口背景颜色
backgroundTextStyle String dark 下拉loading样式，仅支持dark/light
enablePullDownRefresh Boolean false 是否开启全局下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时局页面底部的距离，单位px

tabBar

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

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

tabBar6个组成部分

  1. backgroundColor: tabBar的背景色
  2. selectediconPath: 选中时的图片路径
  3. borderStyle: tabBar上边框的颜色
  4. iconPath: 未选中时的图片路径
  5. selectedColor: tab上文字选中时的颜色
  6. color: tab上文字默认（未选中）颜色

tabBar节点配置项

属性 类型 必填 默认值 描述
position String 否 bottom tabBar位置仅支持bottom/top
borderStyle String 否 black tabBar上边框颜色，仅支持black/white
color HexColor 否 tab上文字默认（未选中）时颜色
selectedColor HexColor 否 tab文字选中时颜色
backgroundColor hexColor 否 tabBar背景色
list Array 是 tab页签列表最少2最多5

每个tab项配置选项

属性 类型 必填 描述
PagePath String 是 页面路径，页面必须在Pages中预先定义
text String 是 tab显示的文字
iconPath String 否 未选中时页面图标，当position为top时不显示icon
selectediconPath String 否 选中时页面图标，当position为top时不显示icon

页面配置

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

页面配置与全局配置关系：就近原则

页面配置常用配置项

参考全局配置

网络数据请求

出于安全问题，小程序官方对数据接口请求做出如下两个限制

  1. 只能请求HTTPS类型的接口
  2. 必须将接口域名添加到信任列表

在开发调试阶段，可以跳过request合法域名

发起GET请求

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

发起POST请求

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

在页面加载时请求数据

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

关于跨域和Ajax说明

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

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