微信小程序:带open-type和自定义背景的按钮

微信小程序:带open-type和自定义背景的按钮,第1张

在小程序开发过程中,经常遇到一种情况:页面中的一个按钮需要带有 open-type ,同时还要灵活地设置这个按钮的尺寸和背景样式。

这就意味着,你不能使用 <view bind:tap="onBtn"></腔隐view 再加上css设置一张背景图来实现。

然后系统的 <button>也不是什么省油的灯。相信大家都干过这样的事情:

哎呀,不小心透漏剧握物情。

所以要满足刚刚的需求,应该如此

当然,看了这么久,只知道这个,肯定不划算。你一定很想知道这里面的 ::after 是干啥的。

详见:

CSS :after 选择伍皮厅器

你所不知的 CSS ::before 和 ::after 伪元素用法

微信小程序裁剪组件,支持前端裁剪和后端裁剪两种方式

1.前端裁剪:将裁剪框指定的区域,单独生成图片,获取裁剪图片的临时文件路径

2.后端裁剪:获取裁剪框相对于原图的像素坐标位置,将裁袭尺迅剪区域坐标以及原图临时文件路径,传到后端进行图片裁剪

https://gitee.com/gnliscream/image-cropper

使用微信小程序自定义组件开发

小程序自定义组件官拍此网: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

添加image-cropper标签,如下

可以在image-cropper标签内添加 *** 作按钮,如下

首先需要在onLoad方法中,设置裁剪标签属性

然后添加按钮相应的绑定方法

获取到的res如下

获取到的裁剪参数的对应关系图

获取到裁困握剪参数后,将原图以及裁剪参数传到后台进行裁剪

2.获取裁剪图片地址

获取到的res如下

1、在微信顶部搜索:文字图片制作,点击文字图配败片制作小程序,进入小程序。

2、然后点击制作者卖哗,选择模板。

3、进入文字图片制作小程序后,首行点击制作按钮,然后点击一个模板。

4、然后添加图片。

5、这里可以添加手机图片或在线图片然后添加文字。

6、可以输入自己的文字,也可以随便来一句,最后点击完成点击生成,然后保存图片。

7、在这里编辑文字图片,你可以放大缩小图片及拖动位置,调整字体大小,颜色,用艺术字,做长文字图片等功能,最后点击生成,然后点击保存图片到手机。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11994249.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存