微信分享到朋友圈怎么设置不了,微信分享

首页 > 实用技巧 > 作者:YD1662023-05-17 14:51:09

在Uniapp开发中,如果我们要做微信分享功能,比如分享给微信好友或发布到朋友圈,我们只要使用uniapp提供的一个接口(uni.share)就可以实现,但是这个接口仅支持小程序和APP端,而H5端却无法使用该接口,也就无法实现分享功能。

在H5端,我们通常使用以下方案来解决,在给出例子代码之前,我们首先要安装一个模块(jweixin-module),这个模块可以通过NPM的方式来安装(如果没有使用过NPM的,可以先下载Node.js安装到自己电脑后就可以执行NPM命令了),如下图:

微信分享到朋友圈怎么设置不了,微信分享(1)

Node.js

定位到自己的项目目录后(比如我这里是study)执行NPM命令安装jweixin-module模块到项目

npm install jweixin-module

微信分享到朋友圈怎么设置不了,微信分享(2)

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):好友(需点页面按钮设置分享内容,然后点原生胶囊按钮实现分享),朋友圈(需点页面按钮设置分享内容,然后点原生胶囊按钮实现分享)

普通浏览器: 不支持

微信分享到朋友圈怎么设置不了,微信分享(3)

ShopWind电商系统

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.