uniapp 开发 公众号 分享功能

直接代码

代码代码看我的另一个博客(里面的makeJsapi一样)

https://blog.csdn.net/weixin_42249565/article/details/140934466

php 复制代码
$url=$request->post('url', '');
$appid='xxxxxxxx';
$secret='xxxxxxxxxx';
$access_token=Cache::get('access_token');
if(!$access_token){
    $res=Curl::curl("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret");
    $access_token=$res['access_token'];
    Cache::set('access_token', $res['access_token'],7000);
}
$jsapi=Curl::curl("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi");
$jsapToken=$jsapi['ticket'];
$noncestr=Formatter::nonce();
$timestamp=Formatter::timestamp();
$str="jsapi_ticket=$jsapToken&noncestr=$noncestr&timestamp=$timestamp&url=$url";
s([
    'appid'=>$appid, // 必填,公众号的唯一标识
    'timestamp'=>$timestamp , // 必填,生成签名的时间戳
    'nonceStr'=>$noncestr, // 必填,生成签名的随机串
    "signature"=> sha1($str)
]);

前台代码

1,先安装 组件
javascript 复制代码
npm install weixin-js-sdk --save
2,获取 获取 加密信息
javascript 复制代码
const getfenxiang=()=>{
	let url=''
	var userAgent = navigator.userAgent;
	  if (/MicroMessenger/i.test(userAgent)) {
	    if (/iPhone|iPad|iPod/i.test(userAgent)) {
	      url=location.href.split('#')[0] 
	    }
	  }
	  if(!url){
		  url=location.href
	  }
	uni.common.httpPost('Weix/makeJsapi', { url }).then((res2) => {
			wx.config({
		      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。   
		      appId: res2.appid, // 必填,公众号的唯一标识
		      timestamp: res2.timestamp, // 必填,生成签名的时间戳
		      nonceStr: res2.nonceStr, // 必填,生成签名的随机串
		      signature: res2.signature,// 必填,签名
		      jsApiList: [
			  
			  'updateAppMessageShareData', 
			  'updateTimelineShareData',
			  'onMenuShareTimeline',
			  'onMenuShareAppMessage',
			  'onMenuShareQQ',
			  'onMenuShareQZone'
			  ] // 必填,需要使用的JS接口列表 
		  }); 
		  //config信息验证失败会执行error函数
		  wx.error(function(res) {
		      alert("error:" + res.errMsg);
		  });
		  
		  // config信息验证后会执行ready方法,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
		  wx.ready(function() {
			 wx.checkJsApi({
			   jsApiList: ['updateTimelineShareData','updateAppMessageShareData','onMenuShareAppMessage','onMenuShareAppMessage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
			   success: function(res) {
			   // 以键值对的形式返回,可用的api值true,不可用为false
			   // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
			   }
			 });
			
		  });
	});
}
3,调用 分享接口
javascript 复制代码
const tj=()=>{
	wx.checkJsApi({
	  jsApiList: ['updateTimelineShareData','updateAppMessageShareData','onMenuShareAppMessage','onMenuShareAppMessage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
	  success: function(res) {
		let appkey='wenId='+wenId.value+'&inviterId='+userId.value
		appkey=uni.common.md5(appkey)
		let textsrc='https://qzzs-huawei.wisdompm.cn/enter/#/pages/index/index?wenId='+wenId.value+'&inviterId='+userId.value+'&appkey='+appkey
		//textsrc=encodeURIComponent(textsrc)
		if(!zhuan.value?.img || !zhuan.value.img){
			zhuan.value.img='https://obs-9668.obs.cn-south-1.myhuaweicloud.com/logo.jpg'
		}
		wx.updateAppMessageShareData({
		    title: zhuan.value.text, // 分享标题
		    desc: '点击获取更多信息', // 分享描述
		    link: textsrc, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl: zhuan.value.img, // 分享图标
		    success: function () {
		      // 设置成功
		    }
		  })
		wx.updateTimelineShareData({
		    title: zhuan.value.text, // 分享标题
			desc: '点击获取更多信息', // 分享描述
		    link: textsrc, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl: zhuan.value.img, // 分享图标
		    success: function () {
		      // 设置成功
		    }
		  })
	  }
	});
	
}
相关推荐
web150850966415 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光15 小时前
uniapp小程序样式穿透
前端·小程序·uni-app
User_undefined1 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie1 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
爱笑的眼睛111 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
鱼樱前端1 天前
uni-app框架核心/常用API梳理一(数据缓存)
前端·uni-app
阿琳a_2 天前
解决uniapp中使用axios在真机和模拟器下请求报错问题
前端·javascript·uni-app
三天不学习2 天前
uni-app 跨端开发精美开源UI框架推荐
ui·uni-app·开源
多客软件佳佳2 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
洗发水很好用2 天前
uniApp上传文件踩坑日记
uni-app