在初次写微信小程序或者有vue.js基础而没写过微信小程序直接上手uni-app框架编译成微信小程序以及其他多端的项目，普遍都会遇到微信小程序textarea原生组件在真机调试样式穿透问题，（微信小程序官网关于textarea组件链接https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html）
直接上结构代码：
在data return函数中：
data(){
return {
isContentFocus: true,
isInputContentFocus: false,
}
}
代码截图：
在methods代码块执行的方法:
bindContentFocus(e) { // 点击事件
this.isContentFocus = false;
this.isInputContentFocus = true;
},
bindContentBlur(e) { // 失去焦点
this.isContentFocus = true;
this.isInputContentFocus = false;
},
onPageScroll() {
this.isContentFocus = true;
this.isInputContentFocus = false;
},
前提说明：根据自己的需求情况来做不同的解决方案。不过思路基本是一样，通俗讲我们常说的遮眼法，显示以及不显示的*切换。
思路：首先样式肯定先写好，所以不上样式代码！！页面在首次加载完毕后，将isContentFocus初始为true，isInputContentFocus为false，此时注意看结构，哪个模块显示以及不显示。此时textarea原生组件不显示状态，用假象模块显示，在用户点击textarea框时，执行bindContentFocus方法，将isContentFocus赋值为false，isInputContentFocus赋值为true。此时textarea原生组件显示状态，假象模块不显示，起到了显示以及不显示的*切换，在用户输入后离开焦点事件，将两个值重新赋值初始状态。onPageScroll方法是用于处理滚动时存在textarea原生组件穿透的问题，根据自己实际情况使用哈！技术不深，方法简单，希望帮助你们。