在Uniapp开发中,如果我们要做微信分享功能,比如分享给微信好友或发布到朋友圈,我们只要使用uniapp提供的一个接口(uni.share)就可以实现,但是这个接口仅支持小程序和APP端,而H5端却无法使用该接口,也就无法实现分享功能。
在H5端,我们通常使用以下方案来解决,在给出例子代码之前,我们首先要安装一个模块(jweixin-module),这个模块可以通过NPM的方式来安装(如果没有使用过NPM的,可以先下载Node.js安装到自己电脑后就可以执行NPM命令了),如下图:
Node.js
定位到自己的项目目录后(比如我这里是study)执行NPM命令安装jweixin-module模块到项目
npm install jweixin-module
jweixin-module
安装成功后,会在项目的 node_modules 下生成 jweixin-module ,说明模块安装成功了,接下来我们就可以使用它了。
在任何您想使用该功能的vue/js文件中编写以下代码:
var wx = require('jweixin-module')
// 必须获取本地网址进行签名,要不签名会不正确
let url = location.href.split('#')[0]
uni.request({
url: 'weixin/signature', // 这个是从服务端获取微信signature签名的接口,可以根据自己的情况修改
data: {
url: url
}
}, function(res) {
if (res.code == 0 && res.data) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: ['updateAppMessageShareData','updateTimelineShareData']
});
wx.ready(function() {
// 分享给微信好友
wx.updateAppMessageShareData({
title: '分享的标题',
imgUrl: '分享的图片'
})
// 分享给微信朋友圈
wx.updateTimelineShareData({
title: '分享的图片',
imgUrl: '分享的标题'
})
})
}
})
注意事项:
1)获取微信signature签名的方式在服务端完成,这里不做介绍,具体的可以参考微信开发文档
2)必须先获取signature,然后执行wx.config后才能调用微信分享接口
3)签名传送的url地址,最好是从客户端传参,如果是在服务端生成大概率会签名失败
4)只支持在微信内置浏览器(即公众号)中发起分享,不支持非微信的普通浏览器。
5)此处的微信分享并不是直接调起原生微信分享操作,具体来讲只是设置分享内容,如果需要实际分享,需要点击微信右上角的 原生分享按钮 来实现分享(tips:直接分享的接口微信已不再提供)
以下是总结几个终端的微信分享支持情况:
APP: 好友,朋友圈
微信小程序:好友, 朋友圈(点原生胶囊按钮才可以)
微信公众号(h5):好友(需点页面按钮设置分享内容,然后点原生胶囊按钮实现分享),朋友圈(需点页面按钮设置分享内容,然后点原生胶囊按钮实现分享)
普通浏览器: 不支持
ShopWind电商系统