Uniapp微信小程序实现分享文章以及图片功能

微信小程序图片转发保存简单说明微信小程序图片转发保存，依赖小程序的转发api——通过调用这个api能触发如下弹窗这个api要求要分享的图片地址必须为本地路径或者临时路径，所以如果你的图片是本地路径或者临时路径，那就不需要继续往下看了。如果不是本地路径或者临时路径，那我们要解决的问题就是怎么把图片转为临时路径，这里常见有两种图片形式：网络图片：https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg。

uniapp 生成海报并分享给好友或者下载到本地

vue3的话可以获取当前页数据重写onShareAppMessage，vue2或原生小程序则需要把请求写在钩子里并加入async\await即可。一般来说搜这个问题都是因为自定义分享失效了或没等请求数据回来就已经开始执行分享了导致分享时参数没有跟上。分享链接的功能是右上角点...然后复制链接，可以直接点击。query就是参数，直接在onload里面接收就可以。这种链接直接从其他地方跳转到小程序。带参分享的话就需要自定义分享。

因实际需求，需要实现微信小程序自定义分享，根据当前数据动态生成（绘制）分享卡片的图片。为了实现绘制分享卡片，核心需要使用。先来看一下效果：注意：绘制图片必须需要专门使用获取图片的path后，再使用绘制，否则直接用图片路径绘制不成功，会成默认的分享图。

2. 自定义内容：因为onShareAppMessage的imageUrl参数的支持的是本地文件路径、代码包文件路径或者网络图片路径 ，所以这里实现自定义的分享的方法是结合canvas画布。微信小程序用户，点击小程序里商品的分享按钮时，想要不同的商品展示不用的分享内容，比如分享图片上展示商品的图片、价格等信息。画画的时候，要是找不准xy的位置，可以从这三种样式里选一个样式接近的再慢慢修改～先贴上画布的代码，这里画了三种自定义分享的内容，样式在代码下方。setGoodsShareCanvas()方法的样式。

【代码】uniapp微信小程序分享图片。

uniapp小程序分享图片

【代码】uniapp 微信小程序 编写文章等 editor 编辑器编写富文本。

uni.CanvasContext实例api 方法 uniapp官网链接。关于 canvas 画布 uniapp官网链接。官网有的可能没讲明白，需要自己去搜一下。vue版本 ： vue2。使用方式 ，子组件封装。

1. 微信小程序分享 （识别图中二维码不会，有会的评论发一下文章链接）

【代码】uniapp微信小程序分享功能。

【代码】uniapp微信小程序分享。

uniapp 微信小程序分享图片给好友(及没有分享给好友按钮)wx.showShareImageMenu

并自定义转发内容(在methods中有onShareAppMessage函数就行）欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。没有开分享的时候，默认状态下是显示：当前页面未设置分享。uniapp 微信小程序 当前页面未设置分享？uniapp 微信小程序分享到好友怎么写？分享转发文件到聊天（转发至好友、群聊等）uniapp微信小程序分享怎么写？文件，在“App模块配置”项的“监听用户点击页面内转发按钮（是转发给朋友或者转发给群。点击按钮转发怎么写？