Cómo escribir lógica de funciones en el wxml del applet, el uso de wxs

En la página del applet wxml, podemos usar { {}} para escribir expresiones js simples, como operadores ternarios, etc., pero para una lógica un poco más complicada, necesitamos usar funciones para resolverlas. Si está escrito en archivos js Algunos de ellos son engorrosos y necesitan vincular datos, etc. En este momento, wxs está equipado para su uso. ¡  wxs solo es compatible con ES5! ! !

1. Descripción del caso:

Implementaremos la lógica de la parte del precio en la figura a continuación. Hay dos atributos precio y descuento_precio en el fenómeno devuelto por el front-end. Cuando el precio con descuento es nulo, solo se mostrará el precio original. Cuando el precio con descuento es no está vacío, se mostrará el precio con descuento y se sorteará el precio original.

Escribir en archivos separados:

1. Cree un archivo con el sufijo wxs y escriba la lógica de la función:

// 如果不进行函数处理，当只有一个原价时，它会将原价也打上删除线，所以必须用该逻辑实现

// 最终要显示的价格
function showPrice(price, discountPrice) {
    if (!discountPrice) {
        return {
            price: price,
            display: true
        }
    } else {
        return {
            price: discountPrice,
            display: true
        }
    }
}

// 显示有切割线的那个价格
function cutPrice(price, discountPrice) {
    if (discountPrice) {
        return {
            price: price,
            display: true
        }
    } else {
        return {
            price: '',
            display: false
        }
    }
}
// 导出这两个函数
module.exports = {
    showPrice: showPrice,
    cutPrice: cutPrice
}

2. Introducirlo en wxml:

el módulo es equivalente al objeto que se operará más tarde

<!-- 导入wxs逻辑 -->
<wxs src="../../wxs/price.wxs" module="p"></wxs>

3. Utilizar en la etiqueta correspondiente:

<l-price 
    value="{
   
   {p.showPrice(data.price,data.discount_price).price}}">
</l-price>
<l-price  
    wx:if="{
   
   {p.cutPrice(data.price,data.discount_price).display}}" 
    deleted 
    value="{
   
   {p.cutPrice(data.price,data.discount_price).price}}">
</l-price>

Escriba directamente debajo de wxml:

<script> similar a html se escribe a continuación:

<l-price 
    value="{
   
   {p.showPrice(data.price,data.discount_price).price}}">
</l-price>
<l-price  
    wx:if="{
   
   {p.cutPrice(data.price,data.discount_price).display}}" 
    deleted 
    value="{
   
   {p.cutPrice(data.price,data.discount_price).price}}">
</l-price>

<wxs module="p">
// 如果不进行函数处理，当只有一个原价时，它会将原价也打上删除线，所以必须用该逻辑实现

// 最终要显示的价格
function showPrice(price, discountPrice) {
    if (!discountPrice) {
        return {
            price: price,
            display: true
        }
    } else {
        return {
            price: discountPrice,
            display: true
        }
    }
}

// 显示有切割线的那个价格
function cutPrice(price, discountPrice) {
    if (discountPrice) {
        return {
            price: price,
            display: true
        }
    } else {
        return {
            price: '',
            display: false
        }
    }
}
// 导出这两个函数
module.exports = {
    showPrice: showPrice,
    cutPrice: cutPrice
}
</wxs>