![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序
文章平均质量分 61
前端对象
一棵树,站成永恒
展开
-
微信小程序基于wx-charts的canvas组件横向滚动
在微信小程序里插入折线图,可以使用wx-charts,在绘制到canvas上。wx-charts具体用法就不介绍了。折线图显示后,却发现了一个问题:数据x轴长度不确定,导致如果数据很长的话,数据就会挤在一起,如果长度较大,canvas能滚动就好了。在网页中,我们直接设置父元素固定宽度,子元素宽度超过父元素,让父元素overflow:auto;就行了,可是对微信小程序的canvas组件不起作用。第一时间想到scroll-view组件,但是scroll-view组件不能作为canvas的父元素。但是研究原创 2021-04-17 14:02:43 · 1264 阅读 · 0 评论 -
小程序组件中监听父组件传来的properties值
前提: 在小程序中,子组件需要接受父组件传来的2个值A和B,子组件需要同时根据A和B做一些业务处理。通常,我们可以在properties单独的针对A和B进行监听,但是我们发现,在A中使用B,取不到B值,或在B中使用A,取不到A值。这是为什么呢?其实这个涉及到事件循环的知识。那么,有没有同时能监测到这两个值的方法呢?所以针对子组件需要同时根据A和B做一些业务处理的情况,我们需要同时监听这两个值变化。只要有一个值发生变化,都会重新处理相关业务。参考微信开发文档:https://developers.w原创 2021-04-17 13:16:43 · 3025 阅读 · 0 评论 -
小程序ios端,日期不识别横杠“-”符
在做小程序的项目中,对接口返回的时间格式,有时为“2021-03-20 11:28:50”,前端对该格式转为时间戳的过程中,发现不生效且在苹果手机上。所以解决的方法有两种。方法1、让接口直接返回时间戳的格式方法2、前端对格式进行特殊处理,将“-”转为"/":...原创 2021-03-09 15:02:29 · 418 阅读 · 0 评论 -
小程序怎么使用scss、less这些css预处理器语言
css预处理器语言在开发过程中使用很方便。当在开发小程序的过程中,如果我们使用mpvue或者wepy这些框架,是可以使用css预处理器语言的,但是开发原生小程序时,由于原生小程序不支持css预处理器语言,我们想使用它。该怎么办?方法:使用gulp监听小程序目录下所有的scss文件,使用gulp-sass编译成css文件,然后利用gulp-rename重命名css为wxss,保存到sass所在目录下,这样编译后的wxss文件就与对应的js、json文件在同一个目录了。gulp学习网站:https://原创 2021-02-26 10:21:04 · 1298 阅读 · 0 评论 -
小程序base64生成的二维码,在部分机型上无效
在项目的开发过程中,发现部分手机多次生成海报后,绘制的海报上的由base64生成的二维码不生效。在确定后台接口返回的base64格式的二维码无问题后,那么我们一步步分析,失效原因可能是前端转换base64或者绘制二维码导致的。经过仔细分析、查找,发现是由于转换base64的过程存在本地缓存的问题,所以,我们采用先删除本地的缓存,再去转换base64的方法。一·、删除缓存、转换base64const fsm = wx.getFileSystemManager();1、删除缓存function rem原创 2021-02-10 13:50:06 · 843 阅读 · 0 评论 -
小程序输入框字数统计
//1、文本输入change(event){let_cursor=this.getByteLen(event.detail.value);this.setData({text:event.detail.value,count:_cursor})},//2、获取字符串长度(汉字算两个字符,字母数字算一个)getByteLen(val){...原创 2020-09-21 17:02:44 · 1712 阅读 · 0 评论 -
微信小程序swiper 前后边距的使用-----previous-margin和next-margin的使用
小程序里经常使用swiper组件来实现轮播滑动的效果。但是有时候我们需要露出前一张和后一张图片一部分,我们可以使用previous-margin和next-margin属性。 previous-margin:前边距,可用于露出前一项的一小部分 next-margin:后边距,可用于露出后一项的一小部分假设设置 一个图片的尺寸为宽为600rpx,高为600rpx,前一张图片露出为20rpx,后一张图片露出为20rpx。这里使用的ip6的屏幕尺寸,宽为750rpx (rpx单位:可以根据屏幕宽度进行自原创 2020-08-10 15:00:28 · 8135 阅读 · 6 评论 -
getCurrentPages()的使用
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。注意:1、不要尝试修改页面栈,会导致路由以及页面状态错误。2、不要在 App.onLaunch 的时候调用 getCurrentPages(),此时page 还没有生成。一、跨页面赋值1、 let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。let prevPage = pages[ pages.leng原创 2020-07-16 20:36:33 · 1231 阅读 · 0 评论 -
小程序canvas绘制图片并保存
之前写过一篇小程序分享,体验不是很好。因为用户点击去分享时,canvas绘制并转换成图片需要一定的时间,用户视觉等待的时间有点长。为了更好的优化这一体验,我们可以这么做:1、用户点击去分享,先用页面标签将海报图绘制出来;2、当用户点击保存的时候,我们执行绘制canvas绘制,canvas转换图片,保存图片的过程。一、用页面标签把海报图画出来,这个不需要讲解了,前端都能做到;二、我们详细讲解一下canvas绘制的思路:1、配置海报上的信息,需要绘制什么内容2、用户点击保存按钮// 点击保存事件原创 2020-07-06 17:09:40 · 1881 阅读 · 1 评论 -
CSS-遮罩不设具体高度的父元素
小程序中给定宽度,高度自适应,可以用mode=‘widthFix’,来保持原图片的宽高比不变。所以父元素的高度是根据图片的高度来变化的。与图片同级的是一个css遮罩,需要完全覆盖这个父元素。方法:只需要把遮罩层绝对定位在四个角,就可以实现遮盖住父元素具体样式:.video_descript{position: relative;margin: 25rpx 0rpx;// 图片样式....原创 2020-04-30 14:28:30 · 488 阅读 · 0 评论 -
canvas绘制文本换行的方法
原创 2020-03-18 15:54:46 · 288 阅读 · 0 评论 -
小程序二维码base64转为图片(二维码的获取)
一、base641、base64图片2、base64图片转换为本地图片可参考https://blog.csdn.net/bocongbo/article/details/84954567这篇博客二、下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为 50MB。封装一个请求接口的方法...原创 2020-03-18 15:31:52 · 2793 阅读 · 0 评论 -
小程序分享海报图
在做小程序商城项目时,用户需要点击海报图,并完成分享的功能,但是微信小程序暂时没有分享到朋友圈的功能,这里分享的思路是用 canvas画布生成一张分享图片,将该图片保存到相册,用户将带有分享二维码的图片发到朋友圈,其他人可以识别图中二维码的方式进入小程序的指定分享页面。下面就核心的代码做简要介绍。1、组建created2、商品详情页面传值到海报图组件,比如标题,价格,网络图片路径等。3...原创 2020-03-18 14:53:33 · 668 阅读 · 0 评论