In the page of the applet wxml, we can use { {}} to write simple js expressions, such as ternary operators, etc., but for slightly more complex logic, we need to use functions to solve them. If written in js files Some of them are cumbersome and need to bind data, etc. At this time, wxs is equipped for use. wxs only supports ES5! ! !
1. Case description:
We will implement the logic of the price part in the figure below. There are two attributes price and discount_price in the phenomenon returned by the front end. When the discount price is null, only the original price will be displayed. When the discount price is not empty, the discount price will be displayed and the original price will be drawn. Wire.
Write in separate files:
1. Create a file with the suffix wxs, and write the function logic:
// 如果不进行函数处理，当只有一个原价时，它会将原价也打上删除线，所以必须用该逻辑实现
// 最终要显示的价格
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. Introduce it into wxml:
module is equivalent to the object to be operated later
<!-- 导入wxs逻辑 -->
<wxs src="../../wxs/price.wxs" module="p"></wxs>3. Use in the corresponding label:
<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>Write directly under wxml:
The html-like <script> is written below:
<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>