WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
小屏幕时:
大屏幕时:
屏幕大时字体、高与宽都同时变大,rpx是响应式的相对刻度单位。
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
示例代码:
pages/hello/index.wxml
pages/hello/index.wxss
运行结果:
框架组件上支持使用 style、class 属性来控制组件的样式。
.
,样式类名之间用空格分隔。目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
app.wxss中的样式可以作用于每一个页面中
app.wxss中的内容如下:
hello/index.wxml
counter/index.wxml
运行结果:
(1)、微信小程序view background-image 不能够直接显示本地
[渲染层网络层错误] pages/hello/index.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。请参考文档:https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96 2 | width: 750rpx; 3 | height: 750rpx; > 4 | background-image: url(../../images/haha.jpg); | ^ 5 | background-color: oldlace; 6 | }(env: Windows,mp,1.06.2303220; lib: 2.19.4)
(2)、但是可以直接显示网络图片
https://bkimg.cdn.bcebos.com/pic/0bd162d9f2d3572c11df08d4e75a742762d0f703652b?x-bce-process=image/resize,m_lfit,w_536,limit_1
假定需要下面这张图:
图片的url是:
https://img2023.cnblogs.com/blog/63651/202304/63651-20230427095037374-1403577959.png
(3)、将本地图片转化成base64方式引用图片
转化图片的网址https://www.bejson.com/ui/image2base64/
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML
,可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
WXS 代码可以编写在 wxml 文件中的 <wxs>
标签内,或以 .wxs
为后缀名的文件内。
每一个 .wxs
文件和 <wxs>
标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports
实现。
在微信开发者工具里面,右键可以直接创建 .wxs
文件,在其中直接编写 WXS 脚本。
示例代码:
上述例子在 /pages/comm.wxs
的文件里面编写了 WXS 代码。该 .wxs
文件可以被其他的 .wxs
文件 或 WXML 中的 <wxs>
标签引用。
每个 wxs
模块均有一个内置的 module
对象。
exports
: 通过该属性,可以对外共享本模块的私有变量与函数。定义方法一:
pages/common.wxs
请不要使用ES6的语法内容
pages/hello/index.wxml
结果:
示例代码:
页面输出:
在.wxs
模块中引用其他 wxs
文件模块,可以使用 require
函数。
引用的时候,要注意如下几点:
.wxs
文件模块,且必须使用相对路径。wxs
模块均为单例,wxs
模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs
模块对象。wxs
模块在定义之后,一直没有被引用,则该模块不会被解析与运行。示例代码:
控制台输出:
2.1.3、<wxs>
标签属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
module | String | 当前 <wxs> 标签的模块名。必填字段。 | |
src | String | 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。 |
module 属性是当前 <wxs>
标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。
module 属性值的命名必须符合下面两个规则:
示例代码:
页面输出:
上面例子声明了一个名字为 foo
的模块,将 some_msg
变量暴露出来,供当前页面使用。
src 属性可以用来引用其他的 wxs
文件模块。
引用的时候,要注意如下几点:
.wxs
文件模块,且必须使用相对路径。wxs
模块均为单例,wxs
模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs
模块对象。wxs
模块在定义之后,一直没有被引用,则该模块不会被解析与运行。示例代码:
页面输出:
上述例子在文件 /page/index/index.wxml
中通过 <wxs>
标签引用了 /page/comm.wxs
模块。
<wxs>
模块只能在定义模块的 WXML 文件中被访问到。使用 <include>
或 <import>
时,<wxs>
模块不会被引入到对应的 WXML 文件中。<template>
标签中,只能使用定义该 <template>
的 WXML 文件中定义的 <wxs>
模块。undefined
。上面代码,分别声明了 foo
、 bar
、 i
三个变量。然后,foo
赋值为数值 1
,bar
赋值为字符串 "hello world"
。
变量命名必须符合下面两个规则:
以下标识符不能作为变量名:
WXS 主要有 3 种注释的方法。
示例代码:
上述例子中,所有 WXS 代码均被注释掉了。
方法三 和 方法二 的唯一区别是,没有
*/
结束符。
示例代码:
+
)也可以用作字符串的拼接。示例代码:
示例代码:
示例代码:
示例代码:
示例代码:
示例代码:
示例代码:
在 WXS 中,可以使用以下格式的 if
语句 :
if (expression) statement
: 当 expression
为 truthy 时,执行 statement
。
if (expression) statement1 else statement2
: 当 expression
为 truthy 时,执行 statement1
。 否则,执行 statement2
if ... else if ... else statementN
通过该句型,可以在 statement1
~ statementN
之间选其中一个执行。
示例语法:
示例语法:
default
分支可以省略不写。case
关键词后面只能使用:变量
,数字
,字符串
。示例代码:
输出:
示例语法:
break
,continue
关键词。示例代码:
输出:
示例语法:
表达式
为 true 时,循环执行语句
或代码块
。break
,continue
关键词。WXS 语言目前共有以下几种数据类型:
number
: 数值string
:字符串boolean
:布尔值object
:对象function
:函数array
: 数组date
:日期regexp
:正则number 包括两种数值:整数,小数。
constructor
:返回字符串 "Number"
。toString
toLocaleString
valueOf
toFixed
toExponential
toPrecision
以上方法的具体使用请参考
ES5
标准。
string 有两种写法:
constructor
:返回字符串 "String"
。length
除constructor外属性的具体含义请参考
ES5
标准。
toString
valueOf
charAt
charCodeAt
concat
indexOf
lastIndexOf
localeCompare
match
replace
search
slice
split
substring
toLowerCase
toLocaleLowerCase
toUpperCase
toLocaleUpperCase
trim
以上方法的具体使用请参考
ES5
标准。
布尔值只有两个特定的值:true
和 false
。
constructor
:返回字符串 "Boolean"
。toString
valueOf
以上方法的具体使用请参考
ES5
标准。
object 是一种无序的键值对。使用方法如下所示:
constructor
:返回字符串 "Object"
。toString
:返回字符串 "[object Object]"
。function 支持以下的定义方式:
function 同时也支持以下的语法(匿名函数,闭包等):
function 里面可以使用 arguments
关键词。该关键词目前只支持以下的属性:
length
: 传递给函数的参数个数。[index]
: 通过 index
下标可以遍历传递给函数的每个参数。示例代码:
constructor
:返回字符串 "Function"
。length
:返回函数的形参个数。toString
:返回字符串 "[function Function]"
。示例代码:
array 支持以下的定义方式:
constructor
:返回字符串 "Array"
。length
除constructor外属性的具体含义请参考
ES5
标准。
toString
concat
join
pop
push
reverse
shift
slice
sort
splice
unshift
indexOf
lastIndexOf
every
some
forEach
map
filter
reduce
reduceRight
以上方法的具体使用请参考
ES5
标准。
生成 date 对象需要使用 getDate
函数, 返回一个当前时间的对象。
milliseconds
: 从1970年1月1日00:00:00 UTC开始计算的毫秒数datestring
: 日期字符串,其格式为:"month day, year hours:minutes:seconds"示例代码:
constructor
:返回字符串 “Date”。toString
toDateString
toTimeString
toLocaleString
toLocaleDateString
toLocaleTimeString
valueOf
getTime
getFullYear
getUTCFullYear
getMonth
getUTCMonth
getDate
getUTCDate
getDay
getUTCDay
getHours
getUTCHours
getMinutes
getUTCMinutes
getSeconds
getUTCSeconds
getMilliseconds
getUTCMilliseconds
getTimezoneOffset
setTime
setMilliseconds
setUTCMilliseconds
setSeconds
setUTCSeconds
setMinutes
setUTCMinutes
setHours
setUTCHours
setDate
setUTCDate
setMonth
setUTCMonth
setFullYear
setUTCFullYear
toUTCString
toISOString
toJSON
以上方法的具体使用请参考
ES5
标准。
生成 regexp 对象需要使用 getRegExp
函数。
pattern
: 正则表达式的内容。flags
:修饰符。该字段只能包含以下字符: g
: globali
: ignoreCasem
: multiline。示例代码:
constructor
:返回字符串 "RegExp"
。source
global
ignoreCase
multiline
lastIndex
除constructor外属性的具体含义请参考
ES5
标准。
exec
test
toString
以上方法的具体使用请参考
ES5
标准。
constructor
属性数据类型的判断可以使用 constructor
属性。
示例代码:
typeof
使用 typeof
也可以区分部分数据类型。
示例代码:
console.log
方法用于在 console 窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。
E
LN10
LN2
LOG2E
LOG10E
PI
SQRT1_2
SQRT2
以上属性的具体使用请参考
ES5
标准。
abs
acos
asin
atan
atan2
ceil
cos
exp
floor
log
max
min
pow
random
round
sin
sqrt
tan
以上方法的具体使用请参考
ES5
标准。
stringify(object)
: 将 object
对象转换为 JSON
字符串,并返回该字符串。parse(string)
: 将 JSON
字符串转化成对象,并返回该对象。示例代码:
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
以上属性的具体使用请参考
ES5
标准。
parse
UTC
now
以上属性的具体使用请参考
ES5
标准。
NaN
Infinity
undefined
以上属性的具体使用请参考
ES5
标准。
parseInt
parseFloat
isNaN
isFinite
decodeURI
decodeURIComponent
encodeURI
encodeURIComponent
以上方法的具体使用请参考
ES5
标准。
1、WXS 中不支持 let和const;不支持箭头函数、一切ES6及以后新增加的内容都不支持。
2、WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。
3、由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
4、WXS只支持到JS5版本,不支持ES6
5、WXS使用了JS的严格模式strict mode
6、WXS 里,遍历数组只能通过for实现,而JS中的for in和for of不被支持,对于需要循环处理数据的场景,也可以通过数组的forEach方法实现遍历:
7、WXS只提供给开发者5个基础类库,分别是 console,Math,JSON,Number,Date,以及一些常用的全局变量和全局函数,数量不多,但已经能满足基本的数据操作要求,而对于复杂的数据操作,比如类定义和继承等,还是需要依靠逻辑层的 JS 脚本完成。
8、由于WXS先天不支持使用 Array 对象,因此我们平常用于判断数组类型变量的语句[] instanceof Array也就不能使用了,而typeof []的输出结果是"object",并不能满足实际的开发要求。所幸我们还可以使用变量的 「constructor」属性进行类型判断:
9、小程序的架构分成了逻辑层和视图层,WXS 与JavaScript还有一个差异在于,它与WXML一同们于视图层,运行于同一个线程内,因此减少了跨线程通信的开销。这也是我们之所以优先采用WXS处理数据的原因之一。
10、小程序在Android上,使用V8引擎解析和渲染 JavaScript; 而在iOS上,则是使用 JavaScriptCore,这两者在解析性能的表现上差异比较大,相对来说 V8 的性能比 JSC 要好得多,那么在 IOS 的小程序中,使用脱离 JavaScript 环境的 WXS,就会使性能有更多的提升,这也是WXS文档中提及 “在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍” 的具体原因
11、不要使用DOM与BOM,使用ES5
小程序的生命周期说白了就是指程序从创建、到开始、暂停、唤起、停止、卸载的过程。
微信小程序生命周期包含了三个部分:
通过了解小程序的启动流程,可以了解小程序的代码执行顺序。每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等,而且整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp() 方法获取到全局唯一的 App 实例,获取 App 上的数据或调用开发者注册在 App 上的函数。官方文档
小程序的启动流程简述:小程序在启动的时候会先下载小程序包,再启动小程序,然后加载 app.json 全局配置文件,然后在 app.js 中调用 App() 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
app.js 文件下小程序的 App 相关生命周期代码如下:
注册完 App 实例后,会加载自定义组件并注册,之后会加载某一个页面(一般是app.json配置中的pages数组的第一个路径的页面,如果配置了编译环境的话,就会在该配置环境下先加载指定页面),首先会加载某个页面的 json 文件,读取该文件下的相关页面配置,然后是渲染 wxml 文件,将代码转化成 JS 对象,进而转化成 真实DOM树,然后把 DOM 树渲染出来。而且也会加载某个页面的 js 文件(双线程模型),会调用 Page() 函数,并绑定 Page 生命周期函数。
每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例,在注册时,可以绑定对应的生命周期函数,在小程序的生命周期函数中,执行对应的代码,具体的参数及介绍可以参考一下 官方文档。
必须在 app.js 中调用,必须调用且只能调用一次。里面包含了几个app的生命周期钩子:
onLaunch
: 小程序初始化完成时触发,全局只触发一次 onShow
:小程序启动或切前台显示时触发。 onHide
:小程序从前台进入后台时触发(如 切换到其他的App)。 onError
:小程序发生脚本错误或 API 调用报错时触发。 onPageNotFound
:小程序要打开的页面不存在时触发。 onUnhandledRejection
:小程序有未处理的 Promise 拒绝时触发。 onThemeChange
:系统切换主题时触发。 示例:
对于小程序中的每个页面,都需要在页面对应的 js
文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。
onlaunch
:当小程序初始化完成时,会触发 onLaunch(全局只触发一次)(app.js);
onLoad
: 页面加载小程序注册完成后,加载页面,触发onLoad方法。一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数(页面js)。
onShow
: 页面显示页面载入后触发onShow方法,显示页面。每次打开页面都会调用一次(比如当小程序有后台进入到前台运行或重新进入页面时)。
onReady
: 首次显示页面,页面初次渲染完成,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide
: 页面隐藏当navigateTo、底部tab切换、上传文件选择图片时调用。
onUnload
: 页面卸载当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用
简单的页面可以使用 Page()
进行构造。
代码示例:
详细的参数含义和使用请参考 Page 参考文档 。
基础库 2.9.2 开始支持,低版本需做兼容处理。
页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。
具体用法参见 behaviors 。
页面加载时触发,一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数,一般建议在这个函数中做一些数据初始化的工作。
页面显示/切入前台时触发,比如:新推入了一个新的页面,那么原来的页面就处于后台,这时如果把新页面又移除掉,那么下面的页面就会调用onShow方法
页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互,对界面内容进行设置的API,可以在这个页面中进行执行
页面隐藏/切入后台时触发,如:navigateTo或底部tab切换至其他页面,小程序切入后台等
页面卸载时触发,如:redirectTo或navigateBack到其他页面
1. 打开小程序:
(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onReady
2. 进入下一个页面:
(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
3. 返回上一个页面:
(curr)onUnload --> (pre)onShow
4. 离开小程序:
(App)onHide
5. 再次进入:
小程序未销毁 --> (App)onShow(执行上面的顺序),小程序被销毁,(App)onLaunch重新开始执行.