微信小程序系列（十）：wxs的使用

上面一讲，我们讲到如何让子子组件传参至父组件

下面开始讲解wxs的使用

为什么会有wxs？wxs主要用来通过JavaScript处理数据

使用wxs的两种方式

1. 创建一个文件夹，新建一个***.wxs文件，然后调用
2. 直接在js文件中使用wxs

下面将提供例子分别讲解这2种情况

1、独立的wxs文件

1.1、新建wxs文件夹和***.wxs文件

    function mainPrice(price,discountPrice){
        if(!discountPrice){
            return price
        }else{
            return discountPrice
        }
    }

    function slashedPrice(price,discountPrice){
    if(discountPrice){
        return price
    }else{
        return
    }
}

module.exports ={
    mainPrice:mainPrice,
    slashedPrice:slashedPrice
}

2、调用wxs

2.1 引入wxs文件并调用方法

module=”***”，调用时就用***.方法名

<wxs src="../../wxs/price.wxs" module="p"></wxs>
###调用方法
value="{{p.mainPrice(data.price,data.discount_price)}}

2.2、直接在js文件中定义wxs

<view bind:tap="onTap" class="container {{c.statusStyle(cell.status).outer}}" >
    <view class="inner-container {{c.statusStyle(cell.status).inner}}">
        <text>{{cell.title}}</text>
    </view>
</view>

<wxs module="c">
    function statusStyle(status){
        // status = 'selected'
        if(status==='forbidden'){
            return {
                outer:'forbidden',
                inner:''
            }
        }
        if(status==='selected'){
            return {
                outer:'s-outer',
                inner:'s-inner'
            }
        }
    }
    module.exports.statusStyle=statusStyle
</wxs>

完成

小程序常用函数：wx.showToast 相当于alter