微信实现分享链接自定义分享功能(标题,图片,内容,链接自定义分享)
时间:2020-10-04
本文章向大家介绍微信实现分享链接自定义分享功能(标题,图片,内容,链接自定义分享),主要包括微信实现分享链接自定义分享功能(标题,图片,内容,链接自定义分享)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
用微信打开一个网页,选择右上角的“发送给朋友”后,收到的消息是这样的:
而为了推广效果,我们更希望能自定义标题、描述和图片,效果如下图:
下面介绍下怎样来实现这个功能
方案实现
方法1:使用1024p工具箱
1、进入官网链接
http://www.1024p.cn/index.html
2、需准备材料
准备链接+自定义的标题+自定义的内容+logo
3、制作微信图文链接
方法2:对接1024p工具箱接口
1、需准备材料
① 分享标题+描述+logo
② 自己的分享域名
③ 对接接口自动生成
方法3:对接SDK
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。可参考微信JS-SDK说明文档。
具体步骤:
1、准备一个备案的域名和空间,绑定域名到该空间去。以及一个认证过的公众号,
2、登录微信公众平台,进入“公众号设置”的功能设置里面填写js接口安全域名,这个要填写的是你微信浏览器要打开的域名地址,不能添加IP地址。
3、引入js文件,在需要调用js接口的页面接入JS文件。
http://res.wx.qq.com/open/js/jweixin-1.2.0.js
4、通过config接口注入权限并验证配置(这一步算是整个步骤中最关键的一步,必须正确的配置信息才可以进行调用JS-SDK。)
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 });
详细接入代码
+ (currentLink.indexOf("?") > -1 ? ("&u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}") : ("?u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}")); shareLink = shareLink + (shareLink.indexOf("?") > -1 ? ("&city=" + "深圳") : ("?city=" + "深圳")); var shareImgUrl = "${IMGPATH!}/images/banner2.png"; var shareGid = ""; wx.ready(function () { //分享给朋友 wx.onMenuShareAppMessage({ title: shareTitle, desc: shareDesc, link: shareLink, imgUrl: shareImgUrl, success: function (res) { shared(shareLink, "friend", shareGid); }, fail: function (res) { alert(JSON.stringify(res)); } }); //分享到朋友圈 wx.onMenuShareTimeline({ title: shareTitle, desc: shareDesc, link: shareLink, imgUrl: shareImgUrl, success: function (res) { shared(shareLink, "Timeline", shareGid); }, fail: function (res) { alert(JSON.stringify(res)); } }); //分享到QQ wx.onMenuShareQQ({ title: shareTitle, desc: shareDesc, link: shareLink, imgUrl: shareImgUrl, success: function (res) { shared(shareLink, "QQ", shareGid); }, fail: function (res) { alert(JSON.stringify(res)); } }); //分享到腾讯QQ wx.onMenuShareWeibo({ title: shareTitle, desc: shareDesc, link: shareLink, imgUrl: shareImgUrl, success: function (res) { shared(shareLink, "Weibo", shareGid); }, fail: function (res) { alert(JSON.stringify(res)); } }); //分享到QZone wx.onMenuShareQZone({ title: shareTitle, desc: shareDesc, link: shareLink, imgUrl: shareImgUrl, success: function (res) { shared(shareLink, "QZone", shareGid); }, fail: function (res) { alert(JSON.stringify(res)); } }); }); function shared(url, type, gid){ var rUrl = basePath + "/share/add?type=" + type + "&url=" + encodeURI(url); if(!!gid) { rUrl += "&gid=" + gid; } $.ajax({ type: "GET", url: rUrl, dataType: "json", success: function(rs){ //alert("分享成功"); } }); } " _ue_custom_node_="true">
+ (currentLink.indexOf(
"?"
) > -1 ? (
"&u="
+
"${u!}"
+
"&t="
+
"${t!}"
+
"&o="
+
"${o!}"
+
"&s="
+
"${s!}"
) : (
"?u="
+
"${u!}"
+
"&t="
+
"${t!}"
+
"&o="
+
"${o!}"
+
"&s="
+
"${s!}"
));
shareLink = shareLink + (shareLink.indexOf(
"?"
) > -1 ? (
"&city="
+
"深圳"
) : (
"?city="
+
"深圳"
));
var
shareImgUrl =
"${IMGPATH!}/images/banner2.png"
;
var
shareGid =
""
;
wx.ready(
function
() {
//分享给朋友
wx.onMenuShareAppMessage({
title: shareTitle,
desc: shareDesc,
link: shareLink,
imgUrl: shareImgUrl,
success:
function
(res) {
shared(shareLink,
"friend"
, shareGid);
},
fail:
function
(res) {
alert(JSON.stringify(res));
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: shareTitle,
desc: shareDesc,
link: shareLink,
imgUrl: shareImgUrl,
success:
function
(res) {
shared(shareLink,
"Timeline"
, shareGid);
},
fail:
function
(res) {
alert(JSON.stringify(res));
}
});
//分享到QQ
wx.onMenuShareQQ({
title: shareTitle,
desc: shareDesc,
link: shareLink,
imgUrl: shareImgUrl,
success:
function
(res) {
shared(shareLink,
"QQ"
, shareGid);
},
fail:
function
(res) {
alert(JSON.stringify(res));
}
});
//分享到腾讯QQ
wx.onMenuShareWeibo({
title: shareTitle,
desc: shareDesc,
link: shareLink,
imgUrl: shareImgUrl,
success:
function
(res) {
shared(shareLink,
"Weibo"
, shareGid);
},
fail:
function
(res) {
alert(JSON.stringify(res));
}
});
//分享到QZone
wx.onMenuShareQZone({
title: shareTitle,
desc: shareDesc,
link: shareLink,
imgUrl: shareImgUrl,
success:
function
(res) {
shared(shareLink,
"QZone"
, shareGid);
},
fail:
function
(res) {
alert(JSON.stringify(res));
}
});
});
function
shared(url, type, gid){
var
rUrl = basePath +
"/share/add?type="
+ type +
"&url="
+ encodeURI(url);
if
(!!gid) {
rUrl +=
"&gid="
+ gid;
}
$.ajax({
type:
"GET"
,
url: rUrl,
dataType:
"json"
,
success:
function
(rs){
//alert("分享成功");
}
});
}
" _ue_custom_node_="
true
">
好了,先写这些,有不明白的可以关注私信我
原文地址:https://www.cnblogs.com/zbaoren/p/13768189.html
- MyBatis.Net 学习手记
- 基于JavaScript 声明全局变量的三种方式详解
- 网页基础篇之如何制作简单的静态网页
- Mybatis.Net 整合 ODP.NET Managed
- 通过maven test 报org.apache.ibatis.binding.BindingException: Invalid bound statement
- 知道这几点,用微信小程序留住海量客户不是问题
- C#:DataTable映射成Model
- jenkins 多选框
- Oracle:ODP.NET Managed 小试牛刀
- C#:Func的同步、异步调用
- Python之路-day6
- hadoop1.2.1伪分布模式配置
- 有了它们,真的能让孩子赢在起跑线上吗?
- Unity 使用快速教程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 给 c# 程序员的十个重要提示
- 子序列问题
- Spark实现推荐系统中的相似度算法
- iOS 中的 CFBundleShortVersionString 与 CFBundleVersion
- 买卖股票问题合集
- 服务出错优先考虑及排查手册(待续整理)
- Android 沉浸式全屏
- Spark SQL 小文件问题处理
- vue常用的修饰符有哪些?
- 在 ASP.NET WebAPI 中使用 DataAnnotations 验证数据
- CSS简笔画:纯CSS绘制一艘邮轮
- NHibernate 多对多映射的数据更新
- 使用 AngularJS 的 $resource 连接 WebAPI Controller
- CentOS7.8下编译muduo库找不到Boost库报错的解决方法
- 使用 OWIN 搭建 OAuth2 服务器