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 () {
		      // 设置成功
		    }
		  })
	  }
	});
	
}
相关推荐
奔跑的web.10 小时前
UniApp 路由导航守
前端·javascript·uni-app
特立独行的猫a11 小时前
主要跨端开发框架对比:Flutter、RN、KMP、Uniapp、Cordova,谁是未来主流?
flutter·uni-app·uniapp·rn·kmp·kuikly
万物得其道者成1 天前
UniApp 多端滑块验证码插件 zxj-slide-verify 实用指南
uni-app
蓝帆傲亦1 天前
支付宝小程序性能暴增秘籍:UniApp项目极限优化全攻略
小程序·uni-app
2501_916008891 天前
深入解析iOS机审4.3原理与混淆实战方法
android·java·开发语言·ios·小程序·uni-app·iphone
QT.qtqtqtqtqt1 天前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
喵喵虫2 天前
uniapp修改封装组件失败 styleIsolation
uni-app
游戏开发爱好者82 天前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_915106322 天前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_915106322 天前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone