【VUE H5 自定义微信分享 SDK THINKPHP5】

微信自定义分享样,显示标题,图片描述分享样式,前后端具体描述====小白级别都可以看懂!!!

一、准备工作

认证的公众号

绑定域名
登录微信公众平台，设置—公众号设置—功能设置里，填写『JS接口安全域名』。
填写的域名须通过ICP备案验证，将平台给的txt文件放到域名指向的web服务器之下，注意这里有次数限制没有必要不用修改,避免造成不必要的麻烦。

官网文档：官方文档

二、Thinkphp部分

自己代码规范自己定，看着舒服就行呗

public function getSign() {
      $arrResult = ['success'=>true , 'msg'=>'初始化成功', 'data'=>[]];
      
      try {
          //传入参数
          $sSignUrl = trim(input('前端提交的参数名称'));
          
          //设置默认值 , 便于测试
          //if (!$sSignUrl) $sSignUrl = "https://www.baidu.com/index.html";
          if(empty($sSignUrl)){
              throw new Exception("参数错误");
          }
          
          //初始化参数
          $sAppid 		= "自己的appID";
          $sSecret 		= "自己的appSecret";
          $sUrl 		= "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$sAppid."&secret=".$sSecret;
          $sCredential 	= file_get_contents($sUrl);
          $sCredential 	= json_decode($sCredential, true);
          $sAccessToken = $sCredential['access_token'] ?? '';
          if(empty($sAccessToken)){
              throw new Exception("解析token奥利给");
          }
          
          //设置存储 , 避免多次获取
          $sKey      = "jsSdkTicket";
          $sJsTicket = $this->auth->redis->get($sKey);
          if (!$sJsTicket && !empty($sAccessToken)) {
              $sUrlStr      = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$sAccessToken."&type=jsapi";
              $sJsticket    = file_get_contents($sUrlStr);
              $arrJsticket  = json_decode($sJsticket, true);
              if(!empty($arrJsticket) && !empty($arrJsticket['ticket']) && !empty($arrJsticket['expires_in'])){
                  $sJsTicket    = $arrJsticket['ticket'];
                  $this->auth->redis->set($sKey, $sJsTicket, $arrJsticket['expires_in']);
              }else{
                  throw new Exception("解析ticket奥利给");
              }
          }
          
          //初始化参数
          $nTimestamp 	  = time();
          $sNonceStr  	  = md5(rand(10000000,100000000).time()); //获取随机字符串随自己设置
          $sSignUrlBase64 = base64_decode($sSignUrl);
  
          $sSignStr = "jsapi_ticket=".$sJsTicket."&noncestr=".$sNonceStr."&timestamp=".$nTimestamp."&url=".$sSignUrlBase64;
          $sSignStr = sha1($sSignStr);
          if(empty($sSignStr)){
              throw new Exception("解析sign奥利给");
          }
          
          //设置返回
          $arrResult['data'] = [
              'appid'     => $sAppid,
              'timestamp' => $nTimestamp,
              "nonceStr"  => $sNonceStr,
              "signature" => $sSignStr
          ];
      } catch (\Exception $e) {
          $arrResult['success'] = false;
          $arrResult['msg'] = $e->getMessage ();
      }
      return $arrResult;
  }

二、前端部分使用第三方sdk js_sdk

import wx from './index.js';
import api from '../http/api.js'

export default {
	async init(){
		//获取数据
		let _url = window.btoa(window.location.href)
		let configData = await api.shareConfig({urlStrInfo:_url});
		
		//设置配置
		wx.config({
			debug: false,
			appId: configData.data.appid, // 必填，公众号的唯一标识
			timestamp: configData.data.timestamp, // 必填，生成签名的时间戳
			nonceStr: configData.data.nonceStr, // 必填，生成签名的随机串
			signature: configData.data.signature, // 必填，签名，见附录1
			jsApiList: [
				'updateAppMessageShareData',
				'updateTimelineShareData',
				//以下废弃
				// 'previewImage',
				// 'hideAllNonBaseMenuItem',
				// 'showMenuItems',
				// 'onMenuShareTimeline',
				// 'onMenuShareAppMessage',
				// 'chooseWXPay',
				
			] // 必填，需要使用的 JS 接口列表，所有JS接口列表见附录2
		});
	},
	//执行分享
	async wechatShare(info){
		const that = this
		// console.log(info , '当前分享参数信息')
		wx.checkJsApi({
			jsApiList: ['updateAppMessageShareData','updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
			success: function(res) {
				
				// 以键值对的形式返回，可用的api值true，不可用为false
				// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
				
				const share_title = info.title
				const share_desc  = info.desc
				const share_link  = info.link
				const share_img   = info.img
				
				wx.ready(() => {
					//分享给朋友	分享到QQ
					wx.updateAppMessageShareData({ 
						title: share_title, // 分享标题
						desc: share_desc, // 分享描述
						link: share_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: share_img, // 分享图标
						success: function () {
						  // 设置成功
						  console.log('分享给朋友 qq')
						}
					});
					
					//分享到朋友圈	分享到QQ空间
					wx.updateTimelineShareData({ 
						title: share_title, // 分享标题
						desc: share_desc,
						link: share_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: share_img, // 分享图标
						success: function () {
						  // 设置成功
						   console.log('分享到朋友圈	分享到QQ空间')
						}
					});
				});
				
				wx.error((err)=>{
					console.log(err,'微信分享错误信息')
				})
			}
		});
	}
}

提示：直接可用 OK 别忘记点赞!!!
提示：以上是本篇文章正文所有内容, 有什么问题留言哦，不喜勿喷 ，加油!!! 奥利给