微信小程序的开发也支持类似模块化的操作，为我们进行代码开发工作提供了很多方便，下面简单列举一个小案例以供大家参考：
具体代码如下：
<!--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文件，可以打开相应的调试器，方便进行代码的调试；