小程序代码组成-2-CSDN博客

本文链接：https://blog.csdn.net/qq_59954212/article/details/123956297

三、WXSS样式

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。

WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。

1、文件组成

项目公共样式：app.wxss
页面样式：各个页面目录下的 .wxss 文件
其他样式：外部 .wxss 文件，可以被项目公共样式和页面样式引用

2、尺寸单位

在WXSS中，引入了rpx（responsive pixel）尺寸单位，适配不同宽度的屏幕，开发起来更简单。

小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。

举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

常用机型rpx尺寸换算表：

3、wxss引用

在CSS中，开发者可以这样引用另一个样式文件：@import url('./test_0.css')

这种方法在请求上不会把test_0.css合并到index.css中，也就是请求index.css的时候，会多一个test_0.css的请求。

在小程序中，我们依然可以实现样式的引用，样式引用是这样写：

@import './test_0.wxss'

由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。

4、内联样式

WXSS内联样式与Web开发一致:

<!--index.wxml-->

<!--内联样式-->
<view style="color: red; font-size: 48rpx"></view>

小程序也支持动态更新内联样式：

<!--index.wxml-->

<!--可动态变化的内联样式-->
<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

5、选择器

目前小程序WXSS支持的选择器如下：

类型	选择器	样例	样例描述
类选择器	.class	.intro	选择所有拥有 class="intro" 的组件
id选择器	#id	#firstname	选择拥有 id="firstname" 的组件
元素选择器	element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
伪元素选择器	::after	view::after	在 view 组件后边插入内容
伪元素选择器	::before	view::before	在 view 组件前边插入内容

WXSS优先级与CSS类似，权重如图所示。

权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。

6、官方样式库

为了减轻开发者样式开发的工作量，微信官方提供了WeUI.wxss基础样式库。

WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。

GitHub项目地址：

GitHub - Tencent/weui-wxss: A UI library by WeChat official design team, includes the most useful widgets/modules.https://github.com/Tencent/weui-wxss

WeUI使用教程：

WeUI组件库简介 | wechat-miniprogram / weuihttps://wechat-miniprogram.github.io/weui/docs/

四、JavaScript脚本

微信小程序的主要开发语言时JavaScript，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。

1、ECMAScript

ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。简单来说，ES是标准，JS是对ES的实现。

理解 JavaScript 是 ECMAScript 一种实现后，可以帮助开发者理解小程序中的 JavaScript、浏览器中的 JavaScript 、 NodeJS 中的 JavaScript 是不相同的。

ECMA-262 规定了 ECMAScript 语言的几个重要组成部分：

语法
类型
语句
关键字
操作符
对象

2、小程序的执行环境

不同的平台，小程序的脚本执行环境也是有所区别的。

小程序目前可以运行在三大平台：

iOS平台，包括iOS9、iOS10、iOS11
Android平台
小程序IDE

这种区别主要是体现三大平台实现的 ECMAScript 的标准有所不同。截止到当前一共有七个版本的ECMAScript 标准，目前开发者大部分使用的是 ES5 和 ES 6 的标准，但是在小程序中， iOS9和iOS10 所使用的运行环境并没有完全兼容 ES 6 标准，一些 ES 6 中规定的语法和关键字是没有的或者同标准是有所不同的，例如：

箭头函数
let const
模板字符串
…

所以一些开发者会发现有些代码在旧的手机操作系统上出现一些语法错误。为了帮助开发者解决这类问题，小程序IDE提供语法转码工具帮助开发者，将 ECMAScript 6代码转为 ECMAScript 5代码，从而在所有的环境都能得到很好的执行。

开发者需要在项目设置中，勾选 ES6 转 ES5 开启此功能。

3、模块化

小程序中可以将任何一个JavaScript 文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。

请看是一个简单模块示例，B.js 引用模块A。使用require(path) 引入。

// moduleA.js
module.exports = function( value ){
  return value * 2;
}

// B.js

// 在B.js中引用模块A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)

4、脚本的执行顺序

小程序的执行的入口文件是 app.js ，并且会根据其中 require 的模块顺序决定文件的运行顺序。

当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行相应的 js 文件。

5、作用域

同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同 NodeJS 更为相似。

在文件中声明的变量和函数只在该文件中有效，在其他文件中无法访问。不同的文件中可以声明相同名字的变量和函数，不会互相影响。

当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的。

在脚本 a.js 中设置全局变量：

// a.js
// 获取全局变量
var global = getApp()
global.globalValue = 'globalValue'

在脚本 b.js 中访问 a.js 定义的全局变量：

// b.js
// 访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue

需要注意的是，上述示例只有在 a.js 比 b.js 先执行才有效，当需要保证全局的数据可以在任何文件中安全的被使用到，那么可以在 App() 中进行设置：

// app.js
App({
  globalData: 1
})