回复 刷新

暂无评论

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

前言

以下代码使用了: vant-ui库;

主要完成了:

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

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

一、上拉框显示分享按钮

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 事件代码解析

  1. 上拉弹框的控制为:showShare;
  2. 上拉弹框关闭事件: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 = this Toast.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.path that.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也可以控制胶囊按钮中的转阿发和分享功能;

  1. 分享给好友:shareAppMessage
  2. 分享朋友圈:shareTimeline
  3. 弹框展示:isShowShareDialog。
  4. 弹框显示后,发请求后后台生成图片展示:shareToPoster,涉及到的小程序API请求后台,获取到图片链接:wx:request;
  5. 将图片链接转成本地可展示的图片形式:wx.getImageInfo; 点击按钮保存图片至地:saveImage
  6. 传入图片链接,调用API:wx.saveImageToPhotosAlbum;
  7. 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也可以控制胶囊按钮中的转阿发和分享功能;

四、dome全部代码

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.path that.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库,思路也是相同的:

  1. 点击分享朋友圈按钮,弹框显示图片;
  2. 点击下载按钮,调用下载api,下载至本地;
  3. 点击分享好友按钮,配置wx.showShareMenu,然后再button上配置open-type="share"即可;
  • 61
  • 0
  • 0