小程序分享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页面拿到待分享内容，生成图片，保存图片，用户自行分享。棒棒的。

FEATURED TAGS
FRIENDS