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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python实现大文件排序的方法
2015/07/10 Python
Python装饰器用法示例小结
2018/02/11 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python如何修改文件时间属性
2021/02/05 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
手术室护士自我鉴定
2013/10/14 职场文书
微电影大赛策划方案
2014/06/05 职场文书
商场父亲节活动方案
2014/08/27 职场文书
七年级地理教学计划
2015/01/22 职场文书