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

在小程序开发过程中，经常遇到一种情况：页面中的一个按钮需要带有 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、在这里编辑文字图片，你可以放大缩小图片及拖动位置，调整字体大小，颜色，用艺术字，做长文字图片等功能，最后点击生成，然后点击保存图片到手机。

---