微信分享朋友链接显示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 23:25
下一篇 2024-10-03 23:25

相关推荐

  • Python周杰伦代码用法介绍

    本文将从多个方面对Python周杰伦代码进行详细的阐述。 一、代码介绍 from urllib.request import urlopen from bs4 import Bea…

    编程 2025-04-29
  • JS Proxy(array)用法介绍

    JS Proxy(array)可以说是ES6中非常重要的一个特性,它可以代理一个数组,监听数据变化并进行拦截、处理。在实际开发中,使用Proxy(array)可以方便地实现数据的监…

    编程 2025-04-29
  • Python字符串宽度不限制怎么打代码

    本文将为大家详细介绍Python字符串宽度不限制时如何打代码的几个方面。 一、保持代码风格的统一 在Python字符串宽度不限制的情况下,我们可以写出很长很长的一行代码。但是,为了…

    编程 2025-04-29
  • Python基础代码用法介绍

    本文将从多个方面对Python基础代码进行解析和详细阐述,力求让读者深刻理解Python基础代码。通过本文的学习,相信大家对Python的学习和应用会更加轻松和高效。 一、变量和数…

    编程 2025-04-29
  • 仓库管理系统代码设计Python

    这篇文章将详细探讨如何设计一个基于Python的仓库管理系统。 一、基本需求 在着手设计之前,我们首先需要确定仓库管理系统的基本需求。 我们可以将需求分为以下几个方面: 1、库存管…

    编程 2025-04-29
  • Python满天星代码:让编程变得更加简单

    本文将从多个方面详细阐述Python满天星代码,为大家介绍它的优点以及如何在编程中使用。无论是刚刚接触编程还是资深程序员,都能从中获得一定的收获。 一、简介 Python满天星代码…

    编程 2025-04-29
  • 写代码新手教程

    本文将从语言选择、学习方法、编码规范以及常见问题解答等多个方面,为编程新手提供实用、简明的教程。 一、语言选择 作为编程新手,选择一门编程语言是很关键的一步。以下是几个有代表性的编…

    编程 2025-04-29
  • Python实现简易心形代码

    在这个文章中,我们将会介绍如何用Python语言编写一个非常简单的代码来生成一个心形图案。我们将会从安装Python开始介绍,逐步深入了解如何实现这一任务。 一、安装Python …

    编程 2025-04-29
  • 怎么写不影响Python运行的长段代码

    在Python编程的过程中,我们不可避免地需要编写一些长段代码,包括函数、类、复杂的控制语句等等。在编写这些代码时,我们需要考虑代码可读性、易用性以及对Python运行性能的影响。…

    编程 2025-04-29
  • 北化教务管理系统介绍及开发代码示例

    本文将从多个方面对北化教务管理系统进行介绍及开发代码示例,帮助开发者更好地理解和应用该系统。 一、项目介绍 北化教务管理系统是一款针对高校学生和教职工的综合信息管理系统。系统实现的…

    编程 2025-04-29

发表回复

登录后才能评论