微信小程序2-WXSS,WXS

原创已于 2022-07-12 18:29:22 修改 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #小程序

于 2022-07-10 00:51:42 首次发布

本文介绍了微信小程序的基础，包括WXSS样式语言和WXS脚本语言。WXSS具备CSS大部分特性，并引入了响应式像素rpx。WXS允许在WXML中直接使用，用于构建页面结构，支持在wxml中直接使用和从wxs文件导入。通过了解这些基础知识，开发者可以更好地掌握微信小程序的开发。

微信小程序1-小程序基础,开发工具安装使用

1.WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改
在这里插入图片描述

1).像素rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx，假如一个屏幕为375px、750物理像素，按照小程序的规定屏幕宽度都定位750rpx，所以此屏幕就是750rpx,1rpx=(750rpx/375px)=0.5px；1rpx=(750rpx/750物理像素)=1物理像素

2).外联样式

.name {
  color: red;
  font-size:18px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}

在这里插入图片描述

3).内联样式

在这里插入图片描述

4).全局样式

定义在app.wxss中的样式就是全局样式，作用去全部页面，当有局部样式的时候就以局部样式为准
在这里插入图片描述

5).导入其他样式

@import "common.wxss";

2.WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构
WXS和JavaScript是不同的语法

1).在wxml中直接使用wxs

<view>{{obj.msg}}</view>
<view>{{obj.test()}}</view>
<wxs module="obj">
var msg="123"
function test(){
   return "test"
}
module.exports = {
  msg:msg,
  test:test
}
</wxs>

在这里插入图片描述

2).从wxs文件导入

var foo = "参数";
var bar = function (d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar,
};
module.exports.msg = "从wxs文件导入";

<wxs src="./data.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.foo)}} </view>

新建wxs文件
在这里插入图片描述

在这里插入图片描述