支付宝小程序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，组件关键源码如下：

1. <template>
2.     <view  : :>
3.         <textarea
4.             
5.             :value="innerValue"
6.             :
7.             :placeholder="placeholder"
8.             :placeholder-
9.             :placeholder-
10.             :disabled="disabled"
11.             :focus="focus"
12.             :autoHeight="autoHeight"
13.             :fixed="fixed"
14.             :cursorSpacing="cursorSpacing"
15.             :cursor="cursor"
16.             :showConfirmBar="showConfirmBar"
17.             :selectionStart="selectionStart"
18.             :selectionEnd="selectionEnd"
19.             :adjustPosition="adjustPosition"
20.             :disableDefaultPadding="disableDefaultPadding"
21.             :holdKeyboard="holdKeyboard"
22.             :maxlength="maxlength"
23.             :confirm-type="confirmType"
24.             :ignoreCompositionEvent="ignoreCompositionEvent"
25.             @focus="onFocus"
26.             @blur="onBlur"
27.             @linechange="onLinechange"
28.             @input="onInput"
29.             @confirm="onConfirm"
30.             @keyboardheightchange="onKeyboardheightchange"
31.             :showCount="count"
32.         ></textarea>
33.       
34.         <text
35.             
36.             :
37.             v-if="count"
38.             >{{ innerValue.length }}/{{ maxlength }}</text
39.         >
40.       
41.     </view>
42. </template>

复制代码

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

1. <template>
2.     <view  : :>
3.         <textarea
4.             
5.             :value="innerValue"
6.             :
7.             :placeholder="placeholder"
8.             :placeholder-
9.             :placeholder-
10.             :disabled="disabled"
11.             :focus="focus"
12.             :autoHeight="autoHeight"
13.             :fixed="fixed"
14.             :cursorSpacing="cursorSpacing"
15.             :cursor="cursor"
16.             :showConfirmBar="showConfirmBar"
17.             :selectionStart="selectionStart"
18.             :selectionEnd="selectionEnd"
19.             :adjustPosition="adjustPosition"
20.             :disableDefaultPadding="disableDefaultPadding"
21.             :holdKeyboard="holdKeyboard"
22.             :maxlength="maxlength"
23.             :confirm-type="confirmType"
24.             :ignoreCompositionEvent="ignoreCompositionEvent"
25.             @focus="onFocus"
26.             @blur="onBlur"
27.             @linechange="onLinechange"
28.             @input="onInput"
29.             @confirm="onConfirm"
30.             @keyboardheightchange="onKeyboardheightchange"
31.             :showCount="false"
32.         ></textarea>
33.         <text
34.             
35.             :
36.             v-if="count"
37.             >{{ innerValue.length }}/{{ maxlength }}</text
38.         >
39.     </view>
40. </template>

复制代码

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

思考

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！