前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >1.1、尺寸单位

1.1、尺寸单位

作者头像
张果
发布2023-05-02 16:03:06
2.8K0
发布2023-05-02 16:03:06
举报
文章被收录于专栏:软件开发软件开发

一、WXSS (WeiXin Style Sheets)

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比,WXSS 扩展的特性有:

  • 尺寸单位
  • 样式导入

1.1、尺寸单位

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备

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是响应式的相对刻度单位。

1.2、样式导入

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

示例代码:

pages/hello/index.wxml

pages/hello/index.wxss

运行结果:

1.3、内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

1.4、选择器

目前支持的选择器有:

选择器

样例

样例描述

.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 组件前边插入内容

1.5、全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

app.wxss中的样式可以作用于每一个页面中

app.wxss中的内容如下:

hello/index.wxml

counter/index.wxml

运行结果:

1.6、background-image问题

(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)

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

2.1、WXS 模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。

2.1.1、模块

每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。

一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。

2.1.2、.wxs 文件

微信开发者工具里面,右键可以直接创建 .wxs 文件,在其中直接编写 WXS 脚本。

示例代码:

上述例子在 /pages/comm.wxs 的文件里面编写了 WXS 代码。该 .wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。

module 对象

每个 wxs 模块均有一个内置的 module 对象。

属性
  • exports: 通过该属性,可以对外共享本模块的私有变量与函数。

定义方法一:

pages/common.wxs

请不要使用ES6的语法内容

pages/hello/index.wxml

结果:

示例代码:

在开发者工具中预览效果

页面输出:

require函数

.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。

引用的时候,要注意如下几点:

  • 只能引用 .wxs 文件模块,且必须使用相对路径。
  • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
  • 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

示例代码:

在开发者工具中预览效果

控制台输出:

2.1.3、<wxs> 标签

属性名

类型

默认值

说明

module

String

当前 <wxs> 标签的模块名。必填字段。

src

String

引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。

module 属性

module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。

module 属性值的命名必须符合下面两个规则:

  • 首字符必须是:字母(a-zA-Z),下划线(_)
  • 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)

示例代码:

在开发者工具中预览效果

页面输出:

上面例子声明了一个名字为 foo 的模块,将 some_msg 变量暴露出来,供当前页面使用。

src 属性

src 属性可以用来引用其他的 wxs 文件模块。

引用的时候,要注意如下几点:

  • 只能引用 .wxs 文件模块,且必须使用相对路径。
  • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
  • 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

示例代码:

在开发者工具中预览效果

页面输出:

上述例子在文件 /page/index/index.wxml 中通过 <wxs> 标签引用了 /page/comm.wxs 模块。

2.1.4、注意事项

  • <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时,<wxs> 模块不会被引入到对应的 WXML 文件中。
  • <template> 标签中,只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

2.2、变量

2.2.1、概念

  • WXS 中的变量均为值的引用。
  • 没有声明的变量直接赋值使用,会被定义为全局变量。
  • 如果只声明变量而不赋值,则默认值为 undefined
  • var表现与javascript一致,会有变量提升。

上面代码,分别声明了 foo、 bar、 i 三个变量。然后,foo 赋值为数值 1 ,bar 赋值为字符串 "hello world"

2.2.2、变量名

变量命名必须符合下面两个规则:

  • 首字符必须是:字母(a-zA-Z),下划线(_)
  • 剩余字符可以是:字母(a-zA-Z),下划线(_), 数字(0-9)

2.2.3、保留标识符

以下标识符不能作为变量名:

2.3、注释

WXS 主要有 3 种注释的方法。

示例代码:

上述例子中,所有 WXS 代码均被注释掉了。

方法三 和 方法二 的唯一区别是,没有 */ 结束符。

2.4、运算符

2.4.1、基本运算符

示例代码:

  • 加法运算(+)也可以用作字符串的拼接。

2.4.2、一元运算符

示例代码:

2.4.3、位运算符

示例代码:

2.4.5、比较运算符

示例代码:

2.4.6、等值运算符

示例代码:

2.4.7、赋值运算符

示例代码:

2.4.8、二元逻辑运算符

示例代码:

2.4.9、其他运算符

示例代码:

2.5、语句

2.5.1、if 语句

在 WXS 中,可以使用以下格式的 if 语句 :

  • if (expression) statement : 当 expression 为 truthy 时,执行 statement
  • if (expression) statement1 else statement2 : 当 expression 为 truthy 时,执行 statement1。 否则,执行 statement2
  • if ... else if ... else statementN 通过该句型,可以在 statement1 ~ statementN 之间选其中一个执行。

示例语法:

2.5.2、switch 语句

示例语法:

  • default 分支可以省略不写。
  • case 关键词后面只能使用:变量数字字符串

示例代码:

输出:

2.5.3、for 语句

示例语法:

  • 支持使用 breakcontinue 关键词。

示例代码:

输出:

2.5.4、while 语句

示例语法:

  • 表达式为 true 时,循环执行语句代码块
  • 支持使用 breakcontinue 关键词。

2.6、数据类型

WXS 语言目前共有以下几种数据类型:

  • number : 数值
  • string :字符串
  • boolean:布尔值
  • object:对象
  • function:函数
  • array : 数组
  • date:日期
  • regexp:正则

2.6.1、number

语法

number 包括两种数值:整数,小数。

属性
  • constructor:返回字符串 "Number"
方法
  • toString
  • toLocaleString
  • valueOf
  • toFixed
  • toExponential
  • toPrecision

以上方法的具体使用请参考 ES5 标准。

2.6.2、string

语法

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 标准。

2.6.3、boolean

语法

布尔值只有两个特定的值:true 和 false

属性
  • constructor:返回字符串 "Boolean"
方法
  • toString
  • valueOf

以上方法的具体使用请参考 ES5 标准。

2.6.4、object

语法

object 是一种无序的键值对。使用方法如下所示:

属性
  • constructor:返回字符串 "Object"
方法
  • toString:返回字符串 "[object Object]"

2.6.5、function

语法

function 支持以下的定义方式:

function 同时也支持以下的语法(匿名函数,闭包等):

arguments

function 里面可以使用 arguments 关键词。该关键词目前只支持以下的属性:

  • length: 传递给函数的参数个数。
  • [index]: 通过 index 下标可以遍历传递给函数的每个参数。

示例代码:

属性
  • constructor:返回字符串 "Function"
  • length:返回函数的形参个数。
方法
  • toString:返回字符串 "[function Function]"

示例代码:

2.6.6、array

语法

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 标准。

2.6.7、date

语法

生成 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 标准。

2.6.8、regexp

语法

生成 regexp 对象需要使用 getRegExp函数。

  • 参数:
    • pattern: 正则表达式的内容。
    • flags:修饰符。该字段只能包含以下字符:
      • g: global
      • i: ignoreCase
      • m: multiline。

示例代码:

属性
  • constructor:返回字符串 "RegExp"
  • source
  • global
  • ignoreCase
  • multiline
  • lastIndex

除constructor外属性的具体含义请参考 ES5 标准。

方法
  • exec
  • test
  • toString

以上方法的具体使用请参考 ES5 标准。

2.6.9、数据类型判断

constructor 属性

数据类型的判断可以使用 constructor 属性。

示例代码:

typeof

使用 typeof 也可以区分部分数据类型。

示例代码:

2.7、基础类库

2.7.1、console

console.log 方法用于在 console 窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。

2.7.2、Math

属性

  • 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 标准。

2.7.3、JSON

方法

  • stringify(object): 将 object 对象转换为 JSON 字符串,并返回该字符串。
  • parse(string): 将 JSON 字符串转化成对象,并返回该对象。

示例代码:

2.7.4、Number

属性

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITY
  • POSITIVE_INFINITY

以上属性的具体使用请参考 ES5 标准。

2.7.5、Date

属性

  • parse
  • UTC
  • now

以上属性的具体使用请参考 ES5 标准。

2.7.6、Global

属性

  • NaN
  • Infinity
  • undefined

以上属性的具体使用请参考 ES5 标准。

方法

  • parseInt
  • parseFloat
  • isNaN
  • isFinite
  • decodeURI
  • decodeURIComponent
  • encodeURI
  • encodeURIComponent

以上方法的具体使用请参考 ES5 标准。

2.8、WXS与JS的区别

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的生命周期)
  • 页面级别的生命周期(单个页面(page)的生命周期)
  • 组件基本的生命周期(组件(component)的生命周期)
在这里插入图片描述
在这里插入图片描述

3.1、小程序的启动流程

通过了解小程序的启动流程,可以了解小程序的代码执行顺序。每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等,而且整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp() 方法获取到全局唯一的 App 实例,获取 App 上的数据或调用开发者注册在 App 上的函数。官方文档

小程序的启动流程简述:小程序在启动的时候会先下载小程序包,再启动小程序,然后加载 app.json 全局配置文件,然后在 app.js 中调用 App() 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。

3.2、app生命周期

app.js 文件下小程序的 App 相关生命周期代码如下:

注册完 App 实例后,会加载自定义组件并注册,之后会加载某一个页面(一般是app.json配置中的pages数组的第一个路径的页面,如果配置了编译环境的话,就会在该配置环境下先加载指定页面),首先会加载某个页面的 json 文件,读取该文件下的相关页面配置,然后是渲染 wxml 文件,将代码转化成 JS 对象,进而转化成 真实DOM树,然后把 DOM 树渲染出来。而且也会加载某个页面的 js 文件(双线程模型),会调用 Page() 函数,并绑定 Page 生命周期函数。

每个小程序都需要在 app.js 中调用 App() 方法注册小程序实例,在注册时,可以绑定对应的生命周期函数,在小程序的生命周期函数中,执行对应的代码,具体的参数及介绍可以参考一下 官方文档。

必须在 app.js 中调用,必须调用且只能调用一次。里面包含了几个app的生命周期钩子:

  1. onLaunch: 小程序初始化完成时触发,全局只触发一次
    • 云开发的初始化 方便其他页面直接调用云开发的SDK
    • 发送请求获取用户的个人信息 方便其他页面使用
    • 获取本地存储数据 方便其他页面使用 .
  2. onShow:小程序启动或切前台显示时触发。
    • 重新启动定时器 继续定时执行功能
    • 重新触发异步 获取新的数据
    • 重新启动播放器等 .
  3. onHide:小程序从前台进入后台时触发(如 切换到其他的App)。
    • 当暂停定时器
    • 暂停视频音频的播放 .
  4. onError:小程序发生脚本错误或 API 调用报错时触发。
    • 收集错误信息 发送到后台 进行错误日志的记录
    • 弹出窗口提示用户 .
  5. onPageNotFound:小程序要打开的页面不存在时触发。
    • 监听报错,弹出窗口提示用户
    • 监听报错,重新跳转页面 .
  6. onUnhandledRejection:小程序有未处理的 Promise 拒绝时触发。
    • 用在统一捕获处理 可以在该生命周期中处理错误情况 ,一般是由于异步代码出错导致的 .
  7. onThemeChange:系统切换主题时触发。
    • 让小程序可以跟着主题的切换 也改变小程序的UI风格,使之体验更好!

示例:

3.3、page注册与生命周期

对于小程序中的每个页面,都需要在页面对应的 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时都会被调用

3.3.1、使用 Page 构造器注册页面

简单的页面可以使用 Page() 进行构造。

代码示例:

详细的参数含义和使用请参考 Page 参考文档 。

3.3.2、在页面中使用 behaviors

基础库 2.9.2 开始支持,低版本需做兼容处理

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

具体用法参见 behaviors 。

onLoad(Object query)

页面加载时触发,一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数,一般建议在这个函数中做一些数据初始化的工作。

onShow()

页面显示/切入前台时触发,比如:新推入了一个新的页面,那么原来的页面就处于后台,这时如果把新页面又移除掉,那么下面的页面就会调用onShow方法

onReady()

页面初次渲染完成时触发,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互,对界面内容进行设置的API,可以在这个页面中进行执行

onHide()

页面隐藏/切入后台时触发,如:navigateTo或底部tab切换至其他页面,小程序切入后台等

onUnload()

页面卸载时触发,如:redirectTo或navigateBack到其他页面

3.4、总结

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重新开始执行.

四、视频

【微信小程序开发】 https://www.bilibili.com/video/BV1pv4y1n7Zg/?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a

五、作业

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-04-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、WXSS (WeiXin Style Sheets)
    • 1.1、尺寸单位
      • 1.2、样式导入
        • 1.3、内联样式
          • 1.4、选择器
            • 1.5、全局样式与局部样式
              • 1.6、background-image问题
              • 二、WXS(WeiXin Script)
                • 2.1、WXS 模块
                  • 2.1.1、模块
                  • 2.1.2、.wxs 文件
                  • 2.1.3、<wxs> 标签
                  • 2.1.4、注意事项
                • 2.2、变量
                  • 2.2.1、概念
                  • 2.2.2、变量名
                  • 2.2.3、保留标识符
                • 2.3、注释
                  • 2.4、运算符
                    • 2.4.1、基本运算符
                    • 2.4.2、一元运算符
                    • 2.4.3、位运算符
                    • 2.4.5、比较运算符
                    • 2.4.6、等值运算符
                    • 2.4.7、赋值运算符
                    • 2.4.8、二元逻辑运算符
                    • 2.4.9、其他运算符
                  • 2.5、语句
                    • 2.5.1、if 语句
                    • 2.5.2、switch 语句
                    • 2.5.3、for 语句
                    • 2.5.4、while 语句
                  • 2.6、数据类型
                    • 2.6.1、number
                    • 2.6.2、string
                    • 2.6.3、boolean
                    • 2.6.4、object
                    • 2.6.5、function
                    • 2.6.6、array
                    • 2.6.7、date
                    • 2.6.8、regexp
                    • 2.6.9、数据类型判断
                    • constructor 属性
                    • typeof
                  • 2.7、基础类库
                    • 2.7.1、console
                    • 2.7.2、Math
                    • 属性
                    • 方法
                    • 2.7.3、JSON
                    • 方法
                    • 2.7.4、Number
                    • 属性
                    • 2.7.5、Date
                    • 属性
                    • 2.7.6、Global
                    • 属性
                    • 方法
                  • 2.8、WXS与JS的区别
                  • 三、生命周期
                    • 3.1、小程序的启动流程
                      • 3.2、app生命周期
                        • 3.3、page注册与生命周期
                          • 3.3.1、使用 Page 构造器注册页面
                          • 3.3.2、在页面中使用 behaviors
                        • 3.4、总结
                        • 四、视频
                        • 五、作业
                        相关产品与服务
                        云开发 CloudBase
                        云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档