技術標籤：微信分享javavue.jshtml

java+vue 微信h5分享

• 後端程式碼
• 前端程式碼
• 效果

後端程式碼

try {
			//隨機字串
            String nonceStr = WXPayUtil.generateNonceStr();
            //當前時間戳
            String timestamp = String.valueOf(System.currentTimeMillis() / 1000);
            String accessToken = null;
            String ticket =
 
 null;
            boolean tokenHave = redisUtils.hasKey("accessToken");
            if(tokenHave){
                accessToken = (String) redisUtils.get("accessToken");
            }else {
                System.out.println("傳送獲取accessToken");
                String requestUrl =
 
 "https://api.weixin.qq.com/cgi-bin/token";
                String params = "grant_type=client_credential&appid=" + WxConstant.appId + "&secret=" + WxConstant.secret + "";
                String result = WxUtil.sendGet(requestUrl, params);
                accessToken =
 
 com.alibaba.fastjson.JSONObject.parseObject(result).getString("access_token");
                boolean flag = redisUtils.set("accessToken", accessToken, 6600);
                if(flag == false){
                    getJsapiTicket();
                }
            }
            boolean ticketHave = redisUtils.hasKey("ticket");
            if(ticketHave){
                ticket = (String) redisUtils.get("ticket");
            }else {
                String requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";
                String params = "access_token=" + accessToken + "&type=jsapi";
                String result = WxUtil.sendGet(requestUrl, params);
                ticket = com.alibaba.fastjson.JSONObject.parseObject(result).getString("ticket");
                System.out.println("獲取 ticket========"+ticket);
                if(ticket == null || "".equals(ticket)){
                    getJsapiTicket();
                }
                //過期時間
                boolean flag = redisUtils.set("ticket", ticket, 6600);
                if( flag == false ){
                    getJsapiTicket();
                }
	            //生成簽名欄位
	            String sign = "jsapi_ticket="+ticket +"&noncestr="+nonceStr+"&timestamp="+timestamp+"&url="+receiveParam.getParam3();
	            //sha1加密
	            sign = SHA1Util.SHA1Encode(sign);
	            Map<String, String> shareMap = new HashMap<>();
	            shareMap.put("jsapiTicket",jsApiTicket);
	            shareMap.put("appId", WxConstant.appId);
	            shareMap.put("timestamp", timestamp);
	            shareMap.put("nonceStr", nonceStr);
	            shareMap.put("signature", sign);
	            return new ResponseBean(ResultStatusEnum.SUCCESS.getCode(),
	                    ResultMessage.QUERY_SUCCESS,
	                    shareMap);
            }
            //生成簽名欄位
           	String sign = "jsapi_ticket="+ticket +"&noncestr="+nonceStr+"&timestamp="+timestamp+"&url="+receiveParam.getParam3();
            //sha1加密
            sign = SHA1Util.SHA1Encode(sign);
            Map<String, String> shareMap = new HashMap<>();
            shareMap.put("jsapiTicket",jsApiTicket);
            shareMap.put("appId", WxConstant.appId);
            shareMap.put("timestamp", timestamp);
            shareMap.put("nonceStr", nonceStr);
            shareMap.put("signature", sign);
            return new ResponseBean(ResultStatusEnum.SUCCESS.getCode(),
                    ResultMessage.QUERY_SUCCESS,
                    shareMap);
        }catch (Exception e){
            System.out.println();
            getJsapiTicket();
        }
        return null;

前端程式碼

<template>
	<view>
		<image src="../../../static/image/broker.png" class="one-view"></image>
		<view class="broker-btn" @click="brokerBtn()"></view>
		<view class="return-view">
			<image src="../../../static/image/return.png" class="return-img" @click="returnImg()"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				openId:"",
				code:"",
			}
		},
		created() {
			//注入js
			const s = document.createElement('script');
			s.type = 'text/javascript';
			s.src = 'http://res2.wx.qq.com/open/js/jweixin-1.4.0.js';
			document.body.appendChild(s);
		
			this.WeChatAuthorization();
			
		},
		methods:{
			async WeChatAuthorization(){
				this.getShareInfo('上線！請點贊','baidu.com');
			},
			//分享
			async getShareInfo(tit,fxUrl){
				var url= window.location.href.split("#")[0];
				const res = await this.$myRequest({
					method: 'POST',
					url:'/wechar/getUserShareEntity',
					data:{
						"param3":url,
					}
				})	
				console.log(wx,"wx")
				wx.config({
					debug: false,// 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
					appId: res.data.data.appId,         // 必填，公眾號的唯一標識，填自己的！
					timestamp: res.data.data.timestamp, // 必填，生成簽名的時間戳，剛才介面拿到的資料
					nonceStr: res.data.data.nonceStr,   // 必填，生成簽名的隨機串
					signature: res.data.data.signature, // 必填，簽名，見附錄1
					jsApiList: [
						'onMenuShareTimeline',
						'onMenuShareAppMessage'
					]
				})
								
				wx.ready(function () {
					//分享到朋友圈
					wx.onMenuShareTimeline({
					  title: tit,   // 分享時的標題
					  link: fxUrl,     // 分享時的連結
					  imgUrl: "",    // 分享時的圖示
					  success: function () {
						console.log("分享成功");
					  },
					  cancel: function () {
						console.log("取消分享");
					  }
					});
					//分享給朋友
					wx.onMenuShareAppMessage({
					  title: tit,//分享的標題
					  desc: '星途璀璨，夢在指尖',//分享的內容 
					  link: "baidu.com",//點選跳轉的路徑
					  imgUrl: "自己的分享的圖片",
					  type: '',
					  dataUrl: '', 
					  success: function () {
						console.log("分享成功");
					  },
					  cancel: function () {
						console.log("取消分享");
					  }
					});
				})
			}
		},
		
	}
</script>

效果