微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)

news/2024/10/31 1:28:19/

上一篇讲了WXML:小程序版HTML,这一篇介绍WXSS:小程序版CSS。

1. WXSS:小程序版CSS。

WXSS是一套样式语言,为了便于前端开发的上手,WXSS同HTML的CSS样式文件大部分特性一样。它用来决定WXML的样式,同时在CSS基础上进行了修改扩充。 其中扩展属性有尺寸单位、样式导入。

1.1.尺寸单位

1.1.1 介绍

rpx 可以根据屏幕宽度进行自适应。 与px的换算关系,下图可以看出不同的手机型号,px与rpx之间换算关系是不一样的,官方建议使用iPhone6作为视觉稿的标准

1.1.2 使用案例

<view style="width:375rpx;height:300rpx;border:1px solid black">测试RPX</view><view style="width:162px;height:300px;border:1px solid black">测试PX</view>
复制代码

iPhone5机型

iPhone6机型 由此可以看出rpx是根据机型等比例缩放的,而px是固定大小的。因此机型的适应性上建议使用rpx。

1.2.样式导入

1.2.1介绍

看官文描述使用@import语句进行样式导入。 因此对于公共的样式可以统一设置,然后导入即可。

1.2.2测试

创建style文件夹创建testImport.wxss文件

text{color: rgb(22, 71, 207);
}
复制代码

引入该样式

/* pages/eventTest/eventTest.wxss */
@import "../../style/testImport.wxss";
复制代码

测试

1.3.内联样式

1.在标签中增加style设置样式,样式的值可以{{}}动态获取,但是运行时会进行解析影响运行效率。

<view style="color:{{color}};" />
复制代码

1.在标签中class 指定样式规则。具体规则内容写在WXSS文件中如:

<view class="inputNumber" />
复制代码
/* pages/eventTest/eventTest.wxss */
.inputNumber{ border:1px solid gray; padding:2px; margin:1px 20px 1px 20px; 
}
复制代码

1.4.选择器

支持的选择器有:

1.5.全局样式与局部样式

定义在最外层的app.wxss文件中的样式都为全局样式。而自己定义的页面中的wxss文件中的样式则为局部样式优先级高,设置的样式如果与全局的样式相同则覆盖全局样式。

至此WXSS:小程序版CSS结束

2.WXS:小程序版JavaScript

2.1模块

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

2.1.1 module 属性

module是wxs标签必填属性,且各个wxs的module属性需要唯一,不能重复没否则会被后者覆盖 module的值命名,首字母必须英文(大小写)、下划线,剩下的字符可以是英文(大小写)、下划线、数字

测试

<!--pages/wxsTest/wxsTest.wxml-->
<text>pages/wxsTest/wxsTest.wxml</text>
<wxs module="test01">
var some_msg = "hello wxsTest"; 
module.exports = { msg : some_msg, }
</wxs>
<view>{{test01.msg}}</view>
复制代码

2.1.2 src 属性

src 属性可以用来引用其他的 wxs 文件模块。
引用的时候,要注意如下几点:
只能引用 .wxs 文件模块,且必须使用相对路径。
wxs 模块均为单例, wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地
方,多次引用,使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
复制代码

新建pages/comm.wxs

// /pages/comm.wxs 
var foo = "'hello world' from comm.wxs"; 
var bar = function(d) { return d; 
}
module.exports = { foo: foo, bar: bar };
module.exports.msg = "some msg";
复制代码

引用

<wxs src="../../pages/comm.wxs" module="comm"/> 
<view>{{comm.msg}}</view> 
<view>{{comm.bar(comm.foo)}}</view>
复制代码

测试

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

tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
复制代码

comm.wxs

// /pages/comm.wxs
var tools = require("./tools.wxs");
console.log(tools.FOO);
console.log(tools.bar("comm.wxs"));
console.log(tools.msg);
复制代码

引入wxsTest.wxml

<!-- /page/index/wxsTest.wxml -->
<wxs src="../../pages/comm.wxs" module="logic" />
复制代码

2.2变量

2.3注释

2.4运算符

2.5语句

2.6数据类型

2.7基础类库

到此小程序框架基础部分就结束了,然后后面的: (微信小程序框架组件、微信小程序自定义组件、微信小程序框架api)模块在实战中展开讲吧。

下一篇: 微信小程序后端Java接口开发


http://www.ppmy.cn/news/305206.html

相关文章

【微信小程序】WXML WXSS JS

目录 &#x1f353;小程序代码的构成 - WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 的区别 &#x1f347;小程序代码的构成 - WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 的区别 &#x1f352;小程序代码的构成 - JS 逻辑交互 1. 小程序中的 .js 文件 2. 小程序中 .js 文…

【小程序】中WXS的语法详解

文章目录 WXS基本使用&#x1f370;WXS的介绍&#x1f370;WXS的写法&#x1f370;WXS的练习(一)&#x1f370;WXS的练习(二) WXS基本使用 &#x1f370;WXS的介绍 WXS&#xff08;WeiXin Script&#xff09;是小程序的一套脚本语言&#xff0c;结合 WXML&#xff0c;可以构建…

微信小程序 | 小程序WXSS-WXML-WXS

&#x1f5a5;️ 微信小程序 专栏&#xff1a;小程序WXSS-WXML-WXS &#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; ✨ 个人主页&#xff1a;CoderHing的个人主页 &#x1f340; 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ &#x1…

20230608----重返学习-react项目的细节

day-088-eighty-eight-20230608-react项目的细节 react项目的细节 进入登录页的情况分析 什么情况下&#xff0c;会进入登录页&#xff1f; 手动输入 /login 地址http://127.0.0.1:3000/#/login 登录成功&#xff1a;跳转到首页push() 我原本想进入的是 个人中心/我的收藏/…

Pascal Voc 2007 2012

1、简介 PASCAL 全称&#xff1a;Pattern Analysis, Statical Modeling and Computational Learning PASCAL VOC&#xff08;The PASCAL Visual Object Classes &#xff09;是一个经典的计算机视觉数据集&#xff0c;由牛津大学、马里兰大学和微软剑桥研究院的研究人员创建的…

[开发|java] com.typesafe.config配置示例说明

com.typesafe.config库是用于处理配置文件的Java库&#xff0c;它提供了一种方便的方式来读取和解析配置文件。要配置时间配置&#xff0c;你可以使用它的Config对象和相关的方法。 官方文档地址 下面是一个示例&#xff0c;演示如何使用com.typesafe.config库来配置时间配置&…

从QGIS图层中裁剪需要的区域

GiS数据裁切&#xff0c;创建一个临时图层&#xff0c;通过矢量裁切的方法&#xff0c;将Gis图层进行裁切&#xff1b;影像裁切&#xff0c;将影像图层放置在Gis中&#xff0c;截取影像图以及临时图层的轮廓&#xff0c;放入PS中进行对比&#xff0c;然后将影像图裁切下来。 1…

升级了显卡驱动,Vista得分从3.1提升到3.5,高兴啊!:)

我的是昭阳K42A笔记本&#xff0c;显卡是Nvidia Geforce8400M GS&#xff0c;升级了最新的修改版驱动&#xff1a;NVIDIA_XTreme-G_162.62mb_vista32&#xff0c;下载地址是&#xff1a;http://count.mydrivers.com/download.aspx?id77223&urlhttp://file5.mydrivers.com/…