前言

微信小程式開發也有一段時間了，把開發過程中的一些知識點，踩過的坑記錄一下

• 頁面的 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，也會顯示