hbuilderx 小程序分包_uniapp适配到微信小程序注意事项

uniapp我也是第一次玩，官网说可以一次编码，多端发布。说实话，一开始我是怀疑的。不过，走到现在，app已经开发好、h5页面也接近完成。现在要生成小程序了，想想就很激动。。

在hbuilderx上运行到小程序，看到了熟悉的有胶囊的登录界面我很激动，登录进去一看。结果首页的按钮全没了，底部的tabbar也没了。。这还只是第一步，已经严重打击了我的信心。我有一种第一次吃螃蟹被夹住的感觉！好在uniapp还是挺靠谱，最后我翻遍了社区[1]资料，最终解决了这些问题。后面还遇到了其他的问题，我总结了一下，权当经验分享了。一次开发，多端发布，是真的名不虚传！

一、v-if避坑

看uniapp官方文档上，v-if[2]是支持多端支持的。小程序上仅支持微信小程序，用hbuilderx运行到小程序后就会变成微信的指令语法wx:if。这里有个坑，要特别注意！

v-if指令表达式

如果指令表达式为json对象，而只要你的对象的属性值中包含有null，那就要注意了，这里如果你按常规做法，如下：

//a对象

{

"b": "ss",

"c": null

}

你的代码运行到小程序是会有问题的，这个view组件会编译出但是无法渲染出来，在app及h5上是可以正常显示的。目前没找到是什么原因，有种说法是与js的上古时期的bug有关(typeof(null) == "object")。微信小程序的最新内核是基于他们自研的MWEB内核，应该也是基于chromium改造，不知道为啥这里反应很不相同？！诧异中。。

正确写法应该是这样：

//a对象

{

"b": "ss",

"c": null

}

二、view的zindex

这也是一个没找到原因的坑，我原来代码是这样，也是app、h5正常，但是运行到小程序，不行，点了没反应：

看得出来套了几层，最后怎么解决的？直接把在最里面的那个view的zindex值给稍大一些就可以了！微信小程序的套路没太明白怎么回事。如果你也遇到了，给zindex就可以了!

三、绑定对象的属性值不支持函数