uniapp写H5授权登录及分享，返回到目标页面

最近在研究uniapp打包后H5页面分享（转发好友，转发朋友圈的问题），需要前后端配合，前端展示如下：
安装SDK

bash 复制代码

npm i weixin-js-sdk

在utils创建jsShare.js文件，代码如下，这里面的图片展示方式可按照自己的需求更改

bash 复制代码

import wx from 'weixin-js-sdk';
import { wechatShare } from '@/api/common';//后端接口,返回
import { getImageUrl } from '@/utils/request';//图片地址衔接方式，可按照需求更改

/**
 * 初始化微信分享
 * @param {Object} options 分享配置选项
 * @param {String} options.title 分享标题
 * @param {String} options.desc 分享描述
 * @param {String} options.imageUrl 分享图片URL（完整URL或相对路径）
 * @param {String} options.imageList 图片列表（逗号分隔，会自动取第一张）
 * @param {String} options.shareUrl 用于签名的URL（可选，默认使用当前页面URL）
 * @param {Number} options.delay 延迟执行时间（毫秒，默认500）
 * @param {Boolean} options.debug 是否开启调试模式（默认false）
 * @param {Function} options.onSuccess 分享成功回调
 * @param {Function} options.onError 分享失败回调
 * @returns {Promise} 返回Promise
 */
export function initWechatShare(options = {}) {
	console.log(options,'options')
  return new Promise((resolve, reject) => {
    // 参数验证
    if (!options.title) {
      console.error('分享标题不能为空');
      reject(new Error('分享标题不能为空'));
      return;
    }

    // 获取当前页面的完整URL（用于签名），注：这里最好传https的地址也就是 {#} 前面的，我猜了坑
    const shareUrl = options.shareUrl || window.location.href.split('#')[0];
    
    // 处理图片URL
    let imgUrl = '';
    if (options.imageUrl) {
      imgUrl = options.imageUrl;
    } else if (options.imageList) {
      const firstImage = options.imageList.split(',')[0];
      imgUrl = getImageUrl(firstImage);
    }

    // 延迟执行，确保页面完全加载
    setTimeout(() => {
      // 1. 获取微信JS-SDK配置
      wechatShare({
        shareUrl: shareUrl
      }).then((signatureData) => {
        console.log(signatureData, 'signatureData');
        
        // 检查数据是否完整
        if (!signatureData || !signatureData.signature) {
          console.error('签名数据不完整');
          if (options.onError) {
            options.onError(new Error('签名数据不完整'));
          }
          reject(new Error('签名数据不完整'));
          return;
        }

        // 2. 初始化微信JS-SDK配置
        wx.config({
          debug: options.debug || false, // 生产环境建议关闭
          appId: signatureData.appId,
          timestamp: signatureData.timestamp,
          nonceStr: signatureData.nonceStr,
          signature: signatureData.signature,
          jsApiList: [ // 声明需要使用的JS接口
            'updateAppMessageShareData',
            'updateTimelineShareData' // 如果需要分享到朋友圈，也请声明
          ]
        });

        // 3. 配置分享内容
        wx.ready(() => {
          // 分享给好友
          wx.updateAppMessageShareData({
            title: options.title, // 默认分享标题
            desc: options.desc || '', // 默认分享描述
            link: signatureData.url, // 默认分享链接，默认以当前链接
            imgUrl: imgUrl, // 默认分享图标
            success: function() {
              if (options.onSuccess) {
                options.onSuccess('分享给好友设置成功');
              }
            }
          });
          
          // 分享到朋友圈
          wx.updateTimelineShareData({
            title: options.title, // 分享标题
            desc: options.desc || '', // 默认分享描述
            link: signatureData.url, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
              if (options.onSuccess) {
                options.onSuccess('分享到朋友圈设置成功');
              }
            }
          });

          resolve(signatureData);
        });

        // 错误处理
        wx.error((res) => {
          console.error('微信JS-SDK配置失败', res);
          // 如果是签名错误，可以在这里处理重试逻辑
          if (res.errMsg && res.errMsg.indexOf('invalid signature') !== -1) {
            console.log('签名验证失败');
          }
          if (options.onError) {
            options.onError(res);
          }
          reject(res);
        });
      }).catch((error) => {
        console.error('获取微信分享签名失败', error);
        if (options.onError) {
          options.onError(error);
        }
        reject(error);
      });
    }, options.delay || 500);
  });
}

在其他页面引入，如产品详情页

bash 复制代码

import { initWechatShare } from "@/utils/jsShare";

在onLoad里面写入

bash 复制代码

this.$nextTick(() => {
	setTimeout(() => {
		this.initWechatShare();
	}, 300);
});

在methods中写入，this.fangyuanDetail为详情获取的内容，赋值进去

bash 复制代码

initWechatShare() {
	initWechatShare({
	  title: this.fangyuanDetail.title,
	  desc: this.fangyuanDetail.tags,
	  imageList: this.fangyuanDetail.image_list,
	  onSuccess: (msg) => {
	    console.log(msg);
	  },
	  onError: (error) => {
	    console.error("分享配置失败", error);
	  },
	});
},

在首页使用，引入跟上面一样，下面直接写标语即可

bash 复制代码

initWechatShare() {
	initWechatShare({
		title: "名称",
		desc: "标语",
		imageUrl: window.location.href.split('#')[0] + 'static/slig.png',//一定要加https地址
		imageList: "",
		onSuccess: (msg) => {
			console.log(msg);
		},
		onError: (error) => {
			console.error("分享配置失败", error);
		},
	});
},

还有一个就是登录返回目标页面

bash 复制代码

getAuthCodeNew() {
		const APPID = '' // 公众号的appid
		const REDIRECT_URI = encodeURIComponent(window.location.href)//这个就是目标返回页
		console.log(REDIRECT_URI, 'REDIRECT_URI')
		window.location.href =
			`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
	}

以上就是我的写法，有问题随时浏览沟通哦！