需求:微信公众号的H5页面,需要分享给朋友或朋友圈的链接是卡片形式,内容也要自己定义
解决方案:
一、公众号配置
1. 登录微信公众平台
2. 进入 “公众号设置” 的 “功能设置”, 填写 “JS接口安全域名”
3. 进入 “设置与开发” 的 “基本配置” ,填写 “IP白名单”
tip: 域名不要加 http://
tip: 公众号必须是经过认证且未过期的
tip: 域名要是备过案的
tip: ip白名单内填写的是请求服务器的ip地址
二、下载依赖并引用
安装:npm install weixin-js-sdk
引用:import wx from "weixin-js-sdk"
weixin-js-sdk是微信提供的网页开发工具包
三、后台请求
前端先需要从后台获取一些配置参数,比如appId
、timestamp
、nonceStr
、signature
,这里需要后端支持
然后通过wx.config()
配置配置权限
最后在wx.ready()
中使用接口
话不多说,上代码
import wx from "weixin-js-sdk"; // 微信提供的网页开发工具包
import { gzhH5Server } from "@/api"; //这个是我项目中的一个请求接口,
export default {
mounted(){
let link = window.location.href.split("#")[0]; // 获取当前的网址
gzhH5Server({url: link}) // 接口请求,获取appId等配置参数
.then(res=>{ // 为了省事,这里就去掉一些关于请求失败的逻辑半段,和不相干的代码
let d = res.data; // 我的接口返回从参数格式,不必照抄
wx.config({
// 默认为false 为true的时候是调试模式,会打印出日志
debug: false,
appId: res.data.app_id, // 必填,appId
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.noncestr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
// 必填,需要使用到的接口列表,凡是要用到接口都要填写
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',]
})
wx.ready(function(){
const link = link, // 分享链接
title = '标题', // 分享标题
desc = '描述', // 分享描述
imgUrl = ""; // 分享图标, 用网络图片
// 分享给好友
wx.updateAppMessageShareData({
title, // 分享标题
desc, // 分享描述
link, //分享链接
imgUrl, // 分享图标
success: function() {
console.log('分享成功')
}
})
// 分享到朋友圈
wx.updateTimelineShareData({
title, // 分享标题
link, //分享链接
imgUrl, // 分享图标
success: function() {
console.log('分享成功')
}
})
})
})
}
微信开放平台 JS-SDK说明文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html