H5 页面在微信端的分享
微信分享,咋一看好像很复杂,实则非常简单。只需要调用微信官方出的微信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()
}
})
})
三、调试
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成功的配置,就可以再继续配置其它分享,哪怕这个分享配置的signature无效。
H5 页面在微信端的分享的更多相关文章
- H5页面在微信端的分享
微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为:https://mp.weixin.qq.com/wik ...
- h5页面判断微信端用浏览器打开代码
<div class="weixin-tip"> <p> <img src="img/live_weixin.png" alt=& ...
- H5页面在微信中禁止下拉露出网页
H5页面在微信中禁止默认事件的执行,js添加代码 $(function () { /************微信h5页面禁止下拉露出网页来**************/ $('body').on('t ...
- 公众号H5页面接入微信登录流程
公众号H5页面接入微信登录流程 源码地址 https://gitee.com/szxio/h5_weixin 起步 首先创建一个项目,我们采用uni-app来作为我们的前端框架 环境安装 全局安装vu ...
- 前端如何在h5页面调用微信支付?
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...
- WIFI物联网平台微信端开发分享
本文由企鹅圈原创成员Hunter_Zhu贡献. 本篇文章是基于近期一个项目微信端开发过程的一个总结.文中主要介绍了云智易平台下微信端开发的流程.该平台提供的主要功能以及此次H5开发使用到的一些UI组件 ...
- 关于H5页面在微信浏览器中音视频播放的问题
Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以视频播放的效果差异也很大,这里主要以微信为主.微信使用的是腾讯浏览器自带的X5内核. 而iOS是不允许使用第三方浏览器内核的,就是Goo ...
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
- 小程序内嵌H5页面判断微信及小程序环境
判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...
随机推荐
- VR外包AR外包公司(虚拟现实外包公司)承接虚拟现实项目开发(企业、教育、游戏)
VR外包AR外包公司(虚拟现实外包公司)承接虚拟现实项目开发(企业.教育.游戏) 可公对公签正规合同,开发票. 我们是北京的公司.专业团队,成员为专业 VR/AR 产品公司一线开发人员,有大型产品开发 ...
- 2018.3 江苏省计算机等级考试 C语言 编程题答案
题目要求:给定一个数字范围,输出满足这些条件: 1.能被3整除: 2.包含数字5, 将满足的数字放在特定的数组里输出.输出这些数里5出现的个数.数字的个数. 想起来有点伤心,本来很简单的题,考试的时候 ...
- java.lang.TypeNotPresentException: Type javax.xml.bind.JAXBContext not present错误
今天在搭建spring cloud的时候,发现一直报“java.lang.TypeNotPresentException: Type javax.xml.bind.JAXBContext not pr ...
- testin 测试用例管理平台
应用信息:应用图标,应用名称,版本号,应用包名,系统平台[Android,ios,Web/H5,小程序,快应用]项目成员:成员帐号[邮箱],成员姓名,成员角色,成员职位,状态[激活,未激活],操作[移 ...
- Qt532.【转】Qt在pro中设置运行时库MT、MTd、MD、MDd,只适合VS版本的Qt
ZC:具体应该设置 什么参数,可以参看 自己转载的文章:"VC.[转]采用_beginthread__beginthreadex函数创建多线程 - CppSkill - 博客园.html&q ...
- 记录结果再利用的"动态规划"
2018-09-24 15:01:37 动态规划(DP: Dynamic Programming)是算法设计方法之一,在程序设计竞赛中经常被选作题材.在此,我们考察一些经典的DP问题,来看看DP究竟是 ...
- Java定时器的三种实现方式
一.普通thread /** * 普通thread * 这是最常见的,创建一个thread,然后让它在while循环里一直运行着, * 通过sleep方法来达到定时任务的效果.这样可以快速简单的实现, ...
- makefile 里的 := , = , +=
:= 是在这行代码的时候,直接展开右边的变量. = 是在最终左边变量被使用的时候,才把右边的变量展开. https://stackoverflow.com/questions/10227598/wha ...
- django-simple-captcha 验证码插件介绍 django-simple-captcha 使用 以及添加动态ajax刷新验证
django-simple-captcha作为一款django的验证码插件,使用方法非常简单,能够快速应用到web应用中. 文档官网地址:django-simple-captcha 参考博客:http ...
- Python 编程快速上手 第六章总结
第六章 字符串操作 前言 这一章节讲了关于 Python 中字符串类型的知识.与字符串有关的操作符,方法等等. 处理字符串:字符串的写入.打印.访问的知识 原始字符串 格式:r'string'作用:在 ...