欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序完成分享好友及自定義分享朋友圈功能（完整版） ... ... ... - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

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

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：277

前言

以下代碼使用了： 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ï¼›
  • 上拉彈框關(guān)閉事件：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: '',
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載，必須
   */
  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.
    		// 2.從后臺拿到圖片，轉(zhuǎn)換為本地圖片
   			 wx.getImageInfo({
     		 	src: res.data.href,//服務(wù)器返回的圖片地址
      			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中調(diào)用 wx.showShareMenu（必須），這個api也可以控制膠囊按鈕中的轉(zhuÇŽn)阿發(fā)和分享功能ï¼›
    • 分享給好友：shareAppMessage
    • 分享朋友圈：shareTimeline
  • 彈框展示：isShowShareDialog
  • 彈框顯示后，發(fā)請求后后臺生成圖片展示：shareToPoster，涉及到的小程序API
    • 請求后臺，獲取到圖片鏈接：wx:request;
    • 將圖片鏈接轉(zhuÇŽn)成本地可展示的圖片形式：wx.getImageInfo;
  • 點擊按鈕保存圖片至本地：saveImageï¼›
    • 傳入圖片鏈接，調(diào)用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中調(diào)用 wx.showShareMenu（必須），這個api也可以控制膠囊按鈕中的轉(zhuÇŽn)阿發(fā)和分享功能ï¼›

四、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',//服務(wù)器返回的圖片地址
      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 })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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"
  },
}

結(jié)語

以上就完成了小程序：微信小程序分享好友及分享朋友圈功能；上述代碼中使用了ui庫來輔助完成，代碼更簡潔，但如果沒有使用其他ui庫，思路也是相同的：

  1. 點擊分享朋友圈按鈕，彈框顯示圖片；
  2. 點擊下載按鈕，調(diào)用下載api，下載至本地；
  3. 點擊分享好友按鈕，配置wx.showShareMenu，然后再button上配置open-type="share"即可；

相關(guān)案例查看更多

相關(guān)閱讀