微信内分享页面onMenuShareAppMessage开发采坑实录

最新推荐文章于 2024-09-25 00:20:54 发布

OUYANGYUER3

最新推荐文章于 2024-09-25 00:20:54 发布

阅读量1.3w

点赞数 1

分类专栏：微信公众号文章标签： php 网络接口 js

本文链接：https://blog.csdn.net/OUYANGYUER3/article/details/106596561

版权

微信公众号专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.需要在微信后台配置js接口安全域名

2.在公众号后台配置IP白名单

3.自己的代码中，后台获取到access_token和jsapi_ticket后，配置前端页面wx.config,开启调试模式 debug: true在微信开发者工具中可以打印出/config:ok表示开发配置是成功的。运行环境关闭调试模式。

4.开发微信内分享功能，使用onMenuShareAppMessage接口注意，内部title，desc，link，imgUrl: type，dataUrl等参数的值要用单引号包裹，否则会导致分享失败。

5.分享的缩略图要注意后缀和图片大小，建议300*300，大小要小一点，有可能导致缩略图不显示，有些人说缩略图要使用相对路径，经过验证绝对路径也是可以的。另外要提醒的一点是使用TP5框架上传图片中的\问题，要在后台代码处理下改成/，否则有可能缩略图显示失败。

6.以下是经过测试可以成功执行的代码，分享成功后不会出现万恶的曲别针。如果有问题欢迎联系我交流讨论。

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<script src="/static/js/jquery-2.1.0.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<title></title>
</head>
<body>
<img src="\uploads\{$artInfo.title_img}">
<div style="width:100%; height:100%; position:fixed; left:0; top:0; z-index:-1; background:#ffffff;"></div>
<div class="wrappers"></div>
<div style="display:none;"></div>
</body>
<script type="text/javascript">
$(function(){
wx.config({
       debug: false,// 开启调试模弿调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
       appId: '{$signPackage.appId}',// 必填，公众号的唯一标识
       timestamp: '{$signPackage.timestamp}',//必填，生成签名的时间
       nonceStr: '{$signPackage.nonceStr}',// 必填，生成签名的随机
       signature: '{$signPackage.signature}',
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附
});
wx.ready(function(){
wx.onMenuShareTimeline({
title: ' ',
link: 'http://666ka.com.cn/index/index/index/id/{$artInfo.id}',
imgUrl: 'http://666ka.com.cn/uploads/{$artInfo.title_img}',
success: function () {

},
cancel: function () {

}
});
wx.onMenuShareAppMessage({
title:' ',
desc: ' ',
link: 'http://666ka.com.cn/index/index/index/id/{$artInfo.id}',
imgUrl: 'http://666ka.com.cn/uploads/{$artInfo.title_img}',
type: 'link',
dataUrl: '',
success: function () {

},
cancel: function () {

}
});
});

wx.error(function(res){

});
})
</script>
<script language="javascript">
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
</script>
</html>