H5页面分享微信自定义分享title和img
前端开发H5 需分享到朋友圈和发给好友,想自定义分享的title和图表还有简短一句话,还需调用微信的api
首先需获取到微信的appId,timestamp,nonceStr,signature
微信JS-SDK说明文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
//微信分享代码
//通过config接口注入权限验证配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appid, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名,见附录1
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function () {
wx.onMenuShareTimeline({
title: '分享标题', // 分享标题
link: 'http://papastyle.cn’, // 分享链接
imgUrl: 'http://papastyle.cn/images/logo.jpg', // 分享图标
success: function () {
},
cancel: function () {
}
});
wx.onMenuShareAppMessage({
title: '分享标题', // 分享标题
desc: ' ,我正在参加"活动",请为我投票!', // 分享描述
link: 'http://papastyle.cn', // 分享链接
imgUrl: 'http://papastyle.cn/images/logo.jpg', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
H5页面分享微信自定义分享title和img的更多相关文章
- H5 页面在微信端的分享
微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为: https://mp.weixin.qq.com/wi ...
- H5微信自定义分享链接(设置标题+简介+图片)
起源:最近公司在做招募广告的html5页面,然后做出来后,产品提出一个问题,需要分享出去的链接是卡片形式,内容也要自己定义,这下就难到我了,因为是第一次遇到这种需求,果断百度,然而,我就像大家一样,看 ...
- H5页面在微信端的分享
微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为:https://mp.weixin.qq.com/wik ...
- Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法
简述需求:要求指定页面可以进行微信自定义分享(自定义标题,描述,图片,链接),剩下的页面隐藏所有基础接口.二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享. 这两天在做微信自定义分享的 ...
- ThinkPHP5集成JS-SDK实现微信自定义分享功能
最近开发一个项目,需要将链接分享给好友时能够自定义标题.简介和logo,现将ThinkPHP5集成JS-SDK实现微信自定义分享功能的过程整理成文. 一.准备工作 1.认证的公众号 不管是订阅号还是服 ...
- 生成二维码、微信自定义分享到朋友圈、ipa不从应用商店安装
生成二维码网址:http://www.liantu.com/ 微信自定义分享到朋友圈:http://www.cnblogs.com/memor-y/p/6728179.html ipa不从应用商店安装 ...
- H5页面在微信中禁止下拉露出网页
H5页面在微信中禁止默认事件的执行,js添加代码 $(function () { /************微信h5页面禁止下拉露出网页来**************/ $('body').on('t ...
- 公众号H5页面接入微信登录流程
公众号H5页面接入微信登录流程 源码地址 https://gitee.com/szxio/h5_weixin 起步 首先创建一个项目,我们采用uni-app来作为我们的前端框架 环境安装 全局安装vu ...
- 安卓端 - H5页面在微信分享、收藏、保存图片不成功
经过代码实践: 原因是微信在分享.收藏和保存时会获取到图片信息,当图片过大时,造成失败
随机推荐
- Linux 创建文件系统及挂载文件系统流程详解(转)
作者:北南南北 来自: LinuxSir.Org 摘要:本文对新增硬盘,切割硬盘,创建硬盘分区,为硬盘分区创建文件系统,以及加载文件系统的流程做总结性论述:主要是为初学者弄清楚这一操作过程:本文涉及f ...
- 洛谷P1042 乒乓球【模拟】
题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中111111分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华就是其中一位 ...
- 大疆OSMO口袋云台相机惊艳上市!友商该如何是好。。。
2018.11.29 晚上更新: 下午看了大疆新出的口袋云台摄像机,感觉棒极了,于是我立刻去了京东下单预订了.目前是可以免息分期6个月就可以搞定了.‘ 大家敬请期待我的评测视频吧. ======== ...
- 解决webstorm拉取Vue项目时卡顿,及内存爆满问题
最近在拉取Vue项目时总是会出现webstorm内存瞬间爆满,导致webstorm卡死,而且,有时在下载完node_modues后webstorm一直处于updating中,为此在网上找了很多方法结果 ...
- BZOJ 1003 - 物流运输 - [最短路+dp]
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1003 Time Limit: 10 Sec Memory Limit: 162 MB D ...
- [No0000150]VSVisualStudio提示图标,信号图标的含义
其右侧的图标表示这是一个接口类型__interface(或者是结构体类型) 其右侧图标表示这是一个类类型 其右侧图标表示这是一个.cpp文件(貌似还可以是.hpp等文件) 其右侧图标表示这是一个枚举类 ...
- [No0000BB]ReSharper操作指南4/16-配置ReSharper代码快修与导航
代码问题的快速修复 ReSharper可以帮助您立即修复设计时检测到的大部分代码问题.就像按Alt+Enter突出显示的代码问题一样简单,并选择合适的方法来解决问题或改进次优代码. GIF 应用快速修 ...
- SQL Fundamentals: 子查询 || WHERE,HAVING,FROM,SELECT子句中使用子查询,WITH子句
SQL Fundamentals || Oracle SQL语言 子查询(基础) 1.认识子查询 2.WHERE子句中使用子查询 3.在HAVING子句中使用子查询 4.在FROM子句中使用子查询 5 ...
- 【待补】splay 模板
#define _CRT_SECURE_NO_WARNINGS #include<cmath> #include<iostream> #include<stdio.h&g ...
- [daily] 在CentOS7中使用 sanitizer-address 发现内存问题 / CentOS7使用SCLo软件源安装devtoolset软件
接前文: [daily] 内存越界的分析与定位 如前文提及, 使用sanitizer-address 可以有效的检查程序的内存问题. 当时在CentOS7中,虽然也可以使用,但是却遇到如下两个问题: ...