自定义公众号页面右上角分享
1、官方文档
分享接口
自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wx.ready(function () { //需在用户可能点击分享按钮前就先调用wx.updateAppMessageShareData({ title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})
});
自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容
wx.ready(function () { //需在用户可能点击分享按钮前就先调用wx.updateTimelineShareData({ title: '', // 分享标题link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})
});
2、问题处理
问题一： 分享时调用 updateAppMessageShareData 和 updateTimelineShareData 自定义的内容无效 但是开启debug模式 没有报错 在开发者工具里测试自定义的内容是生效的，但真机上是无效的
答：2.1 微信做了H5进入场景的判断，如果你是直接点链接进的H5，分享设置的图片，标题都会失效。需要从公众号菜单栏，或者分享卡片进去才生效。
2.2 当要分享的页面不在菜单栏进入的页面，则在菜单栏进入的页面中也引入需要的微信sdk，则可解决
3、需要分享的页面
let href = encodeURIComponent(window.location.href.split('#')[0])
this.$u.get(`${getUrl}?url=${href}`).then(res => {if (res.code === 0) {//通过config接口注入权限验证配置wx.config({debug: false,appId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature, // 必填，签名，见附录1jsApiList: ['checkJsApi', 'updateAppMessageShareData','updateTimelineShareData'], // 必填，需要使用的JS接口列表});wx.ready(function(res) {//自定义“分享给朋友”及“分享到QQ”按钮的分享内容wx.updateAppMessageShareData({title: "标题", //分享标题desc: "", //分享描述link: "链接地址", //分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致imgUrl: '图片链接', //分享图标success: function() {//设置成功}})//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容wx.updateTimelineShareData({title: "标题", //分享标题desc: "", //分享描述link: "链接地址", //分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致imgUrl: '图片链接', //分享图标success: function() {//设置成功}})});// 通过error接口处理失败验证wx.error(function(res) {console.log('res', res);});}
})
菜单栏进入的页面，也要引入需要的jsApiList
let href = encodeURIComponent(window.location.href.split('#')[0])
this.$u.get(`${getUrl}?url=${href}`).then(res => {if (res.code === 0) {//通过config接口注入权限验证配置wx.config({debug: false,appId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature, // 必填，签名，见附录1jsApiList: ['checkJsApi', 'updateAppMessageShareData','updateTimelineShareData'], // 必填，需要使用的JS接口列表});wx.ready(function(res) {});// 通过error接口处理失败验证wx.error(function(res) {console.log('res', res);});}
})
4、 隐藏右上角菜单接口
const jsApiList = ["hideOptionMenu"];
if(wx.hideOptionMenu) {wx.hideOptionMenu();
}
5、显示右上角菜单接口
const jsApiList = ["showOptionMenu"];
if(wx.showOptionMenu) {wx.showOptionMenu();
}
自定义公众号页面右上角分享相关推荐
- 微信公众号页面ios分享自定义链接失效，安卓无问题
!!! 问题:调用wxsdk后 设置的自定义分享链接 安卓没有问题 可以分享指定页面, 标题图片都有,但是ios上面有问题 什么都没有,也没有链接 如右图 上面是ios 分享的 下面是安卓分享 ...
- VUE：微信H5公众号页面禁用分享
JSSDK配置wx.config /* * jssdk初始化 * */ export function initSdk(appId,nonceStr,signature,timestamp,apiL ...
- vue微信公众号页面分享
vue微信公众号页面分享 utils=>share.js const wx = require("weixin-js-sdk"); // 这块因为我们业务是必须在公众号里面的 ...
- 解决微信公众号二次分享的BUG记录
公众号页面二次分享分享会丢失自定义的图片和标题:以下是整个过程的记录------ 修改前的代码 $(function () {shareInit();})//分享初始化function shareIn ...
- 查券机器人微信公众号配置教程分享
查券机器人微信公众号配置教程分享 一.淘宝联盟官方淘宝客私域渠道ID申请 1.登陆淘宝联盟 用需要开通淘宝联盟的手机淘宝扫码授权登陆联盟 地址:https://www.alimama.com 2.填写 ...
- 微信查券返利机器人公众号搭建教程分享
微信查券返利机器人公众号搭建教程分享 一.登陆淘宝联盟 用需要开通淘宝联盟的手机淘宝扫码授权登陆联盟 地址:https://www.alimama.com 二.配置推广位,获取PID(推荐使用会员PI ...
- 微信公众号开发之分享接口实现
微信公众号开发之分享接口实现 第一步:先登录微信公众平台进行设置JS接口安全域名("域名不能包含http://"). 如图: 第二步:配置config接口权限验证 首先需要通过获取 ...
- 微信公众号h5的分享功能
微信公众号h5的分享功能配置如下: 微信配置 wx.config({debug,appId,timestamp,nonceStr,signature,jsApiList: ['onMenuShareA ...
- 微信公众号页面模版怎么添加文章推荐功能
微信公众号中发布的文章可以添加推荐的文章,该怎么添加文章推荐功能呢?下面我们就来看看详细的教程. 微信公众号页面模版怎么添加文章推荐功能? 1.登录微信公众平台,选择"功能"--& ...
最新文章
- 讨厌php机试_[转载]PHP上机面试题
- AlphaFold证明人工智能可以解决基本的科学问题
- 图解从 URL 到网页通信原理
- maven 打包jar lib
- IPC介绍——10个ipcs例子
- lr0文法分析表示例_详解自然语言处理（NLP）5大语义分析技术及14类应用（建议收藏）...
- python 变量赋值是引用和拷贝_Python 中变量赋值传递时的引用和拷贝
- hdu 6395Sequence【矩阵快速幂】【分块】
- jsp 点击左边菜单 菜单栏没有停在二级菜单上_Excel – 如何快速导入网页上的表格？...
- SQL Server：CASE WHEN OREN ELSE END =不支持OR
- Module build failed (from ./node_modules/postcss-loader/src/index.js):
- 软件测试的艺术——软件测试的原则
- xclient 已停止工作
- AID Learning设置aidcode的启动页面
- 【企业管理】2021年商业计划书PPT模板（68份）
- 经典的10句人生箴言
- 为激情为生---“激情团队宣言”
- 大二了 突破自己，努力，加油
- Credit Card Fraud Detection（信用卡欺诈检测相关数据集）
- 阿里面试现场实录，三轮技术面+HR面总结归纳，属于包教包会的面经了