WXSS-WXML-WXS-Syntax

Inhaltsverzeichnis:

1 Stil des WXSS-Schreibprogramms

2 Moustache-Syntaxbindung

3 Bedingtes Rendern von WXML

4 Wiedergabe von WXML-Listen

5 Grundlegende Verwendung der WXS-Syntax

6 WXS-Grammatik-Fallübungen

Die adaptive Einheit rpx des Applets. Wenn der Designentwurf iPhone6 ​​ist, 1px=2rpx

wxml muss ein geschlossenes Tag oder ein einzelnes Tag plus / sein, andernfalls wird ein Fehler gemeldet, und es wird zwischen Groß- und Kleinschreibung unterschieden, im Gegensatz zu HTML, das nicht zwischen Groß- und Kleinschreibung unterscheidet.

Die Mustache-Syntax von Applets kann keine Funktionen oder Methoden aufrufen, und andere Aspekte ähneln denen von vue.

wx:if, wx:elif, wx:else

versteckt={ {}}

wx:for={ { {Objekttypdaten}}, Element und Index werden beim Schleifen automatisch generiert; manchmal ist eine 2-Layer-Schleife oder eine Mehrschicht-Schleifendurchquerung erforderlich. Wenn zu diesem Zeitpunkt jede Schicht ein Element verwendet, wird dies der Fall sein verwirrt, also verwenden wir wx:for-item="benutzerdefinierter Artikelname", um den Artikelnamen jeder Ebene zu unterscheiden.

wx:key kann im Allgemeinen an *this gebunden werden (dies bedeutet, den Objekttyp des for-Schleifenelements in einen Zeichenfolgentyp umzuwandeln; wenn der Objekttyp gebunden ist, wird es [object object] anzeigen, was dazu führt, dass der Schlüssel wird nicht eindeutig ); es kann auch der Name eines Schlüssels im Element sein

Beispielcode:

wxml：

<!--pages/04_learn_wxml/index.wxml-->
<!-- 1.Mustache语法 -->
<view>{
    
    { message }}</view>
<view>{
    
    { firstname + " " + lastname }}</view>
<view>{
    
    { date }}</view>

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

<!-- 3.hidden属性:v-show -->
<!-- 基本使用 -->
<view hidden>我是hidden的view</view>

<!-- 切换案例 -->
<button bindtap="onChangeTap">切换</button>
<view hidden="{
    
    {isHidden}}">哈哈哈哈</view>
<view wx:if="{
    
    {!isHidden}}">呵呵呵呵</view>


<!-- 4.列表展示 -->
<!-- 4.1.wx:for基本使用 -->
<!-- 遍历data中的数组 -->
<view class="books">
  <view wx:for="{
    
    {books}}" wx:key="id">
    <!-- item: 每项内容, index: 每项索引 -->
    {
    
    {item.name}}-{
    
    {item.price}}
  </view>
</view>
<!-- 遍历数字 -->
<view class="number">
  <view wx:for="{
    
    {10}}" wx:key="*this">
    {
    
    { item }}
  </view>
</view>
<!-- 遍历字符串 -->
<view class="str">
  <view wx:for="coderwhy" wx:key="*this">
    {
    
    { item }}
  </view>
</view>

<!-- 4.2. 细节补充: block-item/index名称-key的使用 -->
<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>

js：

// pages/04_learn_wxml/index.js
Page({
  data: {
    message: "Hello World",
    firstname: "kobe",
    lastname: "bryant",
    date: new Date().toLocaleDateString(),
    score: 10,
    isHidden: false,

    books: [
      { id: 111, name: "代码大全", price: 98 },
      { id: 112, name: "你不知道JS", price: 87 },
      { id: 113, name: "JS高级设计", price: 76 },
    ]
  },

  onChangeTap() {
    this.setData({
      isHidden: !this.data.isHidden
    })
  }
})

Die Schnurrbart-Syntax in WeChat-Applets kann nur Daten in Daten binden, aber keine Funktionen oder Methoden in der Schnurrbart-Syntax aufrufen, daher müssen wir wxs verwenden, um den Vorgang des Aufrufens von Funktionen oder Methoden zu realisieren.

Die linke Seite des obigen Bildes ist wxml und die rechte Seite ist js

Beachten Sie diese wxs-Einschränkung:

 Die es5-Syntax ist im wxs-Tag zulässig, und die Syntax über es5 kann nicht verwendet werden. Wie Konstanten- und Pfeilfunktionen. Jedes wxs muss seinen eigenen Modulnamen und eigene Exportfunktionen in wxs haben, bevor es in wxml aufgerufen werden kann.

wxs-Datei ist die Export- und Schreibmethode in der wxs-Datei dieselbe wie im Tag. Wenn eine wxml-Datei diese wxs-Datei aufruft, wird das wxs-Tag weiterhin verwendet, um die wxs-Datei aufzurufen.

Bei Verwendung des berechneten Attributs in vue kann es weiterhin in wxs definiert und exportiert werden.

wxs-Praxiskoffer:

wxml：

<!--pages/05_learn_wxs/index.wxml-->
<!-- 1.方式一: 标签 -->
<!-- <wxs module="format">
  function formatPrice(price) {
    return "¥" + price
  }

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

<!-- 2.方式二: 独立的文件, 通过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>

<view class="total">总价格: {
    
    {format.calcPrice(books)}}</view>

<view>------------题目练习------------</view>
<view class="count">播放量: {
    
    {format.formatCount(playCount)}}</view>
<view class="time">
  {
    
    {format.formatTime(currentTime)}}/{
    
    {format.formatTime(duration)}}
</view>

 wxss：

/* pages/05_learn_wxs/index.wxss */
.count {
  font-size: 40rpx;
  font-weight: 700;
  color: red;
}

.time {
  font-size: 40rpx;
  font-weight: 700;
  color: blue;
}

js：

// pages/05_learn_wxs/index.js
Page({
  data: {
    books: [
      { id: 111, name: "代码大全", price: 98, coverURL: "" },
      { id: 112, name: "你不知道JS", price: 87, coverURL: "" },
      { id: 113, name: "JS高级设计", price: 76, coverURL: "" },
    ],
    playCount: 2232,
    duration: 255,
    currentTime: 65
  },
  formatPrice(price) {
    return "¥" + price
  },
})

Inhalt der wxs-Datei:

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

function calcPrice(books) {
  return "¥" + books.reduce(function(preValue, item) {
    return preValue + item.price
  }, 0)
}

// 对count进行格式化
function formatCount(count) {
  count = Number(count)
  if (count >= 100000000) {
    return (count / 100000000).toFixed(1) + "亿"
  } else if (count >= 10000) {
    return (count / 10000).toFixed(1) + "万"
  } else {
    return count
  }
}

// function padLeft(time) {
//   if ((time + "").length >= 2) return time
//   return "0" + time
// }

// 2 -> 02
// 24 -> 24
function padLeft(time) {
  time = time + ""
  return ("00" + time).slice(time.length)
}

// 对time进行格式化
// 100 -> 01:40
function formatTime(time) {
  // 1.获取时间
  var minute = Math.floor(time / 60)
  var second = Math.floor(time) % 60

  // 2.拼接字符串
  return padLeft(minute) + ":" + padLeft(second)
}

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