前言
以下代码使用了: 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
<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-/0124095040684.jpg',//服务器返回的图片地址success: function (res) {Toast.clear()console.log(res)const qrCodePath = res.paththat.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库,思路也是相同的:
点击分享朋友圈按钮,弹框显示图片;点击下载按钮,调用下载api,下载至本地;点击分享好友按钮,配置wx.showShareMenu,然后再button上配置open-type="share"即可;
如果本文对你有帮助的话,请不要忘记给我点赞评论打call哦~o( ̄▽ ̄)do 有问题留言 over~