html5自定义分享代码,javascript,html5_移动浏览器自带的分享微信功能,能否自定义要分享页面的标题图片等,javascript,html5,ios,android - phpStud...

移动浏览器自带的分享微信功能,能否自定义要分享页面的标题图片等

ios和android手机浏览器中有分享的按钮,按下后可以分享到微信朋友圈和发送给朋友正在浏览的网页的内容。但是现在在ios下用safari自带的分享功能,分享的页面在微信中标题,描述内容,还有图片都不能像在微信中通过微信浏览器通过微信提供的jssdk去自定义分享内容。而且,如果分享页面中的图片大于32KB,分享的链接还无法显示该图片。所以在safari中是否提供api允许开发者去自定义分享链接的内容等。

现在测试的一些平台和现象

平台:ios9

浏览器:safari

分享来源:移动网站

分享去处:微信好友

现象:(1)title显示分享页面的title;

(2)描述内容没有,显示页面的来源url;

(3)图片,大于32KB的时候无法显示,小于32KB的时候显示当前页面正在显示的第一张图片

平台:android6.0(小米5)

(1)

浏览器:小米浏览器

分享来源:移动网站

分享去处:微信好友

现象:(1)title显示分享页面的title;

(2)描述内容“我在看[XXX],分享给你,快来看看吧!| http://xxxxx”,后面显示页面的来源url;

(3)图片,显示当前页面正在显示的第一张图片,没有大小限制

(2)

浏览器:UC浏览器

分享来源:移动网站

分享去处:微信好友

现象:(1)title显示UC字样;

(2)描述内容“我正在看[XXX],分享给你,一起看吧!“;

(3)图片,显示当前页面正在显示的第一张图片,没有大小限制

(3)

浏览器:firefox浏览器

分享来源:移动网站

分享去处:微信好友

现象:只显示分享页面的url没有任何的标题描述内容和图片等信息

通过上述的测试,我想知道ios的safari或者android上的自带浏览器、小米浏览器、UC浏览器、firefox浏览器是否提供api接口,让开发者去自定义分享页面的链接内容。

*暂时没有打算用一键分享插件share.js的意图。

相关阅读:

手机网页怎样实现上拉加载一个 div 内容?

原生javascript能做出来这样的效果嘛?

关于laravel中间件

RxJava 在onNext(User user) 可以把user赋值给外部成员变量mUser吗?

开发PHP第三方扩展. 在浏览器下执行. 使用PHP命令执行则无法找到错误

C语言踩石头过河问题,用DFS搜索递归了17万次但是没报错,请问是什么原因?

求类似于百度统计里选择时间的控件。

iOS程序怎么使用自定义字体

node的fs模块,可读流读不到中文数据,求教

做 HTML5页面时怎么判断手机软键盘是否隐藏?

判断两个二叉树是否互相对称(互为镜像)

CPP struct 的诡异问题

【求助】怎么在页面中直接调用非凡影音?

php和websocket怎么建立连接

请问 IOS 或 Android 开发中有向网页那样的前端框架,后端框架吗?

CSS3动画延时的一点疑问

Linux下大小写切换有延迟,延迟1~3秒

oracle数据存储过程

HTTP请求响应时间过长

现在我在学习MySQL,问问怎么复制粘贴数据库.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值