微信H5页面分享给朋友或朋友圈解决方案

观一域

已于 2023-06-05 10:24:35 修改

阅读量5k

点赞数 1

文章标签：前端微信公众平台

于 2023-06-04 17:37:21 首次发布

本文链接：https://blog.csdn.net/weixin_48263393/article/details/131033424

版权

需求：微信公众号的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('分享成功')
                     }
                 })
             })
		})
	}