微信小程序踩坑日记

最新推荐文章于 2024-04-28 11:54:28 发布
最新推荐文章于 2024-04-28 11:54:28 发布
阅读量296 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序 convas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_yanyan/article/details/94491145
版权

e’e* 2019-06-15 bug场景：四张海报，用同一个canvas画布，ctx.clearRect()无法清除使用ctx.drawImage()的图像。

解决方案：每张海报使用一个canvas
  • 2019-06-15 bug场景：不同机型，使用convas画出来的图片位置,和UI图位置不一样。
一：求出设备像素比
二：在canvas区域，canvas宽度 = 图片背景宽度/设备像素比
三：画图即可
原理：小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位，在绘制内容时所应用的单位仍然是 px【微信小程序canvas并没有完善，是个坑】
乐橙Web
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
踩不完的微信小程序的坑之【ctx.drawImage 绘制的画布，使用ctx.clearRect清除不了】
Dove言和
07-30 6709
canvasContext.clearRect 定义 清除画布上在该矩形区域内的内容。 Tip: clearRect 并非画一个白色的矩形在地址区域，而是清空 举个栗子： <canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/> 参数 参数 类型 说明 x...
canvas实现方块运动
sweetllh的博客
06-13 1084
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body > <canvas id="mycanvas" style="border: 1px solid #000;"></canvas> </body>
微信小程序踩坑记
03-29
作者为本站会员yuqy 本次开发微信小程序第一个版本，遇到如下问题： 关于小程序里引入iconfont 原有H5项目中iconfont.css里@font-face 引用的ttf等文件在小程序中不支持（小程序里请求资源都是https）， 解决方法：知乎上有篇文章建议使用工具将ttf文件转化为base64格式存储在本地； 具体可参考https://zhuanlan.zhihu.com/p/... 关于小程序里引入underscore 直接引入underscore会报错，需要修改underscore源码；underscore源码里，外层形式如下： //console.log(this) (func
canvas画布缩放和拖拽后无法清空所有区域
weixin_40153718的博客
03-21 646
当调用清空画布方法的时候，先对画布缩放和平移的画布区域进行恢复到初始化状态。先进行setTransform(1，0，0，1，0，0)，再进行clearRect()进行操作。canvas使用setTransform方法来实现画布的缩放，画布的拖拽。对canvas进行缩放或者拖拽之后会导致无法完全清除canvas区域内的元素，如图所示。
canvas 使用遇到过的问题
weixin_30338481的博客
07-24 204
使用ctx.clip()之后每次重绘都是同一张图片 刚开始思考是不是需要每次先清除画布再绘制 ctx.clearRect()发现还是不行 然后调整代码顺序 ,一行一行代码注释看是哪个的问题发现是clip()的问题 思考良久 后面想了一下 百度看一下clip()的语法 有网友说 试了一下...
canvas绘制圆制作吃豆豆，结果在计时器中加入clearRect也毫无作用，无法清除上一次绘制的动画
weixin_41277748的博客
05-14 576
canvas 简单绘制吃豆豆按理来说应该是这样的 可结果是这样的，不是你想象的样子 即使是在绘制之前添加了clearRect也不行，最终发现要在每个绘制之前加入ctx.beginPath();就可以了 以下为最终代码 html与scc部分 <style> canvas { width: 500px; height: 300px; border: 1px solid; } </style> &lt
微信小程序Canvas学习
处处掉坑
08-01 1577
以涂鸦为例： <canvas canvas-id='canvasId' class='myCanvas' bindtouchstart="touchStart" bindtouchmove="touchMove"></canvas> 1、获取画布的宽高 onLoad: function () { // 获取画布的宽、高 wx.createSelectorQuery().select('.myCanvas').boundingClientRect()..
小程序ctx.draw()安卓上不执行，点击无反应，微信开发者工具和苹果上可以
weixin_59803648的博客
09-24 985
小程序ctx.draw()安卓上不执行，点击无反应，微信开发者工具和苹果上可以
微信小程序踩坑录（canvas、post请求不生效、页面刷新）
weixin_34007020的博客
11-24 674
为什么80%的码农都做不了架构师？>>> ...
微信小程序提示wx.createCanvasContext方法已废弃的解决方案
TA远方
05-16 1万+
在微信开发工具上，打开小程序项目后，可能有遇到这么一个问题 使用wx.createCanvasContext 会提示此方法，基础库版本 2.9.0 起已废弃，请使用 Canvas 替换 💡 如何解决? 方法1，改成使用旧的基础库可能有性能问题，此项忽略; 方法2，手动查找替换代码，会发现要改动的地方可多了，此项忽略 方法3，手动改动次数最小，不知道有没有 有的，下面笔者TA远方提供以下源代码，请仔细看 'use strict'; export default class CanvasCont
微信小程序 小熊日记（截图+源码）
05-13
微信小程序 小熊日记（截图+源码）微信小程序 小熊日记（截图+源码）微信小程序 小熊日记（截图+源码）微信小程序 小熊日记（截图+源码）微信小程序 小熊日记（截图+源码）微信小程序 小熊日记（截图+源码）微信小...
碰撞:微信小程序踩坑集合
01-26
一、开发微信小程序遇到的坑 1、 {{}} 不能执行方法，只能处理简单的运算如 “+ - * /”，比如遇到遍历list，每个item的金额需要格式化，只能在js里预先格式化好再setData一遍( ╯□╰ ) 2、只能通过,只能通过,只能...
微信小程序踩坑
03-29
不支持important color不支持父级覆盖 如果视图滚动，则上层的vew背景色是半透明的，没法遮挡 事件绑定不支持delagate吧 wx.login 不支持断网设置，会很慢，只能超时 获取网络状态，不管有无网络都是会触发success，...
微信小程序踩坑之路
03-29
前段时间公司要求做了一个微信小程序，现在趁着还算空闲，总结一下小程序中所遇到的问题。有微信提供的文档接口和开发者工具，完成起来总是感觉那么畅快，但是在手机上预览 ...       一：踩坑之路 前段时间公司...
微信小程序扫普通二维码跳转
热门推荐
Mr_Yan的博客
09-18 1万+
最近一需求，是要做小程序扫普通二维码跳转。看了看微信文档一头雾水，写的不是很清楚。 官方文档传送门:https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#功能介绍 文档上的几个要点 开放范围 企业、媒体、政府及其他组织类型小程序。 跳转规则 1.二维码规则 2.前缀占用规则 3.校验文件【需在配置的二维码域...
小程序刷新页面
Mr_Yan的博客
09-19 3228
场景值：页面有弹层输入框，输入之后，重新请求页面数据，即相当于是刷新按钮。 解决办法： this.onLoad() this.onShow()
IOS中小程序pdf签章问题的解决办法
Mr_Yan的博客
10-11 1145
IOS系统中大于12的操作系统才可以显示签章。解决连接，希望大家多关注和反馈给微信官方。
扭蛋机小程序带来了什么优势？扭蛋机收益攻略
最新发布
guanpinkeji的博客
04-28 487
扭蛋机的价格低，各个年龄层的玩家都可以进行购买，潜在玩家量非常大。扭蛋机器也容易出现故障，影响玩家的游戏体验感，在线上，就会解决玩家这一烦恼，提高玩家的游戏体验。线上扭蛋机的商品种类繁多，可以在后台进行设置各类热门商品和隐藏款商品，让玩家有更多的选择，吸引到更多的玩家到平台进行消费，提高销量。对于商家来说，还可以在线上利用互联网的优势吸引玩家，打造专属的用户“流量池”，在后续的营销推广中，可以更高效的实现盈利。线上扭蛋机小程序随着科技的不断创新发展，具有可持续发展的空间，对扭蛋机的发展具有较大的影响力。
微信小程序踩坑系列——从wx.request谈谈异步处理
06-02
好的，我理解你的问题是关于微信小程序中异步处理的问题，特别是在使用wx.request时可能会遇到的一些问题和应对方法。 在微信小程序中，异步处理是非常常见的需求，比如网络请求、定时器、事件监听等等都是异步操作。其中，网络请求是最常见的异步操作之一，而wx.request是微信小程序提供的网络请求API。 在使用wx.request时，需要注意以下几点： 1. wx.request是异步操作，需要使用回调函数来处理请求结果。回调函数中的参数包括请求结果、响应状态码等信息。 2. 在回调函数中，需要将请求结果更新到页面数据中，以便能够在页面中显示请求结果。 3. 在网络请求过程中，可能会出现错误，比如网络不稳定、服务器连接失败等等。此时，需要使用try-catch语句来捕获异常，并进行相应的处理。 4. 如果需要多次进行网络请求，可以考虑使用Promise或async/await来简化异步处理流程。 总之，在微信小程序中进行异步处理需要注意一些细节，但只要理解了异步处理的原理和常见问题，就能够更好地应对各种情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值