内容简介:小程序出来那么久一直没有深入的开发,这次借着公司要做小程序,深入探索了一番,结果挖坑无数,当然,仅限挖坑,并没有填完。哈哈,就先mark一下。因为公司业务需求,这次小程序用的是关于
小程序出来那么久一直没有深入的开发,这次借着公司要做小程序,深入探索了一番,结果挖坑无数,当然,仅限挖坑,并没有填完。哈哈,就先mark一下。
因为公司业务需求,这次小程序用的是 mpvue + typescript
进行开发。
mpvue
相关的坑
关于 input
问题
因为设计想把输入框的交互做成这个样子:
那用原生的输入框是满足不了的,只能自己写组件咯。那么就用vue的方式写了个组件,结果发现, mpvue
关于 input
的问题还真不少。
- input 用v-modal输入时候闪烁
- 组件嵌套slot有问题
- input 不支持:type 和v-modal
- slot等标签不支持添加class,无法编译成wxss
- 嵌套组件,props有问题
- 修改slot时,不能热更新,只能重新npm run dev
这是github上相关的issue:
关于这个问题,试了上述的解决方法,但没有很好的解决(摔)。所以,自己用原生的方式重新撸了个组件。
小程序相关的坑
原生组件 canvas
问题
因为公司因为,小程序里有不少的图表数据需要展现,自然就是需要用到 cavas
,而 canvas
是属于原生组件,它的 z-index
无限大,一出现有弹窗内容需要把它覆盖就gg。
实际上是能解决的,只要使用 cover-view
当做遮罩层(一开始我还以为,需要把 cover-view
嵌套到原生组件的节点里),把弹窗内容一并放入 cover-view
里,但是很鸡肋的是, cover-view
里面包含的节点问题,以及一些样式问题是没办法实现。如果是弹窗内容很酷炫的话,那我只能建议让设计改设计稿。
<view> <canvas canvas-id="test"></canvas> // 这是一个遮罩层,为了覆盖住原生组件( 1.9.0及以上才支持 ) <cover-view> 这是一个遮罩层balabala </cover-view> // 官方给的demo <video> <cover-view> 这里也可以覆盖video里的内容 </cover-view> </video> <view> 复制代码
下面是我遇到的相关bug:
- 文本都要套上
cover-view
标签,不然排版错误。 -
cover-view
里的内容不支持设置 渐变,阴影 等样式。 - 自定义组件嵌套
cover-view
时,自定义组件的slot
及其父节点暂不支持通过wx:if
控制显隐,否则会导致cover-view
不显示 -
canvas
不能放在可滚动的列表里,在页面滑动时,在真机效果下,canvas
不能很好的跟着滚动,会出现刚开始滚动不动,再滚动就会卡着突然消失的非常糟糕的效果 -
cover-image
不支持bindtouchstart
等touch事件
总的来说,小程序的原生组件问题还是很多的,具体的实现都要在真机上测试才能看出各种问题。
使用echart-for-wx 的坑
- 解决弹窗覆盖canvas的问题,同样的是用上面的方法
解决方法:echart使用 cover-view
是要在节点 ec-canvas
后面添加,通过样式控制 cover-view
的对应位置
<ec-canvas class="canvas" id="mychart-dom-line" canvas-id="mychart-line" :ec="ecLine"> </ec-canvas> <cover-view class="cover-view">cover-vdddddddddddddiew</cover-view> 复制代码
-
echart
在使用rpx
为单位时,出现机型适配问题
echart
在不同机型上适配问题,使用单位为 px
时,适配是没问题的,但是使用 rpx
时,就会出现小机型适配问题,而使用mpvue的话,单位为 px
会转换成 rpx
,就会出现如下问题:
实际效果:
预期效果:
解决方法:
在 mpvue
里,使用内联样式(内联样式不会把 px
转成 rpx
),最好只固定高 emmmm....结果发现,大屏小屏手机下都会有适配问题,所以不能单纯的用内联样式写死 px
的大小(在GitHub上提了个issue,至今未回,怕死石沉大海啦)
canvas生成图片适配问题
因为不同手机大小以及其设备像素比devicePixelRatio不一致,再来小程序还出了自己的单位 rpx
,所以如果生成canvas是固定写死其宽高,这样是用问题的。
基本算法是:
canvas
绘制使用的是 px
单位,但不同设备的 px
是需要换算的,所以在组件中统一使用rpx单位,这里就涉及到单位怎么换算问题。 通过 wx.getSystemInfoSync
获取设备屏幕尺寸,从而得到比例,进而做转换,代码如下:
const sysInfo = wx.getSystemInfoSync(); const screenWidth = sysInfo.screenWidth; this.factor = screenWidth / 750; // 获取比例 function toPx(rpx) { // rpx转px return rpx * this.factor; } function toRpx(px) { // px转rpx return px / this.factor; }, 复制代码
但我知道大家都很懒,有轮子干嘛不用
实在不想算,可以用现成的轮子 小程序canvas生成图片
再来就是, cavans
转图片的问题
需要使用 canvasToTempFile
方法,因为 canvas
节点一定要存在才能获取到 canvas
的上下文进行绘图,所以只能把 canvas
放到页面可视区域之外。而且转换成图片时,要加个神奇的 setTimeout
的延时。最小延时为 300ms
,再小就不管用了。(为什么,我也不知道,o(╥﹏╥)o)
最后
这只是一点挖坑心得记录而已,还有更多的坑需要继续发掘。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 年中记录与挖坑
- Angular 从入坑到挖坑 - 表单控件概览
- Angular 从入坑到挖坑 - HTTP 请求概览
- 能量视角下的GAN模型:GAN=“挖坑”+“跳坑”
- Camera2挖坑日记---如何解决预览画面变形
- 【Vue】VueCli3 + Vue + typescript 挖坑记
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python编程实践
Jennifer Campbell、Paul Gries、Jason Montojo、Greg Wilson / 唐学韬 / 机械工业出版社华章公司 / 2011-12-31 / 49.00元
Python是当今世界流行的编程语言之一。本书共15章,通过一些短小精悍的交互式Python脚本帮助学生进行练习,并在这个过程中掌握诸如数据结构、排序和搜索算法、面向对象编程、数据库访问、图形用户界面等基本概念以及良好的程序设计风格。本书既是一本注重科学的计算机科学专业教材,也是一本目标明确的Python参考书。 本书语言风格言简意赅,图表丰富,简单实用,是一本优秀的Python入门级读物,......一起来看看 《Python编程实践》 这本书的介绍吧!