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

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

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

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

npm https://www.npmjs.com/package/giao-text

github https://github.com/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 值不会清除。

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

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

在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题,但是在ios下面识别不出来。

因为IOS下面不能识别这种格式,需要用2018/05/30 00:00:00格式。可以使用正则表达式对做字符串替换,将短横替换为斜杠。var iosDate= date.replace(/-/g, '/')。

微信小程序最近被吐槽最多的一个更改,就是用户使用wx.getUserInfo(开发和体验版)时不会d出授权,正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮,然后再d出授权。

解法很长,请参考:

微信小程序不支持wx.getUserInfo授权的解决方法

getUserInfo兼容解决方案

方法一:rpn.js:使用rpn.js实现eval函数功能

*** 作链接:网页链接

方法二:

(1)使用Underscore.js: *** 作链接:网页链接

(2)使用Immutable.js: *** 作链接:网页链接

(3)使用UUID、Base64、Chance: *** 作链接:网页链接

扩展微信小程序框架功能(1)——Promise

ES6 对 Promise 有了原生的支持,但微信开发者工具更新版本(0.11.112200)后, 移除了开发者工具对 ES6 中Promise 特性原生的支持, 需要引入第三方的 Promise 库。

扩展微信小程序框架功能(2)——Generator

Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。

扩展微信小程序框架功能(3)——函数功能增强

Underscore.js 和 Lodash 是最常用的JavaScript库。

扩展微信小程序框架功能(4)——Immutable.js

Immutable.js 是 Facebook 开发的不可变数据集合。Immutable

Data(不可变数据)一旦创建就不能被修改。通过使用Immutable

Data,可以更容易的处理缓存、回退、数据变化检测等问题,应用开发更简单。

扩展微信小程序框架功能(5)——Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。

扩展微信小程序框架功能(6)—日期时间

Moment.js是一个JavaScript的日期、时间处理工具类,其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用,也可以在Node.js中。

扩展微信小程序框架功能(7)——正则表达式

XRegExp 是一个开源的 JavaScript库,提供一个参数化、可扩展的支持各种浏览器的正则表达式的实现库,支持附加语法、标志以及方法。

扩展微信小程序框架功能(8)——Xml处理

x2js是一个 实现 XML 与 JavaScript 对象之间相互转换的工具库。

扩展微信小程序框架功能(9)——加解密

node-uuid可以快速地生成符合规范 的 UUID。js-base64可以实现Base64编码和解码。crypto-js可以非常方便地在 JavaScript 进行加解密。

扩展微信小程序框架功能(10)——测试辅助

Chance是一个 JavaScript 随机数生成工具。Mock.js可以生成随机数据,拦截 Ajax 请求。

方法三:moment

*** 作链接:网页链接


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/11013887.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-13
下一篇2023-05-13

发表评论

登录后才能评论

评论列表(0条)

    保存