微信小程式專案筆記

一.限制元件的寬高比(以寬高比為2:1為例)

1.父元件指定以下屬性:

position: relative;
width: 100%;
padding-top: 50%;

2.子元件指定以下屬性:

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

二.當元件顯示文字內容不全時,用省略號替代

overflow: hidden;
word-break: break-all;
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical;

三.margin與padding的省略寫法

如果設定了4個值,則依次是 “左” “上” “右” “下” 的值
如果設定了3個值,則認為省略了左邊,省略的”左”值等於”右”
如果設定了2個值,則認為省略了左邊和下邊,省略的”左”值等於”右”,省略的”下”值等於”上”
如果設定了1個值,則 “左” “上” “右” “下” 的值都等於設定的值

四.transition: property duration timing-function delay

property:規定設定過渡效果的 CSS 屬性的名稱
duration:規定完成過渡效果需要多少秒或毫秒
timing-function:規定速度效果的速度曲線
delay:定義過渡效果何時開始

五.設定視窗背景色

page {
    background-color: #f2f2f2;
    height: 100%;
}

六.在view元件的前面或者後面插入內容,並居中顯示

content: 'A';  /* 插入的內容為A */
/* 
 position:relative 元件的位置引數由其父元件和父元件的寬高決定
 position:absolute 元件的位置引數由自己和自身的寬高決定
*/
position: absolute;
top: 50%;  /* top為demo-text-1的高度的一半 */
left: 50%; /* left為demo-text-1的寬度的一半 */
transform: translate(-50%, -50%);   /* 分別向上和向左平移插入的內容高度和寬度的一半 */
 

七.保證設定的padding值不會影響元件的寬高

box-sizing: border-box;

八.請求圖片的url,並將返回的arraybuffer圖片資訊轉為base64顯示

wx.request({
  url: "圖片url",
  data: {},
  header: {
    'content-type': 'image/jpeg',
  },
  method: "POST",
  responseType: "arraybuffer",
  success: function (result) {
    var base64 = "data:image/png;base64," + wx.arrayBufferToBase64(result.data)
  },

  fail: function ({ errMsg }) {
    console.log('request fail', errMsg)
  }
})

九.獲取網路請求中的sessionId

success: function (result) {
    var sessionId = result.header["Set-Cookie"].split(';')[0];  
}

十.在http請求頭中新增sessionId

wx.request({
  url: config.loginUrl,
  header: { 
    "Cookie": sessionId
  }
})

十一.”==”和”===”的區別

“==”:代表相同
“===”:代表嚴格相同
當進行雙等號比較時候： 先檢查兩個運算元資料型別，如果相同， 則進行===比較， 如果不同， 則願意為你進行一次型別轉換， 轉換成相同型別後再進行比較， 而===比較時， 如果型別不同，直接就是false

十二.重寫checkbox的樣式

/*  重寫 checkbox 樣式  */
/* 未選中的 背景樣式 */
checkbox .wx-checkbox-input{
   border-radius: 50%;/* 圓角 */
   width: 34rpx; /* 背景的寬 */
   height: 34rpx; /* 背景的高 */
}
/* 選中後的 背景樣式 （紅色背景 無邊框 可根據UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border-radius: 50%;/* 圓角 */
   border-color: #bd0000;
   background: #bd0000;
}
/* 選中後的 對勾樣式 （白色對勾 可根據UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border-radius: 50%;/* 圓角 */
   width: 34rpx;/* 選中後對勾大小，不要超過背景的尺寸 */
   height: 34rpx;/* 選中後對勾大小，不要超過背景的尺寸 */
   line-height: 34rpx;
   text-align: center;
   font-size:24rpx; /* 對勾大小 24rpx */
   color:#fff; /* 對勾顏色 白色 */
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}

十三.設定元件不隨頁面的滾動而滾動

position: fixed;
z-index: 5;
width: 100%;
height: 88rpx;

十四.微信小程式中使用字型圖示庫

在阿里巴巴向量圖示庫下載需要的圖示,點選下載程式碼，將下載後的download.zip解壓
進入https://transfonter.org/平臺，將ttf格式轉化為base64格式，注意選中 Base64 encode 然後點選convert轉換並下載壓縮檔案
開啟剛剛我們經過轉換的解壓出來的檔案，找到stylesheet.css，將其中的內容全部複製到wxss檔案中（在哪使用在哪加入）
開啟沒有轉化過的download檔案中的iconfont.css檔案，將中除了@font-face部分的其他所有程式碼複製到wxss中
在wxml中使用字型圖示直接使用class即可（在wxss中每個字型圖示對應一個class）