前言

以下代码使用了： vant-ui库；
主要完成了：

上拉框显示分享朋友圈按钮，点击分享朋友圈后，弹框展示图片，点击图片保存到本地；
上拉框显示分享好友按钮，分享当前页的小程序给好友；

微信小程序分享好友及分享朋友圈功能，功能很常见，记录下，方便今后查阅

一、上拉框显示分享按钮

1.1 wxml

<van-action-sheet bind:close="shareClose" bind:cancel="shareClose" cancel-text="取消" title="分享页面"show="{{ showShare }}"><view class="shareBox"><button open-type="share"><van-icon name="friends" size="30" color="#07c160" /><view>微信好友</view></button><button bind:tap="shareToPoster"><van-icon name="photo" size="30" color="#c79f5d" /><view>朋友圈</view></button></view></van-action-sheet>

1.2 js部分

Page({data: {showShare: false,},shareClose() {this.setData({ showShare: false })},
})

1.3 事件代码解析

上拉弹框的控制为：showShare；
上拉弹框关闭事件：shareClose；

二、弹框展示获取的图片，点击图片保存到本地；

2.1 wxml

    <van-dialog closeOnClickOverlay use-slot bind:confirm="saveImage" theme="round-button" confirmButtonText="保存图片到相册"show="{{ isShowShareDialog }}"><image wx:if="{{qrCodePath !== ''}}" src="{{qrCodePath}}" mode="widthFix" /><van-image wx:else show-error> </van-image></van-dialog>

2.2 js部分

import Toast from '../../compontents/vant/toast/toast'Page({data: {showShare: false,isShowShareDialog: false,qrCodePath: '',},/*** 生命周期函数--监听页面加载，必须*/onLoad: function (options) {wx.showShareMenu({withShareTicket: true,menus: ['shareAppMessage', 'shareTimeline']})},// 分享朋友圈shareToPoster() {let that = thisToast.loading({message: '加载中...',forbidClick: true,});// 1.先请求后台wx.request({url: 'test.php', //仅为示例，并非真实的接口地址data: { x: '',y: '' },header: {'content-type': 'application/json'},success (res) {console.log(res.data.href)//例：res.data.href = 'https://img-blog.csdnimg.cn/20190124095040684.jpg'// 2.从后台拿到图片，转换为本地图片wx.getImageInfo({src: res.data.href,//服务器返回的图片地址success: function (res) {Toast.clear()const qrCodePath = res.paththat.setData({ qrCodePath: qrCodePath, isShowShareDialog: true });},fail: function (res) { Toast('生成图片失败') }});},fail: function (res) {Toast('请求失败')}}) },saveImage() {// 3.保存图片Toast.loading({message: '保存中...',forbidClick: true,});wx.saveImageToPhotosAlbum({filePath: this.data.qrCodePath,success: function (res) {Toast.clear()Toast('保存图片成功，可以去朋友圈分享')},fail: function (res) {Toast('保存图片失败')}})},shareClick(event) {this.setData({ showShare: true })},shareClose() {this.setData({ showShare: false })},
})

2.3 代码事件分析

在onLoad或者onShow中调用 wx.showShareMenu（必须），这个api也可以控制胶囊按钮中的转阿发和分享功能；
- 分享给好友：shareAppMessage
- 分享朋友圈：shareTimeline
弹框展示：isShowShareDialog
弹框显示后，发请求后后台生成图片展示：shareToPoster，涉及到的小程序API
- 请求后台，获取到图片链接：wx:request;
- 将图片链接转成本地可展示的图片形式：wx.getImageInfo;
点击按钮保存图片至本地：saveImage；
- 传入图片链接，调用API:wx.saveImageToPhotosAlbum；
Toast.clear()：是为了删除微信自带的消息提示，而用ui库好看的消息提示；

三、分享当前页的小程序给好友；

3.1wxml 部分同1.1;

<button open-type="share"><van-icon name="friends" size="30" color="#07c160" /><view> 微信好友 </view>
</button>

分享好友主要在按钮button（必须是按钮，别的dom不行）上配置按钮：open-type="share"；

3.2 js部分

Page({onLoad: function (options) {wx.showShareMenu({withShareTicket: true,menus: ['shareAppMessage', 'shareTimeline']})},
})

在onLoad或者onShow中调用 wx.showShareMenu（必须），这个api也可以控制胶囊按钮中的转阿发和分享功能；

四、demo全部代码

4.1 wxml

<view class="policy-footer"><view class="item"><button class="shareBtn" bind:tap="shareClick"><van-icon name="share" size="16" />分享</button></view><!-- 分享的版块 --><van-action-sheet bind:close="shareClose" bind:cancel="shareClose" cancel-text="取消" title="分享页面"show="{{ showShare }}"><view class="shareBox"><button open-type="share"><van-icon name="friends" size="30" color="#07c160" /><view>微信好友</view></button><button bind:tap="shareToPoster"><van-icon name="photo" size="30" color="#c79f5d" /><view>朋友圈</view></button></view></van-action-sheet><!-- 朋友圈生成的图片 --><van-dialog closeOnClickOverlay use-slot bind:confirm="saveImage" theme="round-button" confirmButtonText="保存图片到相册"show="{{ isShowShareDialog }}"><image wx:if="{{qrCodePath !== ''}}" src="{{qrCodePath}}" mode="widthFix" /><van-image wx:else show-error> </van-image></van-dialog>
</view>
<van-toast id="van-toast" />

4.2 json

const app = getApp()
import Toast from '../../compontents/vant/toast/toast'Page({data: {showShare: false,isShowShareDialog: false,qrCodePath: '',},// 分享朋友圈shareToPoster() {let that = this// 1.先请求// 2.从后台拿到图片Toast.loading({message: '加载中...',forbidClick: true,});wx.getImageInfo({src: 'https://img-blog.csdnimg.cn/20190124095040684.jpg',//服务器返回的图片地址success: function (res) {Toast.clear()console.log(res)const qrCodePath = res.paththat.setData({ qrCodePath: qrCodePath, isShowShareDialog: true });},fail: function (res) {Toast('生成图片失败')}});},saveImage() {// 3.保存图片Toast.loading({message: '保存中...',forbidClick: true,});wx.saveImageToPhotosAlbum({filePath: this.data.qrCodePath,success: function (res) {Toast.clear()Toast('保存图片成功，可以去朋友圈分享')},fail: function (res) {Toast('保存图片失败')}})},shareClick(event) {this.setData({ showShare: true })},shareClose() {this.setData({ showShare: false })},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.showShareMenu({withShareTicket: true,menus: ['shareAppMessage', 'shareTimeline']})},
})

4.3 json

{"usingComponents": {"van-icon": "../../compontents/vant/icon","van-button": "../../compontents/vant/button","van-toast": "../../compontents/vant/toast","van-dialog": "../../compontents/vant/dialog","van-image": "../../compontents/vant/image","van-action-sheet": "../../compontents/vant/action-sheet"},
}

结语

以上就完成了小程序：微信小程序分享好友及分享朋友圈功能；上述代码中使用了ui库来辅助完成，代码更简洁，但如果没有使用其他ui库，思路也是相同的：

点击分享朋友圈按钮，弹框显示图片；

点击下载按钮，调用下载api，下载至本地；

点击分享好友按钮，配置wx.showShareMenu，然后再button上配置open-type="share"即可；

如果本文对你有帮助的话，请不要忘记给我点赞评论打call哦~o(￣▽￣)ｄo
有问题留言 over~

小程序：微信小程序完成分享好友及自定义分享朋友圈功能（完整版）相关推荐

微信 Mac版Beta 3.0.0.1内测——朋友圈功能已上线
3月11日晚间,微信推出3.0版本的Mac客户端,支持"浏览朋友圈"功能.目前,仅有小部分用户能通过内测版本使用. 微信 for Mac 3.0.0.1 更新日志: 可以浏览朋友圈 ...
uniapp 微信小程序分享给微信好友与分享到朋友圈功能
微信小程序分享使用方法: onLoad(){wx.showShareMenu({withShareTicket:true,//设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点 ...
小程序分享到朋友圈_微信内测开放小程序分享到朋友圈功能
点击上方 ↑ 指尖渭南关注我们好资讯抢鲜看向上滑动阅读全文↑↑↑ 一大早在各科技公众号有看到小程序支持直接分享到朋友圈,这么好的功能,忍不住要实践下. 根据官方文档走起,文档地址:https:// ...
小程序分享到朋友圈功能_小程序开发日记分享到朋友圈
贵州水司楼图片来自视频截图最近微信小程序开始公测小程序分享到朋友圈的功能了.记得前两天刚开始内测时,小程序社区里就不断有人发帖问关于分享到朋友圈的各种问题.很显然大家对这个新特性都特别关心.那 ...
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序
生鲜小程序微信小程序怎么制作临沂修齐网络专业制作微信小程序生鲜小程序开发功能介绍: 1.产品展示:通过扫码或者搜索小程序,用户可以看到不同品种的新鲜蔬菜.水果以及肉类. 2.定时收货:买家可以预 ...
2行代码实现小程序分享到朋友圈功能
期盼已久的小程序直接分享到朋友圈的功能,官方终于支持了.今天就来带大家实现小程序分享到朋友圈的功能.代码很简单. 老规矩,以图为证新加分享到朋友圈的按钮分享到朋友圈的效果分享成功打开朋友圈分享 ...
小程序源码：修复图片音频全新升级带特效喝酒神器小游戏微信小程序
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
微信小程序----微信小程序浏览pdf文件
微信小程序----微信小程序浏览pdf文件说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件.只需在js操作即可. HTTP.Config.Request(' ...
小程序源码：炫酷手持滚动弹幕生成小工具微信小程序-多玩法安装简单
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...

小程序：微信小程序完成分享好友及自定义分享朋友圈功能（完整版）

前言