记录自己开发微信小程序时踩的坑

2,563 阅读6分钟
  1. 小程序复制文字问题:

    只有text组件可以复制,里面有一个selectable属性设置为true即可开启复制。但是ios端不行。     解决办法是:再加一个 user-selet属性为true。这两个都使用就可以解决问题!


  1. 小程序换行使用换行符没效果的问题     有一个css属性是white-space:pre-wrap; 既可!!

  1. 小程序的canvas设置字体间距在模拟器上是有ctx.canvas.style.行高的。但是在手机上是没有的。

    目前计算行高的方式就是逐个字的去写,每行的top设定不同。


  1. 小程序canvas换行问题,canvas的文字功能默认是不能换行的 目前我使用的方法是:计算单行每个字加一起的宽度和页面想要使用的宽度比较,如果即将大于宽度,就改变下一个字的left值和top值。

  1. 使用canvas时要注意算好dpr,因为canvas里面是没有rpx这种的单位的 可以这样计算一个适应屏幕的rpx: rpx = 手机屏幕宽度 / canvas宽度或者是设计稿的宽度; 后面的单位乘以 rpx 就是适应的单位了

  1. 小程序页面直接显示 canvas 时他的层级是最高的。设置 z-index 也没用 用 wx.canvasToTempFilePath() 把 canvas 转成图片就可以解决!

  2. 小程序ios转换时间戳时,对xxxx年-xx月这种以 - 来分割的会转换为 所以使用replace替换- xx.replace(/-/g,’/')

  3. 小程序输入框如果要输入框的高度要根据输入文字的内容而变化时。 就不能使用input组件了,要使用textare,设置他的maxlength,因为最大的高度为200左右,不一定能满足要求。然后设置textare的宽度。

  4. textare有一个属性auto-height自动增加高度,最高三行,需要自己再设置一下padding,不然输入框太小了。 

  5. 最主要的一点是textare有一个事件,bindlinechange(taro的为onLineChange)可以根据输入行的变化,返回行数和文字高度。

  6. Taro的小程序从二维码中获取要从index页面的onload会掉中拿到,如果拿到之后要跳转,跳转后还能返回首页,那这个跳转的操作就不要放在上面,因为onload只会执行一次。会导致下面的数据拿不到!!

  7. 微信小程序使用自定义表情的实现: 1. 怎么自定义表情?  [鬼脸] 对应=> 😜
      思路:     1.要用有一个json表,里面存储,对应的 描述文字(比如上面的“鬼脸”),和对应的一些其他的配置字段,表情对应的线上图片路径,是否上线啦,第几页等等。根据业务需求来。

    2.渲染到页面,并点击转为描述文字。就是先把json里面的数据,转换为相应数据的结构。 界面上的显示表情就是 把结构中的对应的图片路径,改变为img的src。并可以再外层套一个表情,定义一个属性,值为表情的描述文字! 0990CB9D-6996-4132-987A-E876D8D3C7BA.png 2.1 点击时的转换成表述文字。
F6B1CAD0-738C-4127-B827-5595566CADF3.png
3. 用户输入完成后,或者后台返回回来的文字其中相应的描述文字转换为表情图片。
     3.1 这里因为需要转为图片,所以需要用rich-text富文本。不能使用v-html(即使是基于vue的框架),因为删除时只会删除数据,而生成的img等标签不会被删除。
     3.2  文字转换方法:
AB94847D-5256-42F0-8A96-E13CAD848F80.png

2. 删除输入的表情
   1. 删除时,要判断是首页删除还是中间位置删除(就是找到光标的位置,删除时如果当前的光标位置和input的位数不同就是中间)。判断删除的字符是不是 ] ,如果是,再找到 [ (最近的),找不到就不是表情,找到了,去查对应的表里面十分有中间的内容。看看是否能找到匹配的    2. 这里是用的input事件
808FE366-A721-400C-82AC-9455676571F2.png

文本复制问题。

****1. 由于使用的是rich-text标签,而在小程序中是只有text标签可以用复制的属性,user-select 和 selectable 才能复制。但是rich-text没有,而且只设置css user-select:text;的话iOS无法复制。

  所以使用另一种方式复制,设定长按事件。但是trao的rich-text无法直接加longPress事件,不确定原生的行不行。可以给外面套一个标签,给标签设置longPress事件。

EAA2700F-97FD-48C5-A776-FC9EF043AE2F.png

  1. 关于小程序码的问题 正常扫描小程序进入的是正式版,手机没法边开发边调试。可以吧小程序码保存下来,用开发中工具的“通过二维码编译”进行调试!

  2. 弹出软键盘覆盖输入框的问题。 1.如果只是正常的一屏页面的话,给输入框加入adjustPosition属性和cursorSpacing属性即可。

  3. 如果是多屏页面的话,并且他固定在底部时,只这样设置会有问题,比如操作输入框时,内容会滚动。这时候需要把内容的容器从view换成scroll-view。动态设置scroll-y的值(比如是否获取焦点)。并设置adjustPosition为false。(不确定,根据项目设置)

  4. 对于字体需要手动设置默认字体大小,不然不同设备上的默认大小不同,例如:(如果一个tab切换,一个设置,一个不设置)会导致一些设备切换时抖动问题。

13.小程序视频设置封面的方法; 如果没有给出封面图的情况下,可以设置默认第一针,但官方没有给出,可以用initial-time=‘0.01' 这个属性,原理是默认加载视频。

  1. 点击tabbar进行回到顶部。

WX20210616-151625.png 其实官方也提供了api的。

  1. 小程序订阅消息的问题,小程序的订阅消息默认是让放在操作后的回调函数里面的前面的,不能放在一写请求后,否则会订阅不到,而有些东西订阅必须依赖于,例如请求接口后的回掉,这时候就会有些问题。  可以用vue watch监听。监听有接口回掉后,再在watch的回掉函数中,调用订阅消息的方法。

  2. 使用时间库时需要注意实现的时间是24小时制还是12小时制,以免出现问题.

  3. 通过扫码进入小程序,有两种一种是通过扫码小程序码进入。另一种是通过扫描不同二维码进入。他们的参数获取方式不一样。 虽然都是在 onLoad(options){} 中获取,但是 小程序码获取是在 options.sence 中。 普通二维码是在 options.q 中。 使用他们是都需要对 uri 行进 decode 转换回来 decodeURIComponent(option.q/sence)