支付宝小程序textarea字数统计踩坑

前情

uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验也挺棒的，公司项目就是发布多端的项目，所以主推的是uni-app，同时uview-plus是uni-app比较有名的UI库，为高效开发我在公司项目我也引入了它

textarea是多行输入框表单组件，最近在做公司项目地址管理的时候，详细地址这一块是需要用户填写的，考虑到字数和方便交互，此处选用的就是多行输入框textarea，同时产品的要求控制字数在99个内，同时需要显示字数统计，uview-plus有封装up-textarea组件，所以此处使用的就是它

坑位

在显示统计字数的时候因为公司产品的强定制，重写了uview-plus封装的表单组件的一些样式，像背景色，字体颜色和边框什么的，但是在支付宝小程序端我想修改up-textarea统计字数颜色的时候发现我无能为力了，于是开始逛支付宝小程序社区和网上找寻答案，也问了AI，都没有找到可行的解决方法，最后直接找了支付小程序客服寻找技术支持，也没有解决

Why?

我发现在支付宝小程序上字数统计是textarea原生渲染的，而官方没有提供可调整的配置

解决方案

我看了view-plus的up-textarea源码，作者确实考虑到了支付宝小程序自有字数统计的功能，就对支付宝做了特别处理，但是作者应该是没有考虑到支付宝并没有提示修改它样式的API，组件关键源码如下：

<template>
    <view class="u-textarea" :class="textareaClass" :style="[textareaStyle]">
        <textarea
            class="u-textarea__field"
            :value="innerValue"
            :style="fieldStyle"
            :placeholder="placeholder"
            :placeholder-style="addStyle(placeholderStyle, typeof placeholderStyle === 'string' ? 'string' : 'object')"
            :placeholder-class="placeholderClass"
            :disabled="disabled"
            :focus="focus"
            :autoHeight="autoHeight"
            :fixed="fixed"
            :cursorSpacing="cursorSpacing"
            :cursor="cursor"
            :showConfirmBar="showConfirmBar"
            :selectionStart="selectionStart"
            :selectionEnd="selectionEnd"
            :adjustPosition="adjustPosition"
            :disableDefaultPadding="disableDefaultPadding"
            :holdKeyboard="holdKeyboard"
            :maxlength="maxlength"
            :confirm-type="confirmType"
            :ignoreCompositionEvent="ignoreCompositionEvent"
            @focus="onFocus"
            @blur="onBlur"
            @linechange="onLinechange"
            @input="onInput"
            @confirm="onConfirm"
            @keyboardheightchange="onKeyboardheightchange"
            :showCount="count"
        ></textarea>
      <!-- #ifndef MP-ALIPAY -->
        <text
            class="u-textarea__count"
            :style="{
                'background-color': disabled ? 'transparent' : '#fff',
            }"
            v-if="count"
            >{{ innerValue.length }}/{{ maxlength }}</text
        >
      <!-- #endif -->
    </view>
</template>

既然支付宝自带无法显示，为什么我们不直接干掉支付宝自带，直接使用uview-plus自带的了，说干就干，修改up-textarea组件源码，关键代码如下：

<template>
    <view class="u-textarea" :class="textareaClass" :style="[textareaStyle]">
        <textarea
            class="u-textarea__field"
            :value="innerValue"
            :style="fieldStyle"
            :placeholder="placeholder"
            :placeholder-style="addStyle(placeholderStyle, typeof placeholderStyle === 'string' ? 'string' : 'object')"
            :placeholder-class="placeholderClass"
            :disabled="disabled"
            :focus="focus"
            :autoHeight="autoHeight"
            :fixed="fixed"
            :cursorSpacing="cursorSpacing"
            :cursor="cursor"
            :showConfirmBar="showConfirmBar"
            :selectionStart="selectionStart"
            :selectionEnd="selectionEnd"
            :adjustPosition="adjustPosition"
            :disableDefaultPadding="disableDefaultPadding"
            :holdKeyboard="holdKeyboard"
            :maxlength="maxlength"
            :confirm-type="confirmType"
            :ignoreCompositionEvent="ignoreCompositionEvent"
            @focus="onFocus"
            @blur="onBlur"
            @linechange="onLinechange"
            @input="onInput"
            @confirm="onConfirm"
            @keyboardheightchange="onKeyboardheightchange"
            <!-- #ifdef MP-ALIPAY -->:showCount="false"<!-- #endif -->
        ></textarea>
        <text
            class="u-textarea__count"
            :style="{
                'background-color': disabled ? 'transparent' : '#fff',
            }"
            v-if="count"
            >{{ innerValue.length }}/{{ maxlength }}</text
        >
    </view>
</template>

这样就可以通过样式穿透修改字数统计的样式了，又完了一次小踩坑之旅

思考

在做小程序需求的时候，因为你依赖的就是它平台，对于一些你无法解决，小程序社区也找不到解决方案的，那就大胆寻求官方技术支持，如果得到官方确实有这样的限制，无法达到你的需求，你可以思考思考是否有什么方法可以绕过，如果实在不行，那就跟产品大胆说出遇到的困境，争取调整调整需求，其实对于做技术的每天都是踩坑的路上，但我真心希望所有人都一路生花，少踩坑