实现h5网页微信分享、朋友圈分享功能(微信右上角分享)_h5分享到微信朋友圈-程序员宅基地

技术标签: html5  微信  javascript  uni-app  

!!!!注: 

  1. 在公众号菜单中的链接打开并分享后才能显示正常图文;
  2. APP分享图文内容到微信好友时是图文,那打开该链接后分享的也是图文;
  3. 把链接换成二维码,扫码后进入分享也是图文。如果是用微信直接打开链接分享会是链接。

微信打开h5网页右上角分享功能需要前端和后台配合实现功能

后台工作: 根据微信网页开发文档撰写一个接口返回一个对象给前端, 以下为返回结果

{
    appId: '', // 公众号的唯一标识,需要注册公众号提供appid
    timestamp: '', // 生成签名的时间戳
    nonceStr: '', // 生成签名的随机串
    signature: '' // 签名
}

前端工作: 

1. 获取微信网页SDK

npm install jweixin-module -S

2. 引入SDK,并进行相关配置 

import wx from 'jweixin-module';

wxShareConfig({title, desc, link, imgUrl}){
    // 从后台异步获取的数据对象
    let data = {
        appId: '',
        timestamp: '',
        nonceStr: '',
        signature: ''
    }
    wx.config({
	  debug: true, // true 为测试版 可查看配置成功或失败的信息 正式使用时需要改为false
	  appId: data.appId, // 必填,公众号的唯一标识,需要注册公众号提供appid
	  timestamp: data.timestamp, // 必填,生成签名的时间戳
	  nonceStr: data.nonceStr, // 必填,生成签名的随机串
	  signature: data.signature,// 必填,签名,见附录1
	  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 updateAppMessageShareData
	});
	wx.ready(()=>{
        // 分享到微信好友内容设置
		wx.updateAppMessageShareData({
			title, // 分享标题
			desc, // 分享内容的摘要
			link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl, // 分享图标
			success: function () {
                alert('设置成功, 设置成功之后, 在当前网页点击微信右上角分享时就是你设置的内容')
            },
            fail: function (reject) {
                alert(JSON.stringify(reject))
            }
		})
        // 分享到微信朋友圈的内容设置
		wx.updateTimelineShareData({
			title, // 分享标题
			link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl, // 分享图标
			success: function () {
                alert('设置成功, 设置成功之后, 在当前网页点击微信右上角分享时就是你设置的内容')
            },
            fail: function (reject) {
                alert(JSON.stringify(reject))
            }
		})
	})
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39532984/article/details/131574872

智能推荐

ECharts--中国地图(无敌详细)_echarts中国地图-程序员宅基地

文章浏览阅读5.4w次,点赞64次,收藏262次。使用Echarts绘制中国地图,其中地图点信息由JSON文件编写,前端html直接从JSON文件中读取地区数据,渲染到前端即可。详细介绍用到的各个功能!代码直接复制运行即可!_echarts中国地图

数据类型转换问题-程序员宅基地

文章浏览阅读343次,点赞9次,收藏10次。使用函数tolist()之后数据发生变化,从小数点后4位变成小数点后16位,如何才能让数据不变化?list:包含3608个[128,100]的张量。使用for循环将张量都转化成二维数组列表。

element中表单错误提示信息被遮盖_el-form-item_error文字过长-程序员宅基地

文章浏览阅读5.9k次。提示信息被遮盖解决方法  可以给form-item加一个特定的class,不影响其他的提示框,然后设定width,可以把所有内容显示。代码vue的template代码<el-form-item label="用户微信" prop="userWeChat" class="weixinError"> <el-input v-model="userInfo.userWeChat" maxlength="20"></el_el-form-item_error文字过长

sqlmap安装以及运用_kali安装sqlmap-程序员宅基地

文章浏览阅读1.7k次。sqlmap是一个开源的渗透测试工具,它可以自动化检测sql注入漏洞利用sql注入缺陷 接管数据库服务器。_kali安装sqlmap

【曼哈顿距离】第六届蓝桥杯省赛C++ B组 /JAVA A组C组《移动距离》(c++)_移动距离 蓝桥杯 c++-程序员宅基地

文章浏览阅读598次,点赞19次,收藏4次。本题来自第六届蓝桥杯省赛C++ B组 /JAVA A组C组《移动距离》_移动距离 蓝桥杯 c++

zram disksize 设置_use_dedup-程序员宅基地

文章浏览阅读3.4k次。zram disksize 设置小内存项目:1G,2G,3G RAMzram disksize设置.高通:高通的设置比较简单:相关代码:init.qcom.post_boot.shif [ -f /sys/block/zram0/disksize ]; thenif [ -f /sys/block/zram0/use_dedup ]; thenecho 1 > /sys/block/zram0/use_dedupfiif [ $MemTotal -le5242_use_dedup

随便推点

UNIX环境高级编程_标准io创建空头文件-程序员宅基地

文章浏览阅读492次。unix环境高级编程笔记_标准io创建空头文件

apt-get update 报错:*** Error in `appstreamcli‘: double free or corruption (fasttop)_sudo apt-get update error in appstreamcli-程序员宅基地

文章浏览阅读1.3k次。环境:ubuntu 16.04在执行apt-get update时直接报错了,错误信息如下:从返回的错误信息可以看出,问题出在“appstreamcli”上。通过以下命令可以解决:sudo apt install appstream/xenial-backportssudo appstreamcli refresh –force亲测可行。..._sudo apt-get update error in appstreamcli

matlab文件路径操作 mfilename_matlab里面打开文件找不到main-程序员宅基地

文章浏览阅读9.5k次,点赞3次,收藏20次。很多时候我们需要把代码发给别人,而运行的代码可能包含路径。例如,你在你的电脑上需要加载一个mat文件,你的代码中包含了这个mat文件的具体的路径。例如,load('C:\Users\ncf\Desktop\计算机视觉大作业\program\xixi.mat'),当你把这个代码文件夹压缩发给别人时,别人一运行就会报错,这时我们需要自动识别,mat文件的路径。mfilename函数可以返回当前..._matlab里面打开文件找不到main

ssm+jsp计算机毕业设计职业高中学情成绩系统ci2a1(程序+lw+源码+远程部署)-程序员宅基地

文章浏览阅读22次。Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。2. 前端:L ayui+css+javascript+jQuery+ElemenUI+highcharts。SSM + mybatis + Maven + JSP 等等组成,B/S模式 + Maven管理等等。2. 使用IDEA/Eclipse/MyEclipse导入项目,修改配置,运行项目;

Windows命令行(CMD/Powershell)下载文件的命令_windows 命令提示符下载网页文件命令-程序员宅基地

文章浏览阅读733次,点赞3次,收藏8次。Windows命令行下载文件的方法_windows 命令提示符下载网页文件命令

渗透测试-安服面试点总结_安服题-程序员宅基地

文章浏览阅读1.5k次。渗透测试-安服面试点总结_安服题