前言
微信小程序开发也有一段时间了，把开发过程中的一些知识点，踩过的坑记录一下
-
页面的
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的数据传递，可以使用相同的数据名称进行映射，也可以自定义数据名称进行映射- 相同的数据名称
<template is="userInfoCard" data="{{userInfoImage, userInfoName, userInfoClassName, userInfoKindName, userInfoEnteredStatus}}"></template>
模板中使用的数据名称就是 userInfoImage, userInfoName, userInfoClassName, userInfoKindName, userInfoEnteredStatus 这些
- 自定义数据名称
<template is="userInfoCard" data="{{userInfoImage:userImage, userInfoName, userInfoClassName, userInfoKindName, userInfoEnteredStatus}}"></template>
`userInfoImage` 是模板使用到的数据
`userImage` 是js中传递过来的数据
- 自定义模板中使用到的样式需要在
app.wxss中引入
@import 'style/weui.wxss';
@import 'template/nullData/nullData.wxss';
@import 'template/common.wxss';
-
路径
-
../表示上一级目录 -
./表示当前目录 -
/表示根目录 - 不同js之间相互调用的时候，根据“目标文件”相对“当前文件”路径进行处理
-
-
wxml文件中加载图片时，三目运算符设置占位图片，需要加引号''
<image class="user-info-container-avatar" src="{{userInfoImage.length > 0 ? userInfoImage : '../../resources/images/user_placeholder.png'}}" mode='aspectFill'></image>
-
wxml设置颜色时，使用三目运算符设置颜色时，需要加引号''
style="background-color:{{item.checked ? '#1296DB' : white}};"
- 建议使用 that 代替 this ，
var that = this，
var that = this
setTimeout(function () {
that.globalEventTimeStamp = 0
console.log("事件倒计时结束-------")
console.log("全局时间戳为:" + that.globalEventTimeStamp)
//这里使用的this，代表这个函数里面的内容, that 才是整个js内容
}, 1000)
打印 this 如下：
ƒ () {
that.globalEventTimeStamp = 0;
console.log("事件倒计时结束-------");
console.log("全局时间戳为:" + that.globalEventTimeStamp);
}
打印 that 如下
e {globalEventTimeStamp: 0, onLaunch: ƒ, onShow: ƒ, onHide: ƒ, onUnlaunch: ƒ, …}
-
flex布局中，利用flex属性auto、none进行相关的view的对齐;flex默认是none，当有空白内容时，不会进行填充
- 设置
page背景色
//在app/wxss是全局设置，在某个page下设置只针对这个页面
page {
background-color: rgb(239, 239, 244);
}
- 覆盖系统组件样式
如button
/* 覆盖button边框样式 */
button::after {
border-color: #3E76F6;
}
- 设置
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;
}
-
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;
}
- 阴影：
.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，也会显示
网友评论