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

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>