微信小程序知识点，踩过的坑小结

前言

微信小程序开发也有一段时间了，把开发过程中的一些知识点，踩过的坑记录一下

• 页面的 json 配置文件不能够使用注释 // ，使用注释会报错

  VM360:2 pages/accountSetting/accountSetting.json 文件解析错误 SyntaxError: Unexpected token / in JSON at position 39

  因此，需要的进行配置，不需要的就不进行配置

  • 正确

{
  "navigationBarTitleText": "账号设置"
}

- 错误

{
  "navigationBarTitleText": "账号设置"
  //
}

• true 和 false 是关键字，在 json 文件中进行配置的时候，不需要加引号 "", "true" 等价于 false

  • 正确

"enablePullDownRefresh": false

• wxss 样式文件中宽度和高度属性可以配合使用，如下

width: 100% - 40rpx;

• template 的数据传递，可以使用相同的数据名称进行映射，也可以自定义数据名称进行映射
  
  • 相同的数据名称
    “`html
    

    模板中使用的数据名称就是 `userInfoImage, userInfoName, userInfoClassName, userInfoKindName, userInfoEnteredStatus` 这些

    - 自定义数据名称
    ```html
 <template is="userInfoCard" data="{{userInfoImage:userImage, userInfoName, userInfoClassName, userInfoKindName, userInfoEnteredStatus}}"></template>   

`userInfoImage` 是模板使用到的数据
`userImage` 是js中传递过来的数据

• 自定义模板中使用到的样式需要在 app.wxss 中引入
  “`c
  @import ‘style/weui.wxss’;
  @import ‘template/nullData/nullData.wxss’;
  @import ‘template/common.wxss’;

- 路径
    - `../` 表示上一级目录
    - `./` 表示当前目录
    - `/` 表示根目录
    - 不同js之间相互调用的时候，根据“目标文件”相对“当前文件”路径进行处理

- `wxml` 文件中加载图片时，三目运算符设置占位图片，需要加引号 `''`
    ```html
<image class="user-info-container-avatar" src="{{userInfoImage.length > 0 ? userInfoImage : '../../resources/images/user_placeholder.png'}}" mode='aspectFill'></image>

• wxml 设置颜色时，使用三目运算符设置颜色时，需要加引号 ''
  “`html
  style=”background-color:{{item.checked ? ‘#1296DB’ : white}};”

- 建议使用 that 代替 this ，`var that = this` ，
```javascript
      var that = this
      setTimeout(function () {
        that.globalEventTimeStamp = 0
        console.log("事件倒计时结束-------")
        console.log("全局时间戳为:" + that.globalEventTimeStamp)
     //这里使用的this，代表这个函数里面的内容, that 才是整个js内容
      }, 1000)




<div class="se-preview-section-delimiter"></div>

打印 this 如下：

ƒ () {
        that.globalEventTimeStamp = 0;
        console.log("事件倒计时结束-------");
        console.log("全局时间戳为:" + that.globalEventTimeStamp);
      }




<div class="se-preview-section-delimiter"></div>

打印 that 如下

e {globalEventTimeStamp: 0, onLaunch: ƒ, onShow: ƒ, onHide: ƒ, onUnlaunch: ƒ, …}




<div class="se-preview-section-delimiter"></div>

• flex布局中，利用flex属性auto、none进行相关的view的对齐;flex默认是none，当有空白内容时，不会进行填充

• 设置page背景色

//在app/wxss是全局设置，在某个page下设置只针对这个页面
page {
    background-color: rgb(239, 239, 244);
} 




<div class="se-preview-section-delimiter"></div>

• 覆盖系统组件样式
  如 button

/* 覆盖button边框样式  */
button::after {
    border-color: #3E76F6;
}




<div class="se-preview-section-delimiter"></div>

• 设置css属性为position:fixed后让内容居中方式: 子元素需要设置 margin:0 auto

.bottom-tips-container {
  position: fixed;
  bottom: 92rpx;
  left: 0;
  right: 0;
} 
.bottom-tips {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 570rpx;
  height: 82rpx;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}




<div class="se-preview-section-delimiter"></div>

• url中的数字，都会被诶转化为字符串, 如 2 -> “2”

• wx:if 和 block wx:if 对比

  • block wx:if 不会控制 view 的渲染，显示和隐藏，即已经显示了的 view 及时条件为 false ，block 标签下的内容也“不会隐藏”
  • wx:if 控制 view 的渲染，显示和隐藏，即已经显示了的 view 及时条件为 false ，wx:if 标签下的内容“会隐藏”

• 角标设置, 父容器设置为 relative，角标容器设置为 absolute
  使用图片

.user-info-current {
  position: relative;
  align-self: flex-start;
  top: -20rpx;
  /*因为父容器设置了padding，所以需要向上偏移-20rpx  */
}
.user-info-container-corner-mask {
  width: 114rpx;
  height: 114rpx;
  position: absolute;
  top: 0;
}




<div class="se-preview-section-delimiter"></div>

• 阴影：

.box-shadow-6{  
    box-shadow:-10px 0 10px red, /*左边阴影*/  
    10px 0 10px yellow, /*右边阴影*/  
    0 -10px 10px blue, /*顶部阴影*/  
    0 10px 10px green; /*底边阴影*/  
} 

• 文字对齐 text-align 和 margin 冲突，和 padding 不冲突

• width属性，可以设置 '40%' 有效，设置为0.4无效，这个可以拥有动态设置进度，如直播答题的答对人数背景色

• cover-view 内容为文字的时候，对于在 live-pusher 或者 live-player 在上面使用 ，如果 font-size 未设置，则不会显示，普通view上面使用，及时不设置font-size，也会显示