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

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

时间：2022-12-24 17:46:27

前言

以下代码使用了： 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-/0124095040684.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

4.2 json

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~

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。