【4 微信小程序学习 - WXSS-WXML-WXS语法】

news2024/11/7 11:38:32

1 WXSS相关

1 小程序样式的写法

在这里插入图片描述

2 WXSS支持的选择器

在这里插入图片描述

3 wxss的扩展 – 尺寸单位RPX

rpx是为了屏幕自适应.
在这里插入图片描述

4 逻辑判断 wx:if – wx:elif – wx:else

对应v-if
在这里插入图片描述

<!-- 2.条件判断 -->
<view wx:if="{{score > 90}}">优秀</view>
<view wx:elif="{{score > 80}}">良好</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格</view>

5 hidden属性

对应v-show
在这里插入图片描述

6 列表渲染 – wx:for基础

在这里插入图片描述

使用block标签包裹,类似template

在这里插入图片描述

<view class="books">
  <block wx:for="{{books}}" wx:key="id" wx:for-item="book" wx:for-index="i">
    <view>{{ book.name }}-{{ book.price }}-{{ i }}</view>
  </block>
</view>

4 重命名 item/index名称

在这里插入图片描述

5 key作用

在这里插入图片描述

1 基本数据使用*this作为key

在这里插入图片描述

2 对象类型会自动解析属性,使用对象的属性值作为key


//对象数据
books: [
      { id: 111, name: "代码大全", price: 98 },
      { id: 112, name: "你不知道JS", price: 87 },
      { id: 113, name: "JS高级设计", price: 76 },
    ]
 //对象的属性id作为属性   
<view class="books">
  <view wx:for="{{books}}" wx:key="id">
    <!-- item: 每项内容, index: 每项索引 -->
    {{item.name}}-{{item.price}}
  </view>
</view>

2 WXS介绍

js中的方法只能通过事件触发,不能被wxml中的代码直接调用,不能很好的处理样式相关的函数
WXS可以使样式和函数在一起(直接进行调用),wxs主要就是为了写关于样式处理的函数
wxs代码在双线程模型中处于渲染样式的webview线程在一起,不在jscore所在的webview线程
因为在一个线程中,所以可以更快的处理wxml中的数据.

在这里插入图片描述

WXS的写法

只能写JS的ES5的语法,只能写纯JS,不能使用其他的API
在这里插入图片描述

.wxs代码


function formatPrice(price) {
  return "¥" + price
}

// 必须导出后, 才能被其他地方调用: 必须使用CommonJS导出
module.exports = {
  formatPrice: formatPrice,
  
}

在wxml中调用的代码

<!-- 独立的文件, 通过src引入 -->
//导入的模块名,文件路径
<wxs module="format" src="/utils/format.wxs"></wxs>

<view class="books">
  <block wx:for="{{books}}" wx:key="id">
  //调用方式:{{模块名+函数名(参数)}}
    <view>name:{{item.name}}-price:{{format.formatPrice(item.price)}}</view>
  </block>
</view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624787.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

程序员兼职接单的平台列表

最近有很多程序员朋友说想要找一份合适的兼职工作&#xff0c;却苦于找不到一个正规靠谱的平台。今天我特意整理了一份超详尽的程序员兼职接单平台list&#xff0c;各位可以按需选择&#xff0c;也希望大家都能找到心仪的工作~ 中高端开发者必备的兼职接单平台&#xff1a;程序…

Ubuntu 登录提示信息`Message of The Day`(MOTD)定制与开关

一、效果 登录Ubuntu的时候&#xff0c;在控制台可能会弹出一系列提示消息&#xff0c;有欢迎消息、系统信息、更新信息等等&#xff1a; 这些提示消息被称为Message of The Day&#xff0c;简称MOTD。 Ubuntu与其它Linux版本不太一样&#xff0c;它引入了MOTD 的概念。 这些…

如何使用SonarQube+ SonarScanner分析项目

前言&#xff1a; 六一儿童节要玩程序员的玩具&#xff0c;动手试一试挺有意思的 目录 1. 安装sonarqube 2. 获取Sonarqube令牌 3. 下载安装SonarScanner 5. SonarScanner分析项目 7. 查看分析结果 8.常见问题 版本信息&#xff1a; Sonarqube7.6Sonar-scanner-4.8.0 …

[操作系统]关于进程的管理

首先注明:仍然是复习阶段,所以和课本可能有些许冲突和不同,只是图谱来自于王道考研2022操作系统,旨在快速梳理操作系统的基本知识 1.进程的定义,概念和特征: 多道程序环境下,多个程序并发执行,因此他们将会失去封闭性,不适宜于管理,所以引入了进程这种概念. 进程是程序的一次…

Python自动化测试:pytest实现关键字驱动

在上一篇文章中&#xff0c;我编写了一个非常简单的关键字驱动程序&#xff0c; 不过这个程序只是跑通了功能&#xff0c;还有很多可以优化的地方&#xff0c;这篇文章我想通过 pytest 来简化自动化测试用例的编写&#xff0c;使用的是比较基础的 pytest 功能。 下篇文章我再写…

spark安装部署

spark安装部署 需要指导私信 所有节点安装scala&#xff0c;安装scala需要安装openjdk-8-jre&#xff08;当前用户如果没有sudo权限可将其加入sudo组里&#xff09;,以ubuntu2204-LTS为例&#xff1a; $ sudo apt update $ sudo apt-get install openjdk-8-jre-headless -y (红…

【03Eclipse 窗口说明】对每个窗口和视图的功能和用途的详细说明导航栏编辑器窗口项目资源管理器

Eclipse 窗口说明 简介 Eclipse 是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供了丰富的窗口和视图来支持开发工作。本教程将详细介绍 Eclipse 主要窗口和常见视图的功能和用途。 主要窗口 1. 导航栏 导航栏位于 Eclipse 窗口的顶部&#xff0…

Java学习路线(22)——测试框架Junit

一、单元测试概念 单元测试就是针对最小的功能单元编写测试代码&#xff0c;Java程序最小的功能单元是方法&#xff0c;因此&#xff0c;单元测试就是针对Java方法的测试&#xff0c;进而检查方法正确性。 二、Junit测试框架 &#xff08;一&#xff09;概念&#xff1a; Jun…

认识、使用 yarn

概念 npm 是前端开发过程中常常使用的命令&#xff0c;比如构建 Vue 项目&#xff0c;亦或下载 Vue 项目依赖但是该命令效率低下&#xff0c;且容易出错&#xff0c;有没有更好的解决方案呢?有&#xff0c;Yarn ta是一个快速、可靠且安全的 JS 包管理工具: 快速:Yamn 本地缓…

黑客松指南|如何快速注册参与Sui x KuCoin Labs Hackathon

由Sui和KuCoin Labs联合主办的夏季黑客松&#xff0c;将为开发者、设计师、创业者和区块链爱好者提供一个交流和合作的平台。参与者将有机会利用Sui的先进技术和KuCoin Labs的资源&#xff0c;开发创新的区块链应用和解决方案。 我们鼓励参与者围绕「基础设施和工具」、「NFT、…

如何使用Jemeter对HTTP进行接口压测?没有比这个更详细的教程

目录 前言 1、首先添加一线程组 2、因为是对HTTP接口进行压力测试&#xff0c;所以需要在线程组下添加一HTTP请求&#xff08;通过鼠标右键->添加->Sampler->HTTP请求 完成&#xff09; 3、紧接着就是对HTTP请求进行设置了&#xff0c;主要设置服务器名称或IP&#…

10年心路历程:一个女测试工程师功能测试转向自动化测试/开发

十年测试心路历程&#xff1a; 由于历史原因&#xff0c;大部分测试人员&#xff0c;最开始接触都是纯功能界面测试&#xff0c;随着工作年限&#xff0c;会接触到一些常用测试工具&#xff0c;比如抓包&#xff0c;数据库&#xff0c;linux等。 我大学学的计算机专业&#xff…

【力扣刷题 | 第四天】 1.两数之和 454.四数之和

1. 两数之和 - 力扣&#xff08;LeetCode&#xff09; 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同…

【QT】解决继承QThread的子线程导致程序无法关闭主线程关闭太快导致子线程中的槽方法未执行

背景 使用串口进行通信 一共有三个线程 主线程负责界面的显示子线程1负责检测当前系统可用的串口子线程2负责差串口通信 子线程实现 在发生问题的最初&#xff0c;因为要一直检测当前系统的可用线程&#xff0c;所以线程1我使用继承自QThread实现的线程&#xff0c;其中重写ru…

github下载的项目如何上传到gitee

1、安装git 省略 2、github下载项目 如何注册、登录省略 3、上传到gitee 注册账号 省略 新建仓库 iot-plat创建过了&#xff0c;用iot-plat1演示 创建完的仓库 此处的https地址要记住&#xff0c;等会要用到 到本地项目目录 项目里面 Git命令操作 空白处右键&#xff…

CSP-S 第一轮笔试重点题

CSP-S提高组笔试题重点题汇总&#xff1a; 今天我给大家分享一些 CSP-S 第一轮笔试中的一些重点题&#xff0c;包含讲解。 第一题&#xff1a; 1.十进制小数13.375对应的二进制数是&#xff08;&#xff09;。 A.1101.011 B.1011.011 C.1101.101 D.1010.01 解析&#x…

一起学SF框架系列5.3-模块Beans-bean与Spring容器的交互方式

正常情况下&#xff0c;应用中的bean同spring容器关系如下图&#xff1a; 尽管应用bean是Spring容器创建并建立依赖关系&#xff0c;应用只需使用bean即可&#xff0c;因此对bean来说Spring容器就是无感知的&#xff08;无侵入编程&#xff09;。但是还是存在需求需要应用bea…

OkHttp 框架设计剖析(含面试题)

作者&#xff1a;Calculus_小王 概述 OKHttp是一个基于HTTP协议的网络请求框架&#xff0c;它支持HTTP/2协议&#xff0c;连接复用和连接池&#xff0c;缓存策略等功能。它的核心设计是拦截器&#xff08;Interceptor&#xff09;&#xff0c;它将请求的复杂逻辑切分成多个独立…

详解Java内部类、匿名内部类

内部类 内部类&#xff1a;类的第五个成员 1.定义&#xff1a;Java中允许将一个类A声明在另一个类B中&#xff0c;则类A就是内部类&#xff0c;类B称为外部类. 2.内部类的分类&#xff1a; 成员内部类&#xff08;静态、非静态 &#xff09; vs 局部内部类(方法内、代码块内、…

全网最强总结,Selenium自动化测试异常+处理总结,吐血整理...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 当测试工程师执行…