先上一个社区地址developers.weixin.qq.com/community/h…
1. css样式问题
遇到了页面样式底部按钮写了定位之后，width给的是100%，但是按钮会在不同机型下超过100%的下面会出现滚动条出现空白，我给page了130%。自己的问题，写页面咋能老用定位，用版心控制。而且是因为我自己给背景给了container而不是page，给了page就好了。还是适配问题，还没解决,要获取手机型号来判断才可以。
2.命名方法
（1）大驼峰 SingleLady 两个单词第一个字母都大写 类名用这个
（2）小驼峰 singleLady 第一个单词的首字母小写 方法名、参数名、成员变量、局部变量
（3）蛇形命名 single_lady 用 “_” 连接 测试方法名、常量、枚举名称
（4）串式命名 single-lady 用 “—” 连接 文件名字
3. input的样式改写
caret-color: #FFE413; 用来改变input输入框光标的颜色。
outline-style: none ; 取消点击之后外边框
border: 0px; 取消边框
font-size：25px; 设置里面的字体大小
padding来改变宽高
input type=”text” placeholder=”输入框默认内容”
/* 点击之后的发光效果*/
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
复制代码4.微信小程序中改写原本的checkbox的样式
先改写源码的class样式（自用）
/*checkbox 选项框大小 */
checkbox .wx-checkbox-input {
width: 34rpx;
height: 34rpx;
border-radius: 50%;
border: none;
}
/*checkbox选中后样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #FE2C55;
}
/*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);
}
复制代码5.设置字间距
letter-spacing:5rpx; 字间距
6.background-image不显示背景图。
小程序在css样式文件里面直接 background-image引入本地背景图是不生效的
三种个办法解决这个问题：
1.将路径改成可以直接访问的绝对路径（没试过）
background-image: url("http://pic20.photophoto.cn/20110902/0034034471873095_b.jpg");
复制代码2.直接用image标签代替样式背景图
原生小程序：
<image src='https://juejin.cn/image/code.jpg'></image>
3.直接在标签上写入样式 我觉得这个最好！
<view class="header" style="background-image: url('/static/image/bg.jpg')"></view>
复制代码7.微信小程序绑定事件
可以用两种方法来绑定事件 ，bind绑定，catch绑定可以阻止事件冒泡。
1.屏幕事件
tap 是点击事件
longtap 是长按事件
touchstart 是触摸开始事件
touchend 触摸结束事件
input事件
bindInput 绑定input事件 ，监听键盘的onchange事件，写一个返回一个value
bindblur 失去焦点之后value
8. checkbox选中判断value
<radio-group class="radio" bindchange="choose" >//这里绑定的是事件
<label for="checkbox" > //绑定checkbox
<checkbox value="1"></checkbox> //设置他选中值为1还可以是别的没选中是空
</label>
</radio-group>
choose(e){
this.setData({
choose:e.detail.value //存他的value
})
},
复制代码9. 手机校验、身份证号码校验
身份证号码校验
<input placeholder="请输入身份证号" type="idcard" bindblur="idVer" maxlength="18"></input>
复制代码idVer(e) {
const idValue = e.detail.value
this.setData({
idCard: idValue
})
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (reg.test(this.data.idCard) === false) {
wx.showToast({
title: '身份证号码有误',
icon: 'error'
})
} else {
}
},
复制代码手机号码校验
<input placeholder="输入手机号" bindblur="phoneNum" maxlength="11" type="number"> </input>
复制代码phoneNum(e){
this.setData({
phoneNumber:e.detail.value
})
const reg = /^1[3|4|5|7|8][0-9]{9}$/ // /^1[0-9]{10}$/校验1开头的
if (reg.test(this.data.phoneNumber) === false) {
wx.showToast({
title: '手机号码有误',
icon: 'error'
})
} else {
}
},
复制代码10.按钮多级选中切换
互相之间独立不干扰。
页面
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">申请讲师</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">审核结果</view>
</view>
复制代码样式
.swiper-tab {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 80rpx;
background: #fff;
margin-bottom: 12rpx;
}
.swiper-tab-list {
font-size: 28rpx;
color: #333;
position: relative;
width: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.on {
color: #47c390;
}
复制代码逻辑
/**
* 点击tab切换
*/
swichNav: function(e) {
console.log(e.target.dataset.current)
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
复制代码11.单选按钮切换
原理是给按钮一个data-current的值，在js中判断他的值点击是否相同，来切换样式
切换按钮
h5
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">申请讲师</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">审核结果</view>
</view>
复制代码css
.swiper-tab {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 80rpx;
background: #fff;
margin-bottom: 12rpx;
}
.swiper-tab-list {
font-size: 28rpx;
color: #333;
position: relative;
width: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.on {
color: #47c390;
}
复制代码js
/**
* 点击tab切换
*/
swichNav: function(e) {
console.log(e.target.dataset.current)
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
复制代码12.判断一个空对象
JSON.stringify(data)==="{}"
复制代码来判断是不是等于空对象。
—-还可以遍历去判断。
13.微信条件渲染
wx:if=”{{条件语句}}”
wx:else=”” 除去上面剩下的条件，比如男女
14.多重if else 嵌套
15. &&和||
js中的&&和||本质
进行布尔值的且和或的运算。
在javascript中：
以下内容会被当成false处理：”” , false , 0 , null , undefined , NaN
其他都是true。注意：字符串”false”也会被当做true处理，在未转型的情况下他是字符串，属于一个对
象，所以是true。
所以：
a || b：如果a是true，那么b不管是true还是false，都返回true。因此不用判断b了，这个时候刚好判断到
a，因此返回a。
如果a是false，那么就要判断b，如果b是true，那么返回true，如果b是false，返回false，其实不就是返
回b了吗。
a && b：如果a是false，那么b不管是true还是false，都返回false，因此不用判断b了，这个时候刚好判断
到a，因此返回a。
如果a是true，那么就要在判断b，和刚刚一样，不管b是true是false，都返回b。
16.子页面穿父页面值
实际上是吧子页面的this指向父页面。直接在父页面的data里面存值。
17.页面拼接数据
地址？“名字=”+变量
在子页面中onLoad中options来那数据
18. 图片自适应model
mode：widthFix; 只能在小程序里面使用。
19.微信修改默认的input的样式
20.修改radio的样式
radio-group .wx-radio-input .wx-radio-input-checked::before{
border-radiius:50%;
text-algin:center;
color:#fff;
font-size:30rpx;
transform:translate(-50%,-50%) scale(1);
-webit-transfrom:transform:translate(-50%,-50%) scale(1);
}
复制代码
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
