微信小程序 - 按钮文本框 “giao-text”

新手学堂024

微信小程序 - 按钮文本框 “giao-text”,第1张

最近因为体验了微信小程序 “百万工具箱” 里面的正则表达式工具,感觉到手机端输入正则表达式中的特殊字符十分的繁琐(反人类)。思前想后,决定撸一个可以解决繁琐输入的文本框组件。

不多说,先上开源地址吧:

npm https://wwwnpmjscom/package/giao-text

github https://githubcom/oloshe/giao-text

普通字符使用自带输入法输入,正则表达式常用字符(如:\ | $ ^ )利用组件提供快速输入。

理清大概流程之后,先从左侧(focus in input)入手。

在这种情况下 setText 必须等两个函数都调用完毕再调用,因为 setText的两个参数要分别从 blur 和 tap 事件获取。那么确认一下顺序,通过赋值的方法把第一个参数存起来,到第二个事件调用的时候再执行 setText 函数不就行了?

如果这时你按照这个结果去设计,你就掉坑了! 手机调试时输出的结果刚好时相反的! 所以必须不管哪个函数先调用,都要等到两个函数调用完毕再执行 setText。所以在某一个函数加 if 判断是不可行的。但是在两边都加 if 判断又显得十分地不优雅,那怎么办呢?

_blurEvent, _tapEvent 监听器中 setTimeout 的作用是及时清空事件状态,200为该事件时存在时长,作用是让 blur 和 tap 事件的时间误差增大到 200ms,这样不管谁先谁后,两个函数在这 200ms 内都执行了就调用 setText 方法。

ps:如果在这期间某个方法执行多次也不会造成错误,都不会出错,因为数据都存在。

解决了左侧(focus in input)的问题,右侧(focus not in input)的问题就迎刃而解,只需要在 _text 监听器时判断是否有焦点,有焦点就是左侧的问题,如果没有焦点,则直接执行 setText 方法,因为他并不需要等待 blur 函数 或者 _cursor 的值,因为焦点不在输入框上,不会触发 blur 事件,而 cursor 的值直接取即可,cursor 值不会清除。

至此,初定的需求已经解决了。该组件将会不断完善,一直在往可拓展性、实用性的方向发展。

该组件目前解锁了很多实用有趣的功能!将会在 微信小程序“百万工具箱” 最新版本的 正则表达式 中应用,感兴趣的小伙伴欢迎前来一看!

微信小程序的文本,要具有长按复制功能,必须满足两个条件:

1小程序文本要在 标签内;

2小程序 标签要有 selectable 属性。

例如:

<text selectable='true'>文本</text>

1

1

下面一个例子是,解决小程序富文本组件 WxParse 不能长按选择的问题。在 wxParsewxml 中修改:

意思是在wxParse源码文件下 的wxParse文件下的wxParsewxml

-为要修改的代码行

+为修改后的代码行

<template name="WxEmojiView">

<view class="WxEmojiView wxParse-inline" style="{{itemstyleStr}}">

<block wx:for="{{itemtextArray}}" wx:key="">

- <block class="{{itemtext == '\\n' 'wxParse-hide':''}}" wx:if="{{itemnode == 'text'}}">{{itemtext}}</block>

+ <block class="{{itemtext == '\\n' 'wxParse-hide':''}}" wx:if="{{itemnode == 'text'}}">

+ <text selectable="true">{{itemtext}}</text>

+ </block>

<block wx:elif="{{itemnode == 'element'}}">

<image class="wxEmoji" src="{{itembaseSrc}}{{itemtext}}" />

</block>

</view>

</template>

1

2

3

4

5

6

7

8

9

10

11

12

13

1

2

3

4

5

6

7

8

9

10

11

12

13

微信小程序selectable='true'无复制效果解决

<text selectable></text>或<text selectable='{{true}}'>

在微信小程序内的文字无法长按复制,除了text节点以外。 

但是要在text标签内加一个“selectable”属性。 

< text selectable=’true’ >< text/>