Html5页面在微信端的分享的实现方法


Posted in HTML / CSS onAugust 30, 2018

微信分享,咋一看好像很复杂,实则非常简单。只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

一、获取基本信息

找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp、noncestr和signature。

二、实现

1、页面引入JS-SDK文件

通过script标签,引入微信官网的JS-SDK文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

2、基本配置

wx.config({
  debug: false, // 是否开启调试模式
  appId: appid, //appid
  timestamp: timestamp, // 时间戳
  nonceStr: noncestr, // 随机字符串
  signature: signature, // 签名
  jsApiList: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareWeibo',
    'onMenuShareQZone'
  ] // 需要使用的JS接口列表
})

3、使用

wx.ready(function(){
  // 分享给好友
  wx.onMenuShareAppMessage({
    title: title, // 分享标题
    desc: desc, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
      doShareDone()
    },
    cancel: function () {
      doShareCancel()
    }
  })
  
 // 分享到朋友圈
  wx.onMenuShareTimeline({
    title: title, // 分享标题
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
      doShareDone()
    },
    cancel: function () {
      doShareCancel()
    }
  })
})
// 分享成功回调
function doShareDone () {
  console.log('分享成功')
}
// 取消分享回调
function doShareCancel () {
  console.log('取消了分享')
}

三、调试

wx.config里的debug字段设置为true时,就可以进行调试。

调试要用到微信开发者工具,选择公众号网页项目,输入页面地址就可以了。

四、遇到的问题及解决方案

微信JS-SDK说明文档的附录5里有大部分问题的解决方案,在这里我列出我遇到的几个上面没有给出解决方案的。

1、Uncaught TypeError: Cannot read property 'config' of undefined

解决:html页面单独引入了sdk,并且组件统一也引入了一遍sdk,导致问题,删除其中之一。

2、Uncaught (in promise) TypeError: Cannot read property 'ready' of undefined

解决:同问题1。

3、invalid signature

解决:如果文档里的方法都没有解决这个问题,还有一种方法,先设置一种最基础的配置,使其config ok,然后再设置一遍自己需要的有各种参数的分享文案,这样能绕过配置,成功分享。说的可能有点拗口,简单点理解就是,页面只要有一个config成功的配置,就可以再继续配置其它分享,哪怕这个分享配置的signature无效。

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

HTML / CSS 相关文章推荐
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 #HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 #HTML / CSS
html5新特性与用法大全
Sep 13 #HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 #HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 #HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 #HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 #HTML / CSS
You might like
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
php开发工具有哪五款
2015/11/09 PHP
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
python实现人机五子棋
2020/03/25 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
介绍一些UNIX常用简单命令
2014/11/11 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
施工安全协议书
2013/12/11 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
小学生差生评语
2014/12/29 职场文书
捐资助学感谢信
2015/01/21 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS