微信小程序笔记

微信小程序项目笔记

一.限制组件的宽高比(以宽高比为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）

十五.view标签不会自动换行问题修复

width: 100%;
white-space: pre-line;
text-overflow: ellipsis;
word-break: keep-all;
word-wrap: break-word;
white-space: pre-line;