小程序開發筆記

1，map等原生組件層級是最高的，要想在上面覆蓋其餘元素，要用cover-text 或者 cover-view組件

 

2, 使用cover-view時要注意fixed定位問題，若是有滾動區域，例如新聞列表等，在下拉刷新或點擊分頁等行爲加載新數據後，定位的cover-view可能會卡在以前的位置，就是不會固定在底部，暫時這個問題只出現蘋果手機上。

解決方法：滾動的區域換成 scroll-view 組件 ，這樣就能夠解決這個問題。       參考連接：http://html51.com/info-53347-1/

 

3, 圖片轉base64的方法,用wx.chooseImage（）方法選擇圖片後，獲得 res.tempFilePaths 的本地路徑 

let url = 'data:image/jpg;base64,'+wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")   //用這個方法能夠獲得base64碼

 

4, 微信有時請求不到後端接口

wx.request({
      url: 'https://h5.houjt.com/userproject/carlsberg/common/controllers/uf.php?command=3', 
      data: data,
      method:'post',
      header: {
        "Content-Type": "application/x-www-form-urlencoded"     //要把頭部的設置改改就行
      },
      success(res) {
        // console.log(res.data)
       
      }
    })

 

5,要想調起受權, 獲取用戶信息 ，必需要用 button open-type = getUserInfo 

 

6, 修改radio組件的樣式

* radio未選中時樣式 */ 

radio .wx-radio-input{ 
  /* 自定義樣式.... */
    height: 40rpx; 
    width: 40rpx;
    margin-top: -4rpx;
    border-radius: 50%;
    border: 2rpx solid #999;
    background: transparent;
 }



/* 選中後的 背景樣式 （紅色背景 無邊框 可根據UI需求本身修改） */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background: red;
}
/* 選中後的 對勾樣式 （白色對勾 可根據UI需求本身修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50%;/* 圓角 */
   width: 40rpx; /* 選中後對勾大小，不要超過背景的尺寸 */
   height: 40rpx; /* 選中後對勾大小，不要超過背景的尺寸 */
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx; /* 對勾大小 30rpx */
   color:#fff; /* 對勾顏色 白色 */
   background: #f00;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}
--------------------- 
做者：靜默思想 
來源：CSDN 
原文：https://blog.csdn.net/weixin_41871290/article/details/82686719 
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

 

修改checkbox樣式

/*checkbox 總體大小  */
checkbox {
  width: 240rpx;
  height: 90rpx;
}
/*checkbox 選項框大小  */
checkbox .wx-checkbox-input {
  width: 50rpx;
  height: 50rpx;
}
/*checkbox選中後樣式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #FF525C;
}
/*checkbox選中後圖標樣式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

 

 

 

 

7，阻止事件冒泡 綁定事件時將 bindtap 改爲 catchtap