WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
问题一
使用wxs中方法返回undefined
简单介绍下应用场景:
我前端页面写死了个兑换列表(数据不是从接口获取),每个列表对应一个唯一ID,后台返回了一个数组,里面包含了用户已兑换的ID,这个时候通过wxs中写好的方法判断用户兑换了哪个列表,哪了列表展示出兑换成功的展示区域
WXML
<wxs src='../../utils/filter.wxs' module="util" />
<view class='section-wrap' wx:if="{{ysInfo}}"> <!-- 外层增加判断解决wxs方法返回undefined -->
<view class='list-item'> <!-- 此处N个列表项 只copy其中之一 -->
<image src='{{image}}/btjh-banner1.png' class='item-img'></image>
<!-- undefined -->
<view class='list-left row' data-test="{{util.test(ysInfo.theme,'PG'}}"}>
<block wx:if="{{util.test(ysInfo.theme,'PG')}}">
<image src='{{recSuc}}' class='complete-icon'></image>
<text class='left-text'>完成领取任务</text>
</block>
<block wx:else>
<image src='{{ysInfo.bdcount < 10?notReach:yesReach}}' class='reach-icon'></image>
<text class='left-text'>{{ysInfo.bdcount < 10?"您还没有达成哦!":"完美达成"}}</text>
</block>
</view>
</view>
</view>
filter.wxs
var test = function(ids,id){
var newIds = ids.join(',');
if(newIds.indexOf(id) != -1){
return true;
}else{
return false;
}
}
module.exports = {
test:test
}
我在通过 data-test 测试该方法返回值的时候 一直返回的是undefined,搞的我百思不得其姐(解),
找万能的度娘了解一下,后终于找到了原因
小程序先渲染页面之后再执行onLoad,所以渲染页面时使用的是data里初始化的值, 意味着还没加载数据,so外层增加判断即可解决返回undefined的问题,完美解决