h5自定义微信分享链接

未自定义前

自定义后

1.安装微信jweixin-1.6.0依赖

"jweixin-1.6.0": "^1.0.0",

2.封装一个wxsdk.js方法
前端要请求后端接口获取公众号的信息并填入

//  wetchat.js  －－ 个人封装
import wx from 'jweixin-1.6.0'; // 这是自己优化的sdk方法，可以解决ios签名报错的一些问题
// import wx from 'weixin-js-sdk'; // 这是官方的微信sdk引入方法
import {getConfig
} from '@/api/home'; // 后端接口 （根据自己项目）
export function wxChatShare(param) {  let _url = param.url // 当前页面的urllet data = {}data.url = _urldata.isNew = 1getConfig(data) // getConfig是获取微信配置相关信息的接口.then(res => {if (res.code === '0000' && res.data) {// alert('成功')let list = res.data// 接口返回配置信息wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: "  ", // 必填，公众号的唯一标识,需在公众号后台配置项目地址timestamp: list.timestamp, // 必填，生成签名的时间戳nonceStr: list.nonceStr, // 必填，生成签名的随机串signature: list.signature, // 必填，签名jsApiList: [ // 用的方法都要加进来'updateAppMessageShareData',]});wx.checkJsApi({jsApiList: ["updateAppMessageShareData","updateTimelineShareData"], // 需要检测的JS接口列表，所有JS接口列表见附录2,success: function (res) {// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}console.log('检查', res)// alert(res.errMsg)}})wx.ready(function () {console.log("paramSDK",param.url);//分享给朋友wx.updateAppMessageShareData({title: param.title, // 分享标题desc: param.desc, // 分享描述link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: param.imgUrl, // 分享图标success: function () {// 设置成功console.log("分享成功返回的信息为:", res);//   this.$Message.message("设置成功!");}})});wx.error(function (res) {console.log('验证失败返回的信息:', res);});} else {console.log('错误',res);}})
}

3.在wxSDkFun函数中调用封装的上面这个方法,wxSDkFun函数得在分享前调用,如页面加载完就执行下,

 wxSDkFun(data){let signLink=''//请求微信sdksignLink = location.hreflet params = {}params.url = signLink //用来给后端接口的参数params.title ="唐宋元明"+'短视频分享达人征集令'  //主标题params.desc = "测试宣传语言" //副标题params.link =location.href,//项目的链接params.imgUrl='http://m.qpic.cn/psc?/V10K7lwW1jITpv/45NBuzDIW489QBoVep5mcaGVgwTw6KCN1an5aYY1frFZ18GBkQKu61ECoee2E.wgpvtp*ifkp6OLXYAVzlhm28gToG2Vdlr*5kt8hbiPHs8!/b&bo=yADIAMgAyAABGT4!&rf=viewer_4'   //链接图片地址wxChatShare(params) //这个方法就是我开头封装的方法，直接把参数带过就可以了},

注:
链接没有自定义效果的话,得将h5地址生成二维码扫码进入后分享
api文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10

h5自定义微信分享链接相关推荐

H5 -- 自定义微信分享第三方页面链接的标题和小缩略图
需求:自定义微信分享第三方页面链接的标题和小缩略图(如图) 2018.6.4更新线 - - - - - - - - - - - - - - - - - - 更新:微信6.5.5版本以后调整了分享规则, ...
H5实现微信分享自定义地图
这几天紧急开发一个拼团+砍价的H5微信小商城.技术用的是:前端Vue+Vant快速开发组件框架.后端java. 使用微信js-sdk流程图: 微信公众平台测试帐号申请地址:https://mp.wei ...
使用JS-SDK自定义微信分享效果
之前做的一个h5页面,按照需求得分享到朋友圈he好友,默认分享链接的标题he内容以及图标都是微信默认的,下面是一个大神进行自定义的分享链接的代码,看到了记录下: 前言刚进入一家新公司,接到的第一个任 ...
手把手带你使用JS-SDK自定义微信分享效果
前言刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题,摘要),一开始真是一脸懵逼,在网上搜索了半天之后大概有了方案.值得注意的是一开始搜索到的解决方案全是调用微 ...
android微信分享怎么自定义样式,自定义微信分享样式教程
使用场景: 当网站浏览者访问你的网站的时候,情不自禁分享.然而,样式怎么这么挫? 分享别人的网站链接,却是这样的样式,为什么呢? 答案:你没有设置"自定义微信分享样式" 共有三个 ...
微信分享链接卡片，php业务处理
微信分享链接自定义卡片和内容信息官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 准备工作 1 ...
vue 分享微信传参_vue实现微信分享链接添加动态参数的方法
微信分享时分享链接携带参数可能不是固定的需要在分享的前一刻才知道这里就是动态设置分享链接的基本写法代码不是那么详尽但大致流程如下 1.安装引用jssdk npm install --save ...
微信分享链接优化 title icon 描述
项目中要做微信分享链接的优化,展示公司产品的相关信息.摸索了下,也踩了不少坑,记录一下. 起步微信分享到微信好友或qq好友微信分享到朋友圈或qq空间微信分享到企业微信注意事项起步 (1)查阅 ...
android微信分享怎么自定义样式,自定义微信分享样式设置教程
一.功能效果自定义微信分享可以设置个性化的分享图片.标题.描述,让分享内容更加受到用户的喜爱和欢迎. 二.功能说明 [版本]网站标准版及以上 [前提]1.需要授权已认证的公众号(支持服务号.订阅号) ...
解决微信分享链接不能显示缩略
微信分享链接,如果不是公众号合法域名,分享或者转发出去的内容会被微信默认的图标替换,现在出解决方案,必须要调用JSSDK,必须要调用! 1. 需要有一个已经认证的微信公众号 2.按照官方文档依次配置域 ...

h5自定义微信分享链接

h5自定义微信分享链接相关推荐

最新文章

热门文章