小程序分享api学习总结

作者 likaiqiang 日期 2018-09-28
小程序分享api学习总结

分享到微信好友/微信群

小程序原生页面分享到微信好友/微信群

这个比较简单,通过onShareAppMessage

Page({
onShareAppMessage:function(){
return {
title:'分享的标题',
path:'用户点击此分享跳转的地址',
imageUrl:'分享的图片地址'//如果没有会使用默认图片
}
}
})

用户点击右上角的分享按钮,再点击转发后,onShareAppMessage被调用。

小程序内嵌webview组件分享到微信好友/微信群

假如待分享页面是一个webview,用户点击转发后onShareAppMessage会有一个webViewUrl的参数,这个参数携带当前页面webview的url

Page({
onShareAppMessage:function(o){
return {
title:'分享的标题',
path: o.webViewUrl
}
}
})

假如我不想每次都干巴巴的分享一个链接,我有一个文章详情页面,页面上有文章作者的姓名和头像,我想每次分享的时候带上这些信息应该怎么做。这块涉及到webview与小程序通讯的知识。

小程序向webview发信息,只能通过给webview的url传参的方式进行。webview向小程序发消息可以通过JSSDK 1.3.2实现。

我线上有这么一个html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test webview</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
</head>
<body>
<div>
<div class="name">某某某</div>
<img class="avater" src="http://i1.letvimg.com/vrs/201301/24/928f5e2f62944b549081cc854e1087fb.jpg" alt="">
</div>
<script>
window.onload = function(){
wx.miniProgram.postMessage({
data:{
title: $('.name').text()
imageUrl: $('.avater').attr('src'),
path: document.location.href
}
})
}
</script>
</body>
</html>
<webview src="线上html地址" bindmessage="messageHandle"></webview>
Page({

messageHandle(e){
this.message = e.details.data[0]
},
onShareAppMessage(o){
return this.message
}
})

这里有个坑,小程序官方对bindmessage是这么解释的:

网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }

这句话是说,小程序想要收到网页发来的信息,必须经历两个流程:

  1. 网页通过jssdk调用postMessage
  2. 小程序在后退、组件销毁、分享的时候首先会触发messageHandle拿到网页发来的数据,接着才会触发onShareAppMessage函数。如果小程序没有触发三者中的任意一个,messageHandle是永远不会触发的。

分享到朋友圈

目前腾讯官方没有开放小程序分享到朋友圈api,业界的做法普遍是把要分享的内容先生成一张图片,然后引导用户保存图片自行分享。。。虽然听起来用户体验较差,但是这是目前唯一可行的办法。

技术实现

使用canvas组件

其核心思路是:先把需要分享的内容通过wx.createCanvasContext()绘制到画布上,然后通过wx.canvasToTempFilePath()把画布转成图片,拿到生成图片的url,或通过images组件展示生成的图片,或不展示,最后调用wx.saveImageToPhotosAlbum()把这张图保存到相册。

有兴趣的朋友可以自己试一下。

使用Painter

Painter可以很方便的通过它的配置文件生成图片,图片生成完成后,它会抛出一个imgOK事件,该事件的参数携带生成的img地址。然后调用wx.saveImageToPhotosAlbum()把这张图保存到相册

看代码

<painter palette="{{template}}" bind:imgOK="onImgOK" />

Page({
data:{
template: {}
},
onReady: function () {
this.setData({
template: new Card().palette()
})
}
})

Card是painter的配置文件,可以参考这个

使用场景

小程序原生页面分享到朋友圈

上面的例子只展示了painter的基本用法,那么painter生成的图片可以可以放在一个弹出层内,点击某个按钮触发显示弹出层呢,答案是可以的

<button catchtap='renderImg'>生成分享图片</button>
<van-dialog
async-close
use-slot
show="{{ isShare }}"
title="我是title"
confirmButtonText="保存图片"
bind:confirm="saveImage">
<painter palette="{{template}}" bind:imgOK="onImgOK" />
</van-dialog>

我使用了有赞的小程序UI库

Page({
data: {
template: {},
isShare:false
},
onReady: function () {
this.setData({
template: new Card().palette()
})
},
renderImg(){
this.setData({
isShare:true
})
},
onImgOK(e) {
this.imagePath = e.detail.path;
console.log(e);
},

saveImage() {
wx.saveImageToPhotosAlbum({
filePath: this.imagePath,
success:function(){

}
})
}
})

小程序内嵌webview组件分享到朋友圈

无法实现,有两个原因

  1. 小程序的webview组件不能与其他组件共存,所有的其他组件都会被webview遮住。
  2. 无法在本页面触发messageHandle函数

2018年9月29号更新

和我们产品讨论这个问题,做产品的果然脑洞奇大,他说既然本页面所有其他组件都会被webview遮住,那么我们可以把渲染图片这个流程放到一个单独的小程序页面(share)里面,webview里面通过按钮触发小程序跳转到share,在跳转的过程中,当前的webview组件销毁触发messageHandle函数,进入share页面拿到待分享内容,生成图片,保存图片,用户自行分享。棒棒的。