微信h5页面分享实现

官方适配问题反馈地址
发送邮件到 wx_wkwebview@qq.com 。请提供详细问题说明，强烈建议附上问题页面的链接，并告知如何复现你们的问题。
js需求

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

配置信息

wx.config({debug: false,appId: '',//后台获取timestamp: '',//后台获取nonceStr: '',//后台获取signature: '',//后台获取jsApiList : [// 所有要调用的 API 都要加到这个列表中'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard'],});wx.ready(function(){//必须写在wx.ready里面wx.onMenuShareAppMessage({title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致（二级域名一致）imgUrl: '', // 分享图标最大300*300（二级域名一致）dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () {// 用户确认分享后执行的回调函数// alert('成功');},cancel: function () {// 用户取消分享后执行的回调函数}});});

接口校验地址https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

详细的文档

function shareToApp(obj) {wx.config({debug: false,appId: obj.appId,  timestamp: obj.timestamp,nonceStr: obj.nonceStr,signature: obj.signature,jsApiList: [ // 所有要调用的 API 都要加到这个列表中'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard'],});// 获取当前页面路径var hostName = window.location.origin;wx.ready(function () { //必须写在wx.ready里面var link =  obj.link;var imgPath =obj.img;  // 不大于300*300var title = "";var desc = "";wx.onMenuShareTimeline({title: title, // 分享标题link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgPath, // 分享图标success: function () {},cancel: function () {// 用户取消分享后执行的回调函数}});wx.onMenuShareAppMessage({title:title,desc: desc,link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgPath, // 分享图标type: 'link', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () {},cancel: function () {// 用户取消分享后执行的回调函数}});wx.onMenuShareQQ({title: title, // 分享标题desc: desc,link: link, // 分享链接imgUrl: imgPath, // 分享图标success: function () {},cancel: function () {// 用户取消分享后执行的回调函数}});wx.onMenuShareWeibo({title: title, // 分享标题desc:desc,link: link, // 分享链接imgUrl: imgPath, // 分享图标success: function () {},cancel: function () {// 用户取消分享后执行的回调函数}});wx.onMenuShareQZone({title:title,desc: desc,link: link, // 分享链接imgUrl: imgPath, // 分享图标success: function () {},cancel: function () {// 用户取消分享后执行的回调函数}});});
}

微信h5页面分享实现相关推荐

微信H5页面分享案例模版
$.post("http://请求url", {url: location.href.split('#')[0]}, function (d) { if (d) { ...
vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法
随着H5页面越来越流行,越来越多的开发者都开始用最近H5做微信公众号,在这个过程中自然也会遇到不少的问题.小编在这里整理了五种常见的微信H5页面兼容性问题,来和大家分析一下问题的详情.出现原因以及相对 ...
微信 H5 页面前端开发，大多数人都会遇到的几个兼容性坑
关注上方"前端开发博客",选择"设为星标" 回复"2"加入前端群最近给公司写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑, ...
微信H5页面前端开发，大多数人都会遇到的几个兼容性坑(转载)
1.ios端兼容input光标高度问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光 ...
微信H5页面兼容性解决方案
点击上方蓝字关注,关注后还可加入「前端交流群」共同进步作者:codercao https://juejin.im/post/5d47d2eff265da03f77e4e3a 最近给公司微信公众号,写 ...
微信 H5页面自定义分享link不起作用
微信 H5页面自定义分享link不起作用最近在做这么一个功能: H5页面在微信内打开并通过设置微信自定义分享来分享出指定的标题.图片.link 但是却遇到了问题,分享指定的link没起作用,正常通过 ...
微信H5页面隐藏点击右上角的分享功能
微信H5页面隐藏点击右上角的分享功能注:H5页面右上角的三个点是微信自带的,所以不能去掉,只是可以隐藏点击后的分享功能右上角分享功能的显示与隐藏 <script>// 隐藏docume ...
C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...

微信h5页面分享实现

微信h5页面分享实现相关推荐

最新文章

热门文章