微信小程序-模块化与过滤器

微信小程序的开发也支持类似模块化的操作，为我们进行代码开发工作提供了很多方便，下面简单列举一个小案例以供大家参考：

 

 

 

具体代码如下：

<!--index.wxml-->

 

<wxs module="filters" src="index.wxs"></wxs>

 

<swiper

indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}"

interval="{{interval}}"

duration="{{duration}}"

>

<block wx:for="{{imgUrls}}">

<swiper-item>

<image src="{{item}}" class="slide-image" width="355" height="150" />

</swiper-item>

</block>

</swiper>

 

<view class='content'>

<view class="pro" wx:for="{{proList}}">

<image src='/images/shop2.jpg'></image>

<view class='proName'>{{item.proName}}</view>

<view class='proPrice'>￥{{filters.toFix(item.proPrice, 2)}}</view>

</view>

</view>

 

// index.wxs

var filters = {

toFix: function(val, count){

return val.toFixed(count);

}

}

 

module.exports = {

toFix: filters.toFix

}

 

 

//index.js

//获取应用实例

const app = getApp()

 

Page({

data: {

imgUrls: [

'/images/banner1.jpg',

'/images/banner2.jpg',

'/images/banner3.jpg'

],

indicatorDots: true,

autoplay: true,

interval: 2000,

duration: 1000,

proList: [{

proName: "富安娜(FUANNA)",

proPrice: 468.03

}, {

proName: "2安娜(FUANNA)",

proPrice: 22

}, {

proName: "安娜3(FUANNA)",

proPrice: 333.1

}, {

proName: "安娜4(FUANNA)",

proPrice: 555.033

}, {

proName: "安娜5(FUANNA)",

proPrice: 88.036

}, {

proName: "安娜6(FUANNA)",

proPrice: 999.03888

}]

}

})

重点的地方已经用红色箭头以及红色文字着重点出来了，cp相应的代码直接替换和新增index.wxs文件，可以打开相应的调试器，方便进行代码的调试；