H5页面二次分享

简介: 对于H5页面来说二次分享还是蛮重要的,毕竟qq还是微信发出去之后习惯性的使用自带的分享功能。和PC端不同,PC直接复制地址了。前两天在做请柬,踩了不少的雷,个人开发和公司开发还是不一样,各种问题,其他问题放在一个请柬的后记里面说吧。我们开始正题。

微信二次分享


微信的文档还是不错的。通篇看完的话,基本上能避过很多坑(记得微信文档习惯把一些坑写在后面,不放在一起


先说说,怎么微信怎么做二次分享


文档地址,通过引入官方API。文档写挺好,直接传入shareInfo就得了。


<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: sign.appid, // 必填,公众号的唯一标识
    timestamp: sign.timestamp, // 必填,生成签名的时间戳
    nonceStr: sign.nonceStr, // 必填,生成签名的随机串
    signature: sign.signature, // 必填,签名,见附录1
    jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function() {
    wx.showOptionMenu();
    wx.onMenuShareAppMessage(shareInfo); //获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
    wx.onMenuShareTimeline(shareInfo); //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
    wx.onMenuShareQQ(shareInfo); //获取“分享到QQ”按钮点击状态及自定义分享内容接口
    wx.onMenuShareWeibo(shareInfo); //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    wx.onMenuShareQZone(shareInfo); //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
});


微信二次分享有坑吗?


唉?我写对了怎么没通?文档上下也没写有什么要求呀?


先查看 微信公众平台-开发-接口权限 发现没权限的都提示未获得,然后去进行微信认证,我这个分享接口提示已获得了呀。上面说过什么?微信的文档可以去后面查看一般都有说明。就是下面这句话,那么问题就来了,个人号是没法做认证的。


在iOS和Android都无法分享(请确认公众号已经认证,只有认证的公众号才具有分享相关接口权限,如果确实已经认证,则要检查监听接口是否在wx.ready回调函数中触发)

bVbev3X.webp.jpg


关于api调不通错误整理


  1. invalid url domain参考链接),我的问题是js安全域名没搞


  1. invalid url signature参考链接),我的问题是jsapi_ticket没有更新过来


  1. 微信 JS 接口签名校验工具


QQ二次分享


先说文档


网上流传的文档,什么api的,我试了,不好使。通过地址进去,最后的维护都是15年什么的。


怎么去设置二次分享


通过meta标签是最科学的。


<meta itemprop="name" content="标题" />
<meta itemprop="image" content="副标题" />
<meta name="description" itemprop="description" content="分享图" />


有没有什么要注意的


这个meta标签不能后添加,必须进入页面的时候就有,也就是说只能走后台模板。不然的话,部分Android低版本拉取不到摘要(是的,有的手机动态的可以拿到),iOS不支持。


其实技术类文章都是有时效的

相关文章
|
5月前
|
SQL
二次查询过程
【7月更文挑战第8天】
71 7
|
5月前
|
存储 前端开发 JavaScript
前端菜单及按钮权限拦截,实现方案及思路
此实现方案基于vue框架,并需要依赖vue项目相关的库,router、store等等;前端同学要与后端同学协商,常规是让后端返回一个树结构的菜单数据,并且将所有的涉及权限控制的页面path给到后端,如果是按钮,需要把所有的按钮 code 码统一下,这是前期工作,很重要。
若依颜色失效怎么办?F12刷新样式不管用,回到控制台,重新点击项目链接就好了
若依颜色失效怎么办?F12刷新样式不管用,回到控制台,重新点击项目链接就好了
公开访问,子表单没有批量导入按钮
宜搭,子表单,批量导入,公开访问,没有批量导入功能
公开访问,子表单没有批量导入按钮
|
前端开发
前端学习笔记202305学习笔记第二十二天-登录页简单验证1
前端学习笔记202305学习笔记第二十二天-登录页简单验证1
48 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-登录页简单验证2
前端学习笔记202305学习笔记第二十二天-登录页简单验证2
57 0
|
小程序 Android开发
(成功最详细版本,自定义传参失败,跳转出现空白页面,校验文件失败)微信小程序扫码跳转小程序指定页面保姆级教程
文档里面虽然说了,但是还是有几个坑的地方,坑等文章最后面再写扫普通链接二维码打开小程序 | 微信开放文档
396 0
(成功最详细版本,自定义传参失败,跳转出现空白页面,校验文件失败)微信小程序扫码跳转小程序指定页面保姆级教程
|
人工智能 前端开发
「前端技巧总结」多个页面的操作聚合到某个页面的实现方案
用技术实现梦想,用梦想打开前端技术之门。分享我在日常开发中总结的前端技巧,今天是多个页面的操作聚合到某个页面的实现方案。
287 0
|
JavaScript 前端开发
【Layui】关于做了分页后点击删除按钮无效(或者在任何框架点击一个按钮无效解决方案)
【Layui】关于做了分页后点击删除按钮无效(或者在任何框架点击一个按钮无效解决方案)
293 0
【Layui】关于做了分页后点击删除按钮无效(或者在任何框架点击一个按钮无效解决方案)
|
小程序
小程序-点击按钮式 进行页面之间的跳转
小程序-点击按钮式 进行页面之间的跳转

热门文章

最新文章