微信h5实现分享给朋友url改变_h5微信自定义分享
为了h5页面在微信分享效果更好,我们接入了 h5 微信sdk,下面对接入流程总结。
1、在项目中引用微信的js-sdk
2、在微信公众平台绑定安全域名
3、配置config
在1,2步操作成功后,进入我们写代码正题,我们需要在入口js中配置config
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '',
timestamp: ,
nonceStr: '',
signature: '',
jsApiList: []
});
参数说明:
appId:公众号的唯一标识,在公众号中可以取到;
timestamp:生成签名的时间戳
nonceStr: 生成签名的随机串
signature: 最后生成的签名
jsApiList: 需要使用的JS接口列表,我们这里是用分享接口,将分享几个api接口填进去,例如:['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareQQ']
(备注:出于安全考虑,微信要求开发者必须在服务器端实现签名的逻辑,故timestamp, nonceStr,signature 可以通过请求自己服务器返回。如果有兴趣了解是如何生成的,如下图1所示。)
图1
4、wx.ready中配置自定义分享信息
config 配置玩成功后,可以在wx.ready回调填写自定义的信息,如下:
wx.ready(function () {
wx.onMenuShareQQ({ //分享QQ
title: data.wxTitle, // 分享标题
link: data.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致且分享的地址不要带端口
desc: data.wxDesc,
imgUrl: data.wxImg || defaultIcon, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
// alert(e);
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.updateAppMessageShareData({ // 分享好友
title: data.wxTitle, // 分享标题
link: data.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致且分享的地址不要带端口
desc: data.wxDesc,
imgUrl: data.wxImg || defaultIcon, // 分享图标
type: "", // 分享类型,music、video或link,不填默认为link
dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
success: function (e) {
// 用户点击了分享后执行的回调函数
// alert(e);
}
});
wx.onMenuShareTimeline({ // 分享朋友圈
title: data.wxTitle, // 分享标题
link: data.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致且分享的地址不要带端口
desc: data.wxDesc,
imgUrl: data.wxImg || defaultIcon, // 分享图标
success: function (e) {
// 用户点击了分享后执行的回调函数
// alert(e)
}
});
});
总结
到这一步分享的操作基本就完成了,建议在测试时将debug打开,看看分享提示,从而判定是否分享成功。如果不成功,可以参考一下在开发时候遇到的坑。
出现nvalid url domain提示
1)检查当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,仅支持80(http)和443(https)两个端口,因此不需要填写端口号。
出现invalid signature签名错误提示
1)检查生成signature是否正确,可以通过签名校验工具来判定后端传过来的nonceStr、timestamp与请求后端接口传的地址,与最后签名是否一致。
2) config时,nonceStr 记得驼峰写法哦。
3) 签名用的url必须是调用JS接口页面的完整URL,即当前页面的完整URL。
提示是成功的,但是分享出来图标不见或者desc不显示的情况
1) 分享的地址不要带端口号哦,我们之前带了3000端口,造成出现了这种情况。
2)分享desc 不要带有敏感词汇,我们带礼包之类的词汇,竟然被也出现这种情况...
以上是对本次微信分享的总结,如果需要更详细的了解内容,可以从微信官网文档更深入的了解。
参考资料:微信官网文档点击查看
微信h5实现分享给朋友url改变_h5微信自定义分享相关推荐
- 微信h5实现分享给朋友url改变_h5 微信分享朋友和朋友圈
生成JS-SDK权限验证签名 实现发送给朋友和分享到朋友圈时内容参数自定义 一.微信JS-SDK 1. 获得Access Token access token的获得方法在前面有介绍,详情见 微信公众平 ...
- 微信h5实现分享给朋友url改变_h5网页 微信分享给好友,朋友圈-tp5
控制器 vendor('wechat.jssdk'); $jssdk =new JSSDK("appid", "appsecret"); $signPackag ...
- 微信公众平台开发之在网页上添加分享到朋友圈,关注微信号等按钮
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
- 微信分享给朋友 图片显示正常,但是分享到朋友圈图片黑色【显示不出来】
#微信分享给朋友 图片显示正常,但是分享到朋友圈图片黑色[显示不出来] A.初始图片为PNG 透明无背景色, 解决过程: 1.修改了文件名等还是不行 2.将原有图片添加背景色后显示正常 总结:微信分享 ...
- H5一段文字中有URL链接地址,自定义拼接a标签可以让他点击跳转
H5一段文字中有URL链接地址,自定义拼接a标签可以让他点击跳转 实现如图效果,有时候第三方接口返回的数据是没有加a标签的,所有我们如果想要让它点击,需要自己进行修改. //链接可点击// _that ...
- 小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...
- android qq微信分享到朋友圈,android实现微信朋友圈和微信好友分享功能
今天的这篇文章是基于上一篇微信登录的基础实现的.可以先看看我的微信登录的实现. 废话不多说,先看运行效果 首界面,点击微信登录,弹出分享菜单,楼主比较懒,图片和按钮文字都没换,希望大家不要介意 点击微 ...
- 堆米微信H5页面怎么制作?易企秀微信H5页面制作,微信简历制作,
现在移动互联网如火如荼,微博过后,微信更是势不可挡.相对于微博的垃圾广告信息泛滥,微信对内容的控制不可谓不严格.当然相对于微博,微信的用户粘性更高,也就是说微信的粉丝价值更高,但是鉴于腾讯对公众号推广 ...
- 微信h5小游戏作品欣赏:详解微信h5如何制作
随着移动信息技术的发展,微信h5页面展示也有了新的创新,下面分享一款好玩的TOM游戏案例,一起来看看吧.H5有戏作为一种时下最受欢迎的推广方式,H5具有交互性好.易传播等优势. 制作h5页面流程:需求 ...
最新文章
- 利用c语言检测气体浓度,一氧化碳气体检测仪的算法设计
- 2020 年,让 OKR 助力你稳住 flag 清单!
- android studio编译JNI问题ninja: fatal: couldn‘t open nul的解决
- 全球及中国晶圆键合和解键合设备行业竞争格局分析及投资前景评估报告2021年版
- Linux中sudo配置
- yum安装docker(阿里镜像源)及docker-compose二进制安装
- Java后台请求远程链接
- 连接mysql报错有乱码_连接mysql服务器报错时,出现乱码
- Ubuntu开机启动Python脚本
- 棋盘问题 POJ - 1321
- Uber 和通用拟开源自动驾驶可视化软件
- 2018-7-10杂记
- 【转载】Apache如何设置访问一个目录需要密码
- WEB 端批量移动设备管理控制工具 STF 的环境搭建和运行
- 大数据分析技术趋势有哪些
- win7便签backup
- 档案管理系统,项目总结
- 新乡医学院三全学院赴范县历史成就观察团
- 用excel函数COUNTIF实现两列数据对比找出不同数据
- 南澳大学计算机科学专业学费,澳洲南澳大学生活费
热门文章
- Python 数据结构与算法 —— 链表
- Python 进阶 —— defaultdict
- logback日志pattern_[SpringBoot2.X]28- Spring Boot 的日志管理
- js原型和原型链_初识JS原型/原型链/原型继承
- python中文读音-python3 - 文本读音器
- 为什么黑客都用python-终于发现为什么黑客都用python
- python基础教程廖雪峰云-为什么看不懂廖雪峰的Python学习教程?
- python安卓下载-QPython下载
- python基础编程语法-Python基础语法一
- 自学python能学成吗-Python能自学成功吗?