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 () {
		      // 设置成功
		    }
		  })
	  }
	});
	
}
相关推荐
每天都要喝奶茶2 小时前
vue3uniapp实现自定义拱形底部导航栏,解决首次闪烁问题
前端·vue.js·uni-app
1登峰造极2 小时前
uniapp 打包安卓证书生成完整流程
uni-app
Jocelyn_书3 小时前
uniapp编译多端项目App、小程序,input框键盘输入后
小程序·uni-app·项目
雪芽蓝域zzs3 小时前
uni-app 运行HarmonyOS项目
uni-app·harmonyos
计算机学姐15 小时前
基于uniapp微信小程序的餐厅预约点餐系统
java·spring boot·微信小程序·小程序·java-ee·uni-app·tomcat
是程序喵呀15 小时前
Uni-App-02
uni-app·vue·1024程序员节
顾鸟15 小时前
uniapp uview 一键回到底部 组件
uni-app
x原力觉醒21 小时前
uniapp跨域问题,在开发环境中配置
javascript·vue.js·uni-app
小威编程1 天前
uni-app应用级生命周期和页面级生命周期
前端·vue.js·uni-app
江-月*夜1 天前
uniapp vuex 搭建
android·javascript·uni-app