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 () {
		      // 设置成功
		    }
		  })
	  }
	});
	
}
相关推荐
2501_9159184111 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手11 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_9159090614 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师15 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj16 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921431 天前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082851 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app