- ios不支持正则的断言的解决辛酸路程
需求:将文字转为语音并播放,文字内容有电话格式1234-12234343和时间格式9:00-18:30,类似如下字符串:"我们上班时间:9:00-18:30,电话是1234-12234343" 实现方法:用微信的同声传译插件。 遇到问题:同声传译插件会将电话号码的1234读出一千两百三十四,听起来很奇怪有木有?=<=。 解决方法:所以我想着将电话号码之间加上空格,写个正则(/\d/g," $&"),数字是一个一个的读了。 又遇到问题:时间9:00-18:30被分割成了 9: 0 0- 1 8: 3 0,转成语音后就是九零零一八三零,也很奇怪有木有?=<=。 再次解决方法:将时间格式写个正则(/(\d+):(\d+)-(\d+):(\d+)/g,"$1点$2分到$3点$4分"),简直完美,时间格式完美读了出来^-^ 又又遇到问题:处理时间的正则和电话的冲突了呀,那我电话的空格怎么加呢? 再再次解决方法:这个解决方法我研究了1天!终于写出来了,还用上了断言呢~ .replace(/(\d+):(\d+)-(\d+):(\d+)/g,"$1点$2分到$3点$4分").replace(/(?<!到)(?<!点)\d(?!点)(?!到)(?!分)/g, ' $&'),一共花了2天时间搞得正则,终于啊,成功了!迫不及待用手机扫开发版试试,听听那动人的语音结果。 又又又遇到问题:结果……手机打开一片空白,查了下微信社区,555,在ios上不支持,简直晴天霹雳,看下图官方的回复…… [图片] 再再再次解决方法:再次查社区,看到下方正义之光的回答,十分感谢这位卢霄霄同志!! [图片] 我的终极解决方案: /** * @param {传入的原始字符串} str */ dealTextToVoice(str) { // 将时间格式更换为中文 str = str.replace(/(\d+):(\d+)-(\d+):(\d+)/g, "$1点" + "$2分" + "到$3点" + "$4分") let patt = new RegExp("\\d{4}\.", "g") let result // 将3位以上的数字加空格,避免语音读出计数 while ((result = patt.exec(str)) != null) { let newNum = result[0].replace(/\d/g, '$& ') str = str.replace(result[0], newNum) } return str } 至此,完美解决~
2021-11-03 - 小程序取消橡皮筋回弹效果解决方案及坑总结
提到ios系统的橡皮筋效果,作为开发者是又爱又恨,有想要这个效果又有不想要的,无奈的是却没有一个简单的开关来设置这个效果是否开启。 最近在开发小程序时也遇到有关于ios橡皮筋回弹的问题,这里分两部分(取消橡皮筋回弹效果和因为这个效果遇到的坑)和大家分享一下。 取消IOS橡皮筋回弹效果的解决方案 1) 页面无滚动区域时,可通过页面json配置文件设置disableScroll:true禁止整个页面滚动,从而取消橡皮筋效果。 [代码]{ "disableScroll":true } [代码] 测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo1 2) 页面有滚动区域,滚动区域通过view模拟实现,然后在页面json配置文件设置disableScroll:true禁止整个页面滚动,从而取消橡皮筋效果。 [代码]json文件配置 { "disableScroll":true } view元素模拟实现滚动样式 { height: calc(100vh - 120rpx); //高度必须是固定的值 overflow-y: auto; } [代码] 不足之处在于view元素模拟的滚动区域滚动时不够连贯,没有scroll-view那种原生丝滑般的感觉。 测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo2 3) 页面有滚动区域,滚动区域使用scroll-view,这时通过disableScroll则无法实现,尝试设置一下scroll-view的scroll-y="{{false}}",上拉或下拉时居然不再触发橡皮筋的回弹啦,当然滚动区域也不能滚动。 小脑袋动一动,解决方法有啦! 通过设置一个变量scrollY动态控制滚动区域的滚动从而阻止回弹。 监听bindscrolltoupper\bindscrolltolower当scroll-view区域滚动到顶部或底部时候设置scrollY:false来关闭页面滚动,从而阻止回弹。 监听bindtouchstart\bindtouchmove 当用户反方向滑动的时候设置scrollY:true,再次开启页面滚动。 [代码]wxml滚动区域属性和事件处理,具体实现请点击测试代码链接 <scroll-view scroll-y="{{scrollY}}" class="list" upper-threshold="5" lower-threshold="5" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" bindtouchstart="touchstart" bindtouchmove="touchmove"> <view class="list-item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </scroll-view> [代码] 相对view模拟实现滚动区域,scroll-view滚动更丝滑,不过每次滚动到底部或顶部的时候,再反向滑动时由于再次开启scroll-view滚动会有操作卡顿的感觉,暂时没想到好的解决方法,有解决的大佬希望提供一下想法,一起学习下。 测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3 IOS橡皮筋效果遇到的坑 1) 操作左滑删除组件时上下移动,会触发橡皮筋效果导致页面抖动的问题 这个坑的严重程度看设计师的意愿了,反正我们团队目前是需要解决的,方案类似取消橡皮筋解决方案的第三种 在左滑的时候关闭scroll-view的滚动,取消时再次开启滚动 2) 如果页面顶部有置顶的横向滚动区域scroll-view,当页面滚动到底部时继续上拉会导致置顶头部消失,松开回弹后头部又会出现。 坑是社区里的朋友提出来的,我借了个iphone x 一预览,我嚓,还是真是个奇坑! 微信官方回复已复现正在解决中… 不想继续等下去的,暂时解决方法是 监听页面的滚动区域,当滚动到底部时设置顶部横向滚动scroll-view的scroll-x=false来解决。 写在最后 以上便是我在小程序开发中有关于ios橡皮筋回弹效果的分享,示例代码已上传github,可自行下载体验。 https://github.com/YuniorZen/minicode-debug/tree/master/minicode01 目前微信官方虽说已经着手解决(已两年)此类bug,但哪吒说 我命由我不由天,所以还是我们开发者多分享些解决方案自救来的快。 分享方案如有问题还望不吝指出,没有涉及到的坑也欢迎评论提出,一起学习和解决,后续也会基于此篇不断更新总结。
2021-01-14 - 引全局样式后Some selectors are not allowed in component?
[图片] 现象:自定义组件样式文件中引入了全局样式,会报“Some selectors are not allowed in component wxss, includi...”的警告 原因:全局样式中,对page标签进行了样式设置,写法: page { ... },使用了标签选择名选择器的写法。 推测:当取消引入全局样式或注释掉全局样式中page的样式设置,则无警告 问:希望保留对page的样式设置,还能在自定义组件中引入全局样式,不提示警告。
2020-01-04