微信小程序开发中遇到的问题笔记

微信小程序开发中遇到的问题

1 微信小程序设置 backgroundColor 无效

当我们在微信小程序 .wxss中设置 backgroundColor 时不生效。

错误：

.index-hd {
  padding: 80rpx;
  text-align: center;
  background-color: "black";
}

正确：

.index-hd {
  padding: 80rpx;
  text-align: center;
  background-color: rgb(0, 0, 0);
}

或者

.index-hd {
  padding: 80rpx;
  text-align: center;
  background-color: black;
}

2. 微信小程序–hidden不生效原因及解决方案

微信官方文档里有提到说hidden是所有组件都有的属性，但我实际编码中发现并不是这样的！！！！

例如如下布局：

    <view hidden="true" style="display:flex;flex-direction: row;">
        <text>text1</text>
        <text>text2</text>
    </view>

你会发现hidden没生效。经我实验发现hidden元素对块状布局才生效，所以这段代码里导致hidden没生效的罪魁祸首是display:flex。把这个去掉就可以了。

    <view hidden="true" style="flex-direction: row;">
        <text>text1</text>
        <text>text2</text>
    </view>

错误用法：

    <view wx:hidden="true" style="flex-direction: row;">
        <text>text1</text>
        <text>text2</text>
    </view>

3. 微信小程序hidden和wx：if区别

1. 按照我的理解：display：none 和 hidden 的作用一样，显示出来的结果是一致的，都是隐藏。
   display:none ： 隐藏，不占空间
   hidden : 隐藏，占用空间

2. hidden可以进行动态绑定，可以使用wx：if
   因为wx:if之中也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的，如果初始渲染条件为false,框架什么也不会做，只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多，组件始终都会被渲染，只是简单的控制显示和隐藏，一般来说，wx：if 有更高的切换消耗，而hidden有更高的初始渲染消耗，你可以根据自己的需求来调用。
   wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。

   <view hidden="{{true}}" style="flex-direction: row;">Hello</view>
   

   等同于

   <view hidden style="flex-direction: row;">Hello</view>
   

3. wx:if 是遇 true 显示，hidden 是遇 false 显示。
   wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。
   所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。
   如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
   最后：
   频繁切换：用 hidden。
   偶尔切换：用 wx:if。