uniapp写H5授权登录及分享，返回到目标页面
最近在研究uniapp打包后H5页面分享（转发好友，转发朋友圈的问题），需要前后端配合，前端展示如下：
安装SDK
npm i weixin-js-sdk
在utils创建jsShare.js文件，代码如下，这里面的图片展示方式可按照自己的需求更改
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];// 处理图片URLlet 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);});
}
在其他页面引入，如产品详情页
import { initWechatShare } from "@/utils/jsShare";
在onLoad里面写入
this.$nextTick(() => {setTimeout(() => {this.initWechatShare();}, 300);
});
在methods中写入，this.fangyuanDetail为详情获取的内容，赋值进去
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);},});
},
在首页使用，引入跟上面一样，下面直接写标语即可
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);},});
},
还有一个就是登录返回目标页面
getAuthCodeNew() {const APPID = '' // 公众号的appidconst 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`}
以上就是我的写法，有问题随时浏览沟通哦！