Html5页面在微信端的分享的实现方法_html静态页实现微信分享 - CSDN文库

170 浏览量更新于2023-03-03 评论收藏 49KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

微信分享，咋一看好像很复杂，实则非常简单。只需要调用微信官方出的微信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('分享成功')

}

// 取消分享回调

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38567962

粉丝: 2
资源: 944

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈