用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2020-9-21 11:43

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

前言

以下代码使用了: 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 = 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也可以控制胶囊按钮中的转阿发和分享功能;
    • 分享给好友: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也可以控制胶囊按钮中的转阿发和分享功能;

四、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"即可;
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏