微信分享朋友链接显示js代码(微信分享 js)

本文目录一览:

如何在网页中通过js代码将内容分享到朋友圈

微信内置的浏览器里添加了WeixinJSBridge对象,可以通过引对象将内容分享到朋友圈,所以以下代码只在微信内置浏览器中有效。

var shareToWeixinFriend = function(data, cb)

{

if (typeof WeixinJSBridge == ‘undefined’) {

return false;

}

else {

WeixinJSBridge.invoke(‘shareTimeline’, {

‘img_url’: data.imgurl || ”, // 图片url地址

‘link’: data.url, // 文章地址,此内容分享到朋友圈后可以点击跳转到此地址

‘desc’: data.desc,

‘title’: data.title

}, function(d) {

// 返回res.err_msg取值,d还有一个属性是err_desc

// share_timeline:cancel 用户取消

// share_timeline:fail 发送失败

// share_timeline:confirm 发送成功

WeixinJSBridge.log(d.err_msg);

cb cb(d.err_msg);

});

}

return false;

}

另外在微信内置浏览器中可以通过weixin://链接直接查看某个微信号的资料

微信分享js、iphone、通用版

不知道这个还行不

/*******************************

* Author:Mr.Think

* Description:微信分享通用代码

* 使用方法:_WXShare(‘分享显示的LOGO’,’LOGO宽度’,’LOGO高度’,’分享标题’,’分享描述’,’分享链接’,’微信APPID(一般不用填)’);

*******************************/

function _WXShare(img,width,height,title,desc,url,appid){

//初始化参数

img=img||”;

width=width||100;

height=height||100;

title=title||document.title;

desc=desc||document.title;

url=url||document.location.href;

appid=appid||”;

//微信内置方法

function _ShareFriend() {

WeixinJSBridge.invoke(‘sendAppMessage’,{

‘appid’: appid,

‘img_url’: img,

‘img_width’: width,

‘img_height’: height,

‘link’: url,

‘desc’: desc,

‘title’: title

}, function(res){

_report(‘send_msg’, res.err_msg);

})

}

function _ShareTL() {

WeixinJSBridge.invoke(‘shareTimeline’,{

‘img_url’: img,

‘img_width’: width,

‘img_height’: height,

‘link’: url,

‘desc’: desc,

‘title’: title

}, function(res) {

_report(‘timeline’, res.err_msg);

});

}

function _ShareWB() {

WeixinJSBridge.invoke(‘shareWeibo’,{

‘content’: desc,

‘url’: url,

}, function(res) {

_report(‘weibo’, res.err_msg);

});

}

// 当微信内置浏览器初始化后会触发WeixinJSBridgeReady事件。

document.addEventListener(‘WeixinJSBridgeReady’, function onBridgeReady() {

// 发送给好友

WeixinJSBridge.on(‘menu:share:appmessage’, function(argv){

_ShareFriend();

});

// 分享到朋友圈

WeixinJSBridge.on(‘menu:share:timeline’, function(argv){

_ShareTL();

});

// 分享到微博

WeixinJSBridge.on(‘menu:share:weibo’, function(argv){

_ShareWB();

});

}, false);

}

请问为什么微信公众号页面模板链接复制出现的是JavaScript

出现的内容是javascript:;也就是javascript:void(0);的缩写,一般是下面这种写法

a href=”javascript:void(0);”a标签a标签a标签/a

表示点击这个a标签不进行任何操作

js处理微信分享配置

整理一下通过h5做微信分享相关配置。

登录微信公众号, 获取AppID , 配置白名单 ,然后 配置JS接口安全域名 。

登录公众号后,左侧菜单栏选择:开发 = 基本配置,直接复制开发者ID(AppID)即可:

注意使用公网IP

左侧菜单栏选择:设置 = 公众号设置:

网页授权主要是获取微信openId使用,如果只是用分享操作,本步可以略过。

网页授权介绍

大致步骤是:

在配置完前面AppId、白名单及安全域名后,开始处理网页授权。

网页授权这一块儿内容主要是后端需要处理的内容较多,前端还是很简单的,仅需要跳入微信链接即可。为什么要走这一步呢因为有些操作,例如微信支付、播放微信录音、获取微信地址、微信卡券、商品、小店等等许多功能必须在微信浏览器汇总打开操作才可以,因此需要跳入微信浏览器及微信链接来处理后续操作。当配置后,链接便只有在微信浏览器中打开才会生效了,不然会提示:

链接如下:

{$appId}redirect_uri=={$URL}response_type=codescope=snsapi_base#wechat_redirect

参数分解

可见,上面需要填入的变量有二,一个是前面回去的AppId,另外一个则是url,需要写的是与配置域名所对应域名下的url,并且要进行urlEncode编码处理使用。

在拿到上述完整链接后,通过 window.location.href = ${url} 进行网页授权即可。在授权成功后,页面会重定向到自己设置的url页面去,然后在该连接上会有code值,取出即可:

将拿到的code值传给后端即可,看具体需求决定是否前端使用openId,如果非必要则不在前端获取保存或者由后端加密后传给前端使用。

大致分为五个步骤:

在步骤 1.3 中已经配置。

在需要调用JS接口的页面引入如下JS文件:

备注:支持使用 AMD/CMD 标准模块加载方法加载

配置需要如下几个参数:

那这些参数从哪儿来呢?依旧不用担心,依然是交给后端处理,后端返回时间戳、随机串及签名,其他的自己配置即可。

通过后端获取需要进行一个小交互,将此时的链接地址(window.location.href)传给后端即可。

于是就有了上述的除了最后一个以外的所有参数。最后一个 jsApiList 则是写分享接口,如我们想要分享到朋友圈、QQ、腾讯微博这3个,那就写:

可以发现,我们其实多配置了一个 checkJsApi ,这个是一个判断配置,可以判断当前客户端版本是否支持指定JS接口。

签名算法

所有JS接口列表

接下来就可以写分享信息配置了。配置信息一般都是通过 wx.ready 处理的:

例如我们要分享到朋友圈,配置则如下:

注意:不要出现 诱导分享

同样,一般都是通过 wx.error 处理失败相关信息:

其实微信分享(地理位置、扫一扫、卡券等微信各类接口)都是通过上述步骤配置的,可举一反三,在面对不同需求时通过微信开发文档来进行更为复杂的操作。

请问微信分享链接修改标题、缩略图等按您说的方法把那段js代码加进去无效是怎么回事?

最近很多群朋友问我,为什么我修改网页里面标题和描述语,但是我分享在微信朋友圈和朋友以后的标题和描述语还是不变呢?其实大家修改的是网页标题和描述语,没有真正修改微信分享接口那部分描述语,所以才不会变的。

微信分享一个网页或者发送一个网址链接时显示的左边图片和右边文字是怎么用代码实现的?如图:

图片是你网页中第一张图,不过该图不能小于 300*300,要不就不显示了,至于右边的文字,是取你的页面标题及 Description 的内容,如果你Description 没写它就默认读取你的网址了。

原创文章,作者:NQEQK,如若转载,请注明出处:https://www.506064.com/n/128425.html

(0)
NQEQKNQEQK
上一篇 2024-10-03
下一篇 2024-10-03

相关推荐

  • 详解Nginx域名配置

    一、Nginx域名配置超时时间 Nginx域名配置超时时间是指在Nginx服务器和客户端之间连接的超时时间,包括两个时间:连接超时时间和数据传输超时时间。如果在一定时间内请求无响应…

    编程 2024-10-04
  • 算阶乘c语言,阶乘C语言

    本文目录一览: 1、C语言中阶乘怎么输? 2、c语言如何求一个数的阶乘 3、c语言求阶乘的函数 C语言中阶乘怎么输? 1、不是直接输入n!,需要一定的算法才可以实现。具体方法是,首…

    编程 2024-10-03
  • 提升网页效果与用户体验的Python技巧

    随着互联网的不断发展,越来越多的网页需要提高自身的用户体验和吸引力。Python作为一门实用性很强的语言,在网页的设计和开发中也占有举足轻重的地位。在本文中,我们将会介绍一些Pyt…

    编程 2024-10-12
  • cosa+jsina,cosa+jsina的模

    本文目录一览: 1、为什么(j)^n=e^(jnπ/2)? 2、cosa+jsina的模怎么计算 3、复功率的表示,是电压向量和电流共轭的乘积。他们最后得出S(cosa+jsina…

    编程 2024-10-14
  • Git撤销操作详解

    对于开发者来说,版本控制是一项必不可少的技能。Git 作为目前最流行的版本控制系统之一,在开发过程中使用广泛。在代码提交的过程中,难免会出现错误,因此我们需要掌握 Git 的撤销操…

    编程 2024-10-04
  • c语言输出函数值,c语言数据的输出函数是什么

    本文目录一览: 1、C语言输出函数 2、怎样用c语言编写一个程序用来输出正弦函数值 3、c语言输入输出函数的格式 4、c语言中如何输出程序中确定出的函数 5、C语言中,输出函数有哪…

    编程 2024-10-04
  • 优化Android应用的用户体验

    Android应用的用户体验在日益增长的市场竞争中至关重要。用户不仅需要应用功能的稳定性和性能,还需要一流的用户界面设计、简单易用的操作、快速响应及即时反馈。在这篇文章中,我们将分…

    编程 2024-10-04
  • GMS认证详解

    一、GMS认证测试 GMS认证测试是谷歌移动服务(Google Mobile Services)的一部分,是针对Android设备制造商的评估和认证流程。该测试包括大量针对设备硬件…

    编程 2024-10-03
  • 调用python库(c语言调用python库)

    本文目录一览: 1、c# 如何调用Python库 2、Electron 框架中调用 Python 构建桌面应用 3、无需安装Python,就可以在.NET里调用Python库 4、…

    编程 2024-10-04
  • Python字符串分割:用split方法快速处理文本数据

    一、split()方法简介 split()是Python中用于切割字符串的内置方法,可以快速处理文本数据。通常我们需要对用户输入或者文件中的内容进行字符串切割,以便更好地获取需要的…

    编程 2024-10-04

发表回复

登录后才能评论