⼩程序：⼩程序完成分享好友及⾃定义分享朋友圈功能（完整版）前⾔
以下代码使⽤了： ；
主要完成了：
上拉框显⽰分享朋友圈按钮，点击分享朋友圈后，弹框展⽰图⽚，点击图⽚保存到本地；
上拉框显⽰分享好友按钮，分享当前页的⼩程序给好友；
⼩程序分享好友及分享朋友圈功能，功能很常见，记录下，⽅便今后查阅
⼀、上拉框显⽰分享按钮
1.1 wxml
<van-action-sheet close="shareClose"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 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 confirm="saveImage"theme="round-button"confirmButtonText="保存图⽚到相册"
show="{{ isShowShareDialog }}">
<image if="{{qrCodePath !== ''}}"src="{{qrCodePath}}"mode="widthFix"/>
<van-image 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.先请求后台
url:'test.php',//仅为⽰例，并⾮真实的接⼝地址
data:{ x:'',y:''},
header:{'content-type':'application/json'},
success(res){
console.log(res.data.href)
//例：res.data.href = 'img-blog.csdnimg/20190124095040684.jpg' // 2.从后台拿到图⽚，转换为本地图⽚
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也可以控制胶囊按钮中的转阿发和分享功能；
四、demo全部代码
4.1 wxml
<view class="policy-footer">
<view class="item">
<button class="shareBtn"tap="shareClick">
<van-icon name="share"size="16"/>
分享
</button>
</view>
<!-- 分享的版块 -->
<van-action-sheet close="shareClose"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 tap="shareToPoster">
<van-icon name="photo"size="30"color="#c79f5d"/>
<view>
朋友圈
</view>
</button>
</view>
</van-action-sheet>
<!-- 朋友圈⽣成的图⽚ -->
<van-dialog closeOnClickOverlay use-slot confirm="saveImage"theme="round-button"confirmButtonText="保存图⽚到相册"
show="{{ isShowShareDialog }}">
<image if="{{qrCodePath !== ''}}"src="{{qrCodePath}}"mode="widthFix"/>
<van-image 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,
});
src:'img-blog.csdnimg/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:729038198，我们将在24小时内删除。