Html5页面二次分享的实现


Posted in HTML / CSS onJuly 30, 2018

对于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回调函数中触发)

Html5页面二次分享的实现

关于api调不通错误整理

  • invalid url domain,我的问题是js安全域名没搞
  • invalid url signature,我的问题是jsapi_ticket没有更新过来
  • 微信 JS 接口签名校验工具

QQ二次分享先说文档

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

怎么去设置二次分享

通过meta标签是最科学的。

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

有没有什么要注意的

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

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

本文写于 2018年7月30日

测试时间 2018年7月30日

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 #HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 #HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 #HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 #HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 #HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 #HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 #HTML / CSS
You might like
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
PHP 第一节 php简介
2012/04/28 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php实现生成验证码实例分享
2016/04/10 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
2014年五一劳动节社区活动总结
2014/04/14 职场文书
2014年科研工作总结
2014/12/03 职场文书
音乐之声观后感
2015/06/04 职场文书
文化大革命观后感
2015/06/17 职场文书
教师读书活动心得体会
2016/01/14 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
Java 在线考试云平台的实现
2021/11/23 Java/Android