H5链接分享到微信

article/2025/10/15 4:31:38

在开发中最长遇到的一个需求就是微信分享，那么怎么实现呢，我使用uni-app写的

首先需要一个引导分享的图片

 <view v-show="yd" class="boxContent" @click="getclose(text)"><image class="yd" src="/static/img/share.png" alt=""></image></view>

.boxContent{background: rgba(0,0,0,0.7)!important;width: 100vw;height: 100vh;position: fixed;top: 0;z-index: 99
}.yd{position: absolute;right: 0;top:0;width: 600rpx;height: 450rpx;
}

上边是样式引导图片的样式，这是我的写法，你也可以使用别的写法

我这边的分享是封装好的，大概写法如下

   var obj = {title: '分享标题', //分享标题desc: '分享描述', //分享内容link:‘你要去的链接’,//就是你当前页面的地址，测试环境用你测试地址，正式的用正式地址imgUrl: ‘图片地址’,//就是分享链接里面的那个小方块图片};

　　以上内容可以用接口返回，看项目需求

  var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf("micromessenger") != -1;var url=window.location.hrefif(isWeixin){//微信环境   getJSSDK方法是我封装的  ，obj是你分享的内容，              //this.$store.state.url是你的接口请求地址this.httpApi.getJSSDK(url, obj, this.$store.state.url );}else{//如果需要别的分享再写方法，如安卓分享微信，ios分享微信等}

var jweixin = require('jweixin-module')//引入wxsdk
const jsApiList = ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','updateAppMessageShareData','updateTimelineShareData'
];var getJSSDK = function(url, dataForWeixin1, mainurl) {requestshare({}, mainurl + 'api/home/getShareSignPackage?url='+ encodeURIComponent(url) + '', function(res) {console.log(res.data.data);var getMsg = res.data.data;//这里是获取微信里的配置jweixin.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: getMsg.appId, //appId通过微信服务号后台查看timestamp: getMsg.timestamp, //生成签名的时间戳nonceStr: getMsg.nonceStr, //生成签名的随机字符串signature: getMsg.signature, //签名jsApiList: jsApiList // 必填，需要使用的JS接口列表})    jweixin.ready(function() {console.log(dataForWeixin1);jweixin.showMenuItems({menuList: ['menuItem:share:appMessage'] // 要显示的菜单项，});// console.log(res1);jweixin.onMenuShareAppMessage({title: dataForWeixin1.title,desc: dataForWeixin1.desc, //分享内容link: dataForWeixin1.link,imgUrl: dataForWeixin1.imgUrl,success: function() {// callback(1)}})jweixin.onMenuShareTimeline({title: dataForWeixin1.title,link: dataForWeixin1.link,imgUrl: dataForWeixin1.imgUrl,success: function() {// 用户点击了分享后执行的回调函数//   alert('分享成功')// callback(1)}})})jweixin.error(function(res) {console.log(res);});})}export default {getJSSDK,//暴露你封装的方法
}

获取的微信配置大概长这样