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 () {
		      // 设置成功
		    }
		  })
	  }
	});
	
}
相关推荐
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index5 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情12 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00715 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字15 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔15 小时前
uniapp rpx兼容平板
uni-app
荔枝吖16 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗16 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141618 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子2 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测