小程序
君晏
一个有思想的程序员
展开
-
小程序 组件所在页面的生命周期
自定义组件除了拥有自己的生命周期外,还可以监听所在页面的部分生命周期原创 2022-07-07 17:13:03 · 194 阅读 · 0 评论 -
小程序 Page()增加统一处理,比如在onShow中增加统一身份验证,或者统一修改onShareAppMessage的返回值来设置分享身份认证信息等
// intercept.jsfunction interceptPage(options) { if (options.onShow) { let _onShow = options.onShow; options.onShow = function () { // 获取页面实例 let pages = getCurrentPages(); let _this = pages[pages.length - 1]; // 需要统一增加的.原创 2021-11-12 09:24:44 · 773 阅读 · 0 评论 -
微信小程序 监听wx.request统一处理headers
// app.js onLaunch: function () { this.reloadRequest(); } // 重写request方法 reloadRequest() { var self = this; // 监听 wx.request wx.downloadFild const keys = ['request', 'downloadFile'] const methods = {} keys.forEach(key ...原创 2021-11-11 18:56:19 · 975 阅读 · 0 评论 -
小程序 canvas注意事项(7)drawImage图片适配方式
在使用drawImage画网络图片时,需要画出的图片可能会与设计尺寸不符,此时绘制的图片会被压缩或者拉伸,十分不美观。微信在1.9.0后支持设置更多属性来处理,方法如下drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)从 1.9.0 起支持但是文档比较简单,试验过后发现不能满足需求QAQ,所以写了一些简单的处理下...原创 2018-09-21 10:08:18 · 8445 阅读 · 4 评论 -
小程序 canvas注意事项(6)添加圆角、截取区域
生成圆角的流程就是,先画出一片圆角区域,之后剪切保存下来,再画想要生成圆角的内容,内容会自动生成到先前到圆角区域中,超出到部分不显示就呈现出圆角状态,注意,画圆角之前之后都要进行保存与还原操作,下面是我写的一个简单到函数例子: // 画圆角 ctx、x起点、y起点、w宽度、y高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色 roundRect(ctx, x,...原创 2018-09-20 11:55:42 · 5003 阅读 · 0 评论 -
小程序 canvas注意事项(5)文字加粗
只需在fillText之前设置font属性即可,示例如下:ctx.font = 'normal bold 18px sans-serif';遵循css中font原创 2018-09-20 10:04:20 · 24183 阅读 · 4 评论 -
小程序 canvas注意事项(4)draw完成后的图片预览
小程序提供了一套相对完整的图片预览API,只需在draw的callback中,先将图片缓存,之后调用previewImage,传入图片地址数组即可(也支持网络图片) wx.canvasToTempFilePath({ x: 0, y: 0, width: width, height: height, canvasId: can...原创 2018-09-20 09:43:50 · 1828 阅读 · 0 评论 -
小程序 canvas注意事项(3)draw
如果在画图完成后,有对应操作时,必须在draw的callback后执行,比如图片预览、改变画布大小等ctx.draw(false, function() {console.log('后续操作');})原创 2018-09-20 09:40:34 · 4297 阅读 · 0 评论 -
小程序 canvas注意事项(2)Android元素属性混乱
canvas在绘制过程中不想显示到当前页面时,如果用绝对布局将canvas设置到屏幕外卖,在Android部分机型中将会造成赋值属性混乱问题,具体表现为文字大小颜色等不符解决此问题需要将canvas的hidden属性设置为true...原创 2018-09-20 09:38:04 · 420 阅读 · 0 评论 -
小程序 canvas注意事项(1)网络图片下载绘制
在画网络图片时,需要先将图片下载到本地,需要添加下载域名,在下载成功之后再进行画图等后续操作操作,需要注意异步下载问题,可以使用await async等框架,也可以使用callback,下面是个小例子:// 下载图片downLoadImg: function(netUrl, success, fail) {console.log('下载网络图片')wx.getImageInfo(...原创 2018-09-20 09:17:50 · 565 阅读 · 0 评论 -
小程序 css 可以使用百分比布局的属性——calc()
基本用法为.view { /*用100%减去左右两个20px的padding和2px的border*/ width :calc( 100% - (20px + 2px) * 2 ); }注意⚠️,在表达式中运算符的前后必须要有空格...原创 2018-07-10 15:40:14 · 15928 阅读 · 3 评论 -
小程序快捷键
格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行 Shift+Alt+F:代码格式化 Alt+Up,Alt+Down:上下移动一行 Shift+Alt+Up,Shift+Alt+Down:向...原创 2018-07-10 15:42:52 · 784 阅读 · 0 评论 -
小程序 picker快速滑动点击确定时不会执行
此问题可以自定义picker-view来解决,使用picker-view来模拟picker的效果在以后会介绍也可以将 picker 的 mode 设置为 multiSelector通过使用多列选择器实现单列效果,so easy...原创 2018-07-24 10:44:07 · 3621 阅读 · 0 评论 -
小程序 使用动画将picker-view模拟类似picker的效果 picker也可能造成appLaunch with an already exist webviewId报错信息
在小程序开发中,picker在许多地方会用到,但是可能不会满足产品的要求,此时可以使用picker-view进行处理js文件中使用createAnimation创建动画来做过度效果,当然也可以在css中加入动画,不过我就要用js -。-// pages/myTimeSelect/myTimeSelect.jsconst date = new Date()const years = ...原创 2018-07-24 10:55:13 · 10271 阅读 · 2 评论 -
小程序 监听网络、网速
大致搜索了一下,js监控网速都是通过下载来算出网络速度,所以基于网上的一些js案例,简单写了一个小程序版的网络监控需要添加download域名哦还有记得关闭setTimeout哦// 下载事件var downloadTask// 下载开始时间var start// 下载结束时间 var end// 重复下载var networkTimeOut// 当前是否有网络连接...原创 2018-07-31 19:19:36 · 9617 阅读 · 2 评论 -
小程序 websocket连接
最近小程序用到了长连接事件,所以封装了一套基本的socket连接其中有几点需要注意1、必须要有心跳,如果没有会自动断开连接。2‘、断开后必须取消setTimeout,不然会继续执行一次。3、发送消息只有在onSocketOpen后才会发送,所以添加一个消息数组,等连接成功后再发送。4、如果在还没连接成功时退出连接,会导致无法关闭,所以添加了socketClose来关闭sock...原创 2018-07-31 19:11:16 · 5047 阅读 · 4 评论 -
小程序 腾讯直播云webrtc-room的BUG
做过小程序直播并且使用腾讯云的小伙伴一定对腾讯对Demo深恶痛绝,因为他们不只写的差,而且还有BUG,以后不定期更新。。。在使用webrtc-room的时候,发现在创建一个房间进入后,退出再次进入会一直提示心跳超时,这个问题是因为他们在退出的时候只终止了request的请求,并没有对setTimeout做任何处理,也就是说你退出这个房间后,还会执行上一个房间的心跳,所以会一直报错,打印后可以发...原创 2018-07-30 15:00:38 · 2735 阅读 · 0 评论 -
小程序 判断对象中是否有空
// 判断对象中key对应value是否为空 objectValueNotNone: function (obj) { for (var objKey in obj) { if (!obj[objKey]) { return false; } } return true; },在注册流程可以判断必填项是否完成啥的...原创 2018-07-24 10:59:11 · 11226 阅读 · 2 评论