浅析微信小程序wxs传值undefined

背景

在一次代码重构中，发现有一个样式在多处都有应用，因此将其抽离出来，写成了template，然后在不同的地方调用，提高代码复用率。

现象

在其中一个页面引用的时候，UI样式展示正常，但是在Console中却发现报了如下错误：

引用代码如下：

<view class="top-area">
    <template is="topInfo" data="{{...myself}}"></template>
</view>

当时内心状态如下

这是怎么回事儿？之前使用for进行列表渲染的时候明明一切正常，怎么到这里就报错了呢？再三检查写法没有问题之后，打开了官方文档，去寻求一波答案。

原因

在翻看官方文档之后，发现了如下内容：

大概流程就是：微信小程序一个page在加载的时候，首先会根据JSON文件生成一个界面，然后去加载WXML和WXSS，最后去加载js。

到这里是不是就明白为啥报错了？

我在onLoad中通过接口获取myself相关信息，但是页面渲染却是在它之前，而我又没有在Page的data中设置默认数据，这个时候，通过data传递的myself肯定是undefined，因此在WXML中通过wxs对数据进行处理的时候，wxs接收到的数据也是undefined。

解决方案

原因既然知道了，那也就好解决了，只需要在加载的时候，加一个判断即可，代码如下：

<view class="top-area">
    <template wx:if="{{myself !== undefined}}"
            is="topInfo"
            data="{{...myself}}">
    </template>
</view>

再次运行查看，解决！