草庐IT

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

coderHing[专注前端] 2023-04-23 原文

🖥️ 微信小程序 专栏：小程序WXSS-WXML-WXS
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

目录

一、WXSS编写程序样式

小程序的样式写法

WXSS支持的选择器

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

wxss的拓展 - 尺寸单位

二、Mustache语法绑定

Mustache语法

三、WXML的条件渲染

逻辑判断 wx:if - wx:elif - wx:else

hidden属性

四、WXML的列表渲染

列表渲染 - wx:for 基础

block标签

列表渲染 - item / index 名称

列表渲染 - key作用

五、WXS语法基本使用

什么是WXS?

WXS的写法

一、WXSS编写程序样式

小程序的样式写法

  • 页面样式的三种写法:
  • 行内样式、页面样式、全局样式
  • 三种样式都可以作用于页面的组件
  • 如果有相同的样式 那么优先级如下:
  • 行内样式 > 页面样式 > 全局样式

JavaScript
// 代码展示
<!-- 1.应用全局样式 -->
<view class="title">learn wxss title</view>

<!-- 2.页面样式 -->
<view class="message">learn wxss message 页面样式</view>

<!-- 3.行内样式 -->
<view style="color: purple; font-size: 25px;">inline style 行内样式</view>

WXSS支持的选择器

目前支持的选择器:

 

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

跟Css一样(依然有权重)

wxss的拓展 - 尺寸单位

跟Css中最大的区别!

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

注:开发微信小程序时设计师可以用Iphone6作为视觉稿的标准

二、Mustache语法绑定

Mustache语法

  • WXML基本格式:
  • 类似于HTML代码,可以写成 单标签 也可以写成 双标签
  • 必须有 严格的闭合: 没有闭合会导致编译错误
  • 大小写敏感:class和Class是不同的属性

  • 开发中,界面上展示的数据并不是写死的,会根据服务器返回的数据,或用户的操作来改变
  • 如使用原生Js或Jq的话,需要通过操作DOM来进行界面的更新
  • 小程序和Vue一样,提供插值语法:Mustache语法(双大括号)

 

三、WXML的条件渲染

逻辑判断 wx:if - wx:elif - wx:else

  • 在某些需求中,我们需要根据条件来决定一些内容是否渲染:
  • 当条件为true时, view组件会渲染出来
  • 当条件为false时, view组件不会渲染出来

hidden属性

  • hidden属性:
  • hidden是所有组件都默认拥有的属性
  • 当hidden属性为true时,组件隐藏
  • 为false时,组件显示出来

JavaScript
<view hidden="{{false}}">哈哈哈</view>

 

  • hidden和wx:if的区别
  • hidden控制显示和隐藏,是控制是否添加hidden属性
  • wx:if是控制组件是否被渲染

四、WXML的列表渲染

列表渲染 - wx:for 基础

  • 为什么需要使用wx:for
  • 在实际开发中,服务器经常返回各种 列表数据 我们不可能一一从列表中取出数据进行展示;
  • 所以我们需要通过 for循环的方式,遍历所有数据,一次性进行展示;
  • 在组件中,可以使用wx:for来遍历一个数组(字符串 - 数字)
  • 默认情况下,遍历后在wxml中可以使用一个 变量index,保存的当前遍历数据的下标值
  • 数组中对应某项的数据,使用 变量名item获取

JavaScript
代码展示
<!-- 4.列表展示 -->
<view>
<!-- 4.1 wx:for 基本使用 -->
<!-- 遍历data中的数组 -->
<view class="books">

  <!-- <view>{{ books[0].name }}</view> -->
  <!-- wx:key="*this" 表示当前本身 -->
  <block wx:for="{{ books }}" wx:key="id">
  <!-- item表示每一项的内容,index 表示 每一项的索引 -->
    <view>{{item.name}} - {{ item.price }}</view>
  </block>
</view>

<!-- 遍历数字 -->
<view class="number">
  <block wx:for="{{ 10 }}" wx:key="*this">
    <view>{{ item }}</view>
  </block>
</view>

<!-- 遍历字符串 -->
<view class="str">
  <block wx:for="coderhing" wx:key="*this">
    <view>{{ item }}</view>
  </block>
</view>

</view>

block标签

  • 什么是block标签? => 类似于 Vue中的 template
  • 在一些情况下,我们使用wx:if 或 wx:for时,可能需要包裹一组 组件标签
  • 我们希望对这一组组件标签进行整体的操作,这个时候怎么办?
  • 注:
  • <block /> 并不是一个组件,它仅仅是一个 包装元素 不会在页面中做任何渲染 只接受控制
  • 使用block有两个好处:
  • 将需要进行遍历或判断的内容进行包裹
  • 将遍历和判断的属性放在block标签中,不影响普通属性的阅读,提高代码的可读性.

 

列表渲染 - item / index 名称

  • 默认情况下,item - index 的名字是固定的
  • 但在某些情况下,我们可能想要使用其他名称
  • 或者出现多层遍历时,名字重复
  • 这个时候,我们可以指定item和index的名称:

 

JavaScript
代码展示:
<!-- item/index 名称 有些特殊情况 我们想要把 item/index 进行重命名-->
<view class="bookess">
  <!-- wx:for-item="book" 这样做的话 就不叫item了 就叫做 book -->
  <block wx:for="{{books}}" wx:key="id" wx:for-item="book" wx:for-index="i">
    <view>{{book.name}} - {{book.price}} - {{i}}</view>
  </block>
</view>

列表渲染 - key作用

  • 我们看到,当使用wx:for时,会报一个警告:
  • 我们可以添加 key来提供性能
  • 为什么需要这个key属性?
  • 其实和小程序内部 也使用了 虚拟DOM有关系(和Vue React很相似)
  • 当某曾有很多相同的节点时,(也就是列表节点时)我们希望 插入 删除一个新的节点 可以更好的复用节点
  • wx:key的值以两种形式提供
  • 字符串, 代表在 for循环的array中 item的某个property,该property的值需要是列表中唯一的字符串或数字,并且不能动态进行改变
  • 保留关键字 *this 代表在for循环中的item本身,这种表示需要 item本身是一个唯一的字符串或数字

五、WXS语法基本使用

什么是WXS?

  • WXS(weixin Script) 是小程序的一套脚本语言,结合WXML 可以构建出页面的结构.
  • 官方:WXS与Js是不同的语言,有自己的语法,并不和Js一致(不过基本一致)
  • 为什么要设计WXS语言?
  • 在WXML中是不能直接调用Page/Component中定义的函数的
  • 但在某些情况,我们可以希望使用函数来处理WXML中的数据(类似于Vue中的过滤器)这个时候就使用WXS
  • WXS使用的限制和特点:
  • WXS不依赖于运行时的基础库版本,可以在所有版本的小程序中运行
  • WXS的运行环境和其他Js代码是隔离的,WXS中不能调用其他Js文件中定义的函数,也不能调用小程序提供的API.
  • 由于运行环境的差异,在IOS设备上小程序内的WXS会比Js代码快2~20倍,在安卓设备商 运行效率无明显差异

WXS的写法

  • WXS有两种写法:
  • 在<wxs>标签中
  • 在以.wxs结尾的文件中
  • <WXS>标签的属性:

 

  • 每一个.wxs文件和<wxs>标签都是一个单独的模块
  • 每个模块有自己的独立作用域.在每个模块里面定义的变量与函数,默认为私有的.对其他模块不可见
  • 一个模块如果想要向外暴露其内部的私有变量和函数,只能通过 module.exports 实现

方式一: wxs标签写法

方式二: .wxs文件写法

 

WXSS-WXML-WXSWXSStext-alignstyleleft微信小程序小程序前端javascript前端框架

有关微信小程序 | 小程序WXSS-WXML-WXS的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  4. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  5. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  6. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  7. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  8. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的，而不是简单地从命令行执行的？例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上，我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

  9. ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2

    是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在

  10. 程序员如何提高代码能力？ - 2

    前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源

随机推荐