微信小程序（组件--表单：交互控件）

注意：confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。

场景：当填写项较多时，可能超出当前屏幕，此时需要对弹起的软键盘做些处理

案例：

bindconfirmFn(option){
console.log(option)
},

输入“哈哈”点击搜索

input输入框现有bug：

部分微信版本placeholder 在聚焦时出现重影问题
部分机型 focus 属性设置无效
input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family
textarea多行输入框组件

应用场景：发表评论或发布帖子，点击按钮跳到评论页面。

评论

commentPage(){
wx.navigateTo({
url: ‘comment/comment’,
})
},

发布评论页面代码块：

取消 发表

.commentArea{
width: 100%;
height: 300rpx;
padding: 20rpx 5%;
box-sizing: border-box;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.commentArea textarea{
display: block;
width: 100%;
height: 100%;
padding: 10rpx;
box-sizing: border-box;
position: relative;
}
.commentArea textarea::after{
content: “”;
position: absolute;
left:0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid #ddd;
transform: scale(0.5,0.5);
transform-origin: 0 0;
}
.commentArea button{
display: inline-block;
font-size: 30rpx;
margin: 20rpx 0;
line-height: 50rpx;
color: white;
}

案例：

inputFn(option){
console.log(option)
},

案例：

comfirmFn(option){
console.log(option)
},

form表单组件
作用：将组件内的用户输入的switch input checkbox slider radio picker 提交

注意：当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

form-type触发表单提交/重置操作

form-type 属性值

form表单组件–提交评论操作

取消 发表

submitFn(option){
console.log(option)
},

注意：
提交表单时，必要在需要提交信息的表单组件上，加上 name 来作为 key，否则会获取不到相关信息。
接下来做些完善，评论完毕后弹框提示，然后返回上一页面。

完善一：

submitFn(option){
wx.showToast({
title: ‘评论成功’,
duration:3000,
success(){
setTimeout(function(){
wx.navigateBack({
delta:1
})
},2000)
}
})
},

接下来接着做完善，提交时验证最少10个字，否则弹框提示

完善二：

submitFn(option){
if(option.detail.value.textarea.length<10){
wx.showToast({
icon:‘none’,
title: ‘最少10个字’,
})
return false;
}else{
wx.showToast({
title: ‘评论成功’,
duration:3000,
success(){
setTimeout(function(){
wx.navigateBack({
delta:1
})
},1500)
}
})
}
},

接下来接着做完善，输入字体时，实时监听目前输入多少字

完善三：
①实时获取输入时字体数量

inputFn(option){
console.log(option)
},

data: {
fontCount:0
},

.fontCountClass{
position: absolute;
right: 45rpx;
bottom: 20rpx;
color: #ddd;
font-size: 30rpx;
}

inputFn(option){
console.log(option.detail.cursor);
this.setData({
fontCount: option.detail.cursor
})
},

实时获取输入时字体数。

form表单组件–取消评论操作

// 重置取消，返回上一页
resetFn(option){
wx.navigateBack({
delta:1
})
},

form表单组件–单选组件
radio-group单选选择器与radio单选项目
①radio-group单项选择器，内部由多个 radio 组成

②radio单选项目

radio-group单选选择器与radio单选项目：

性别：
男
女
中性

有时单选项目过多时，需要用到循环指令wx:for

爱好：
{{item.value}}

radioList:[
{ name: ‘swim’, value: ‘游泳’ },
{ name: ‘climb’, value: ‘爬山’, checked:true },
{ name: ‘fitness’, value: ‘健身’ },
{ name: ‘cg’, value: ‘唱歌’ }
]

radio-group单选选择器与radio单选项目

//单选按钮更改时触发
changeFn(option){
console.log(option)
},

form表单组件–关联组件label
label组件用来改进表单组件的可用性
作用：使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

文末

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，对此我整理了一些资料，需要的可以免费分享给大家

这里笔者分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

【视频教程】

天道酬勤，只要你想，大厂offer并不是遥不可及！希望本篇文章能为你带来帮助，如果有问题，请在评论区留言。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

• 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

[外链图片转存中…(img-NfIcyE4E-1715305308121)]

[外链图片转存中…(img-w3N2Sodr-1715305308121)]

【视频教程】

[外链图片转存中…(img-3DIpwW3I-1715305308121)]

天道酬勤，只要你想，大厂offer并不是遥不可及！希望本篇文章能为你带来帮助，如果有问题，请在评论区留言。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！