html 网页分享功能,javascript - H5页面分享功能

H5页面的分享微信,朋友圈,QQ,空间功能如何做,我看了一篇帖子,里面说的只能通过UC浏览器或者QQ浏览器间接的调用微信来分享,但是我今天看滴滴打车这个APP里的某个活动就是一个H5页面,手机没装UC或QQ也能调用,有哪位大神知道这方面的知识,或者有功能代码,真心求教,可以花钱买

bVvwVN

回复内容:

H5页面的分享微信,朋友圈,QQ,空间功能如何做,我看了一篇帖子,里面说的只能通过UC浏览器或者QQ浏览器间接的调用微信来分享,但是我今天看滴滴打车这个APP里的某个活动就是一个H5页面,手机没装UC或QQ也能调用,有哪位大神知道这方面的知识,或者有功能代码,真心求教,可以花钱买

bVvwVN

native app可以继承微信sdk的,所以在原生App内是可以实现一键分享。

但是纯的H5页面,是不行的(你可以吧滴滴打车那个H5页面发出来,看下)。

至于UC浏览器,QQ浏览器可以,因为UC浏览器,QQ浏览器本来就是一个native app,他内部已经继承了这部分微信sdk,并且对外暴露了方法,可以使用js直接调用,所以也可以实现一键分享。

百度分享

http://share.baidu.com/code

app是通过webview和h5进行交互的,纯h5页要去微信开发者平台进行授权,然后才可以调用微信接口进行分享 看这里 http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于微信分享的问题,我可以给你一些指导。首先,你需要在你的 HTML5 页面中引入微信 JS-SDK,然后在页面加载完成后初始化 JS-SDK。接着,你需要通过 JS-SDK 提供的接口来配置分享的内容和参数,最后调用分享接口即可完成分享。 具体步骤如下: 1. 引入微信 JS-SDK 在 HTML 页面中引入微信 JS-SDK,如下所示: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 初始化 JS-SDK 在页面加载完成后,初始化 JS-SDK。你需要先通过微信公众平台获取到你的 AppID 和 AppSecret,然后使用这些信息初始化 JS-SDK。示例代码如下: ```javascript wx.config({ debug: false, appId: 'your app id', timestamp: 'your timestamp', nonceStr: 'your nonceStr', signature: 'your signature', jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); ``` 其中,`appId`、`timestamp`、`nonceStr` 和 `signature` 分别是通过微信公众平台生成的,用于验证你的身份和权限的参数。`jsApiList` 是你需要使用的 JS-SDK 接口列表。 3. 配置分享内容和参数 在初始化 JS-SDK 后,你需要通过 JS-SDK 提供的接口来配置分享的内容和参数。示例代码如下: ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); ``` 其中,`onMenuShareAppMessage` 和 `onMenuShareTimeline` 分别是分享给好友和分享到朋友圈的接口。你需要提供分享的标题、描述、链接和缩略图等参数。 4. 调用分享接口 最后,在页面中调用分享接口即可完成分享。示例代码如下: ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); // 在需要分享的地方调用 shareAppMessage 和 shareTimeline 接口 // 示例代码如下 document.querySelector('#share-btn').addEventListener('click', function() { wx.shareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); document.querySelector('#share-timeline-btn').addEventListener('click', function() { wx.shareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); }); ``` 这样就完成了微信分享功能的实现。需要注意的是,由于微信的安全机制,分享的链接必须是在微信公众平台中配置过的域名,否则可能无法正常分享

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值