关键词：
这段时间开发中遇到了一个棘手的问题，就是用uniapp开发的小程序，将页面上的一块内容生成图片并保存在本地，这就难到我了，查了好久的问题，最终有了解决方法，废话少说，直接上步骤。
1、在HBuilder X的 插件市场 找到 前端组件--通用组件--搜索“(￣ー￣)p”，并导入到你的项目中
要注意：这个插件有兼容性
2、封装一个组件，用来重新绘制你的页面
在页面上使用：
用法插件官网都有，在这里只说本人自己用的方法：JSON
board：设置海报所需的 JSON 数据进行绘制
isCanvasToTempFilePath：把当前画布指定区域的内容导出生成指定大小的图片，并返回文件临时路径。
custom-style：自定义样式
success：生成图片成功，这是一个监听函数，无需触发条件，可以直接得到生成图片的路径
这里的：
path ：是接受生成图片路径的变量
poster：对应页面中的board绑定的变量，用来绘制图片
接下来说绘制页面：
可以封装一个函数，方便后续调用
setImg：这个就是用来绘制图片封装的方法，通过官方文档中的json写法将页面重新绘制，样式与css中的一样，但是写法上采用的是 驼峰式
如果你的数据是需要从后端获取的，那就可以从父组件中将数据传过来，在子组件中接收然后直接渲染
绘制好以后就是生成图片了，调用页面中的success方法，里面的参数就是生成图片的路径。
3、在父组件中应用
CardImg：是我的子组件
cardData：是我从后端获取的数据
success：接收子组件传递过来的图片的路径
需要用到图片路径，在data中定义一个变量，在子组件传过来的事件中直接给变量赋值即可。
这个插件有时候存在不生成的情况，不要慌！不是你的问题，随便在组件中打印一下然后重新编译即可。 小程序就是这么的不稳定。
有其他问题的小伙伴欢迎在评论区讨论~~~
uniapp前端获取微信小程序urllink(https调用)(代码片段)
前端基于uniapp获取微信小程序URLLink短链，适用于短信、邮件、网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放。前言：微信小程序此前可以在小程序管理后台-工具中直接快捷生成小程序... 查看详情
uniapp转微信小程序后vue.prototype定义的全局变量在微信小程序页面无法直接访问(代码片段)
使用Vue.prototype定义的全局变量使用uni-app开发多端应用，为了防止小程序上应用包过大同时又不影响app端的使用体验，我将一些静态资源的路径改为了Vue.prototype定义的全局变量进行拼接。app使用/static/iconimg/+图片名称... 查看详情
uniapp转微信小程序后vue.prototype定义的全局变量在微信小程序页面无法直接访问(代码片段)
使用Vue.prototype定义的全局变量使用uni-app开发多端应用，为了防止小程序上应用包过大同时又不影响app端的使用体验，我将一些静态资源的路径改为了Vue.prototype定义的全局变量进行拼接。app使用/static/iconimg/+图片名称... 查看详情
uniapp小程序上传图片(代码片段)
...序或者APP中都会遇到一些实名认证或者头像上传的功能。uniapp官方也提供了相应的API供我 查看详情
uniapp全局传值方式总结（跨端：iosandroid和小程序）
uniapp的架构跟小程序一样，这样便于整体的管理和转译小程序，而uniapp的页面架构是借鉴的vue.js的单页面架构，由template（html）、script（js）、style（css）三部分组成。这样的页面架构是非常方... 查看详情
uniapp骨架图使用不了
小程序骨架图不能在uniapp中使用，因为uniapp是一款跨端开发框架，支持多端开发，而小程序骨架图只能在小程序中使用，无法在其他端使用，所以uniapp不能使用小程序骨架图。参考技术A小程序是一种新的应用开发模式，它不能... 查看详情
微信开发者工具小程序二维码会失效
...用的小程序应用名称;3、在微信“发现”模块,找到小程序开发体验入口,就是进入朋友圈的那个页面;4、通过公众平台页面注册小程序平台号码进入;5、通过扫描小程序二维码进入。1、打开微信小程序二维码图片2、手机截屏3、编... 查看详情
uniapp怎么实现选择和上传图片分开
参考技术A打开HBuilderX开发工具，创建uniapp项目，绑定点击事件即可。在methods中，定义点击事件，调用api中的unichooseImage。在上传照片的API中，请求成功后调用unigetImageInfo，获取图片信息。在获取图片方法下方，调用unipreviewImage... 查看详情
uniapp实现扫码ocr两功能的小程序开发到上线
...洁的模板2.新建路由先整个页面出来代码如下看不懂的去uniapp官网瞅瞅https://uniapp.dcloud.io/api/README3.上面扫码的功能完成了就这么简单下面是OCR图片文字识别用到百度的开发api你需要注册个百度云账号领取免费资源新建任务获取秘... 查看详情
uniapp小程序subpackages分包配置(代码片段)
官方文档使用场景:uniapp开发各种小程序时候遇到主包过大，无法上传的情况在开发者工具中有一个选项用于测试时候使用，可以提高分包大小分包机制小程序启动时，默认会下载主包并启动主包内页面，当用户进... 查看详情
uniapp生成抖音小程序问题记录(代码片段)
input标签在ios不显示在开发工具和安卓上input标签可以正常显示，但是在ios上发现input标签不显示。解决办法：给input加上宽度；原因大概是抖音小程序的input输入框没有宽度，需要手动设置。<!--在ios不显示-->&l... 查看详情
微信小程序（或uniapp）引入腾讯视频插件播放视频
...入的自定义组件。使用plugin://协议页面中使用暂停方法：uniapp：manifest.json添加：在page.json中的对应页面的style中添加页面实现：n0041aa087e即为vid。 查看详情
uview+uniapp+springboot实现小程序上传图片并回显(代码片段)
...能，并且上传后可以立即回显。用到的框架有：uniapp、uview、springboot。思路整体的思路便是：使用uview框架自带的上传组件，并在vue页面中调用后端接口将图片上传至服务器即可。关于回显，因为我还要做一个... 查看详情
微购小程序怎么生成二维码
...地。 参考技术D1.先登录小程序管理后台，在“设置”-“开发设置”-“业务域名”中设置小程序的业务域名；2.点击“分享”，在“小程序码”中点击“生成小程序码”；3.在“输入页面地址”中输入小程序的页面地址；4.点击“... 查看详情
uniapp小程序体验版-白屏现象
体验版小程序-白屏现象今天发布uniapp小程序体验版的新问题是小程序白屏。基本完成了我的小程序，打算上传发布，手机扫描体验版的二维码，点击进入后却一直白屏，什么内容也没有。但不管是真机调试还是预... 查看详情
利用uniapp开发小程序云函数
...人建议，若要开发云函数，最好直接在小程序中开发，在uniapp中开发不仅麻烦且其它平台不通用。 查看详情
uniapp截图保存为啥截图不了二维码
...他内容都被截图下来了,但是二维码不行参考技术A今天用uniapp写小程序二维码并保存到本地，网上的完全没有用，最后自己写了一个，1.使用weapp.qrcode生成二维码，并使用uni.canvasToTempFilePath生成临时图片文件，2.使用canvas绘制二维... 查看详情
uniapp小程序图片前端压缩上传
...要求是大于2MB的就压缩成2MB一下的再上传，我这边利用了uniapp的文件接口，使用canvas做了一个压缩上传的功能，目前已上线，使用无问题。定义canvascanvas样式定义数据打开相册递归上传删除照片预览大图压缩图片如果看了觉得有... 查看详情