前言

以下代码使用了： 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"即可；