首先,我一拿到分享這個功能,我是懵逼的,沒作過,好比怎麼點擊右上角的按鈕,怎麼觸發發送朋友圈事件等等之類,其實這個不用擔憂,這個都是微信本身的,html
咱們只須要在在vue你要分享的那個頁面中初始化微信的分享就行,本身寫一個recommend.js(這個裏面有調微信接口的,有配置的等等之類的,注意微信分享這個只能在預發佈和正式環境測試,由於微信的接口才會經過),咱們作分享的思路是,分享出去後,那個鏈接跳轉的空html,好比下面的share。html,這個html裏面有個函數自執行,用於調接口第一個接口是微信的,看是否關注,第二個接口是後臺的,用於記錄推薦人,因此二維碼裏面埋的地址也是這個,很長,因此二維碼看到很密集vue
第一步:先把寫好的recommend引入jquery
import recommend from '../../../static/js/recommend.js'
第二步:在mounted初始化recommend(也不必定要mounted裏面搞,好比下面的doctorName,這些你在你哪裏獲得了,就能夠初始化recommend)canvas
//分享那個
getDocInfo(){
//用於跳轉的空html頁面
let url=urlWay.RongIMHost+'user/share.html'
recommend('醫生主頁',this.doctor.doctorInfo.doctorName+'-'+this.doctor.doctorInfo.doctorTitle+'【個人標題】','簡介:'+this.doctor.doctorInfo.doctorComment,this.fileserver+this.doctor.doctorInfo.doctorImage,url);
},
第三步:在recommend中作你改動的操做c#
下面是recommend.js文件,(我從新寫弄一個上傳吧,另外一個隨筆)api
這個文件裏面注意幾個坑,第一個獲取簽名那裏的url必定要動態獲取,就算你知道域名也要動態獲取(就是當前分享的頁面的域名),第二個若是分享出去沒有標題沒有圖片等那就說明wx.config裏面有錯,把debug打開調試就能夠看到哪裏出錯了
微信
第4步:在空的html中app
</script>
<script>
(function() {
let jump=(window.location.href).substring((window.location.href).indexOf('jumpUrl=')+8,(window.location.href).length-1)
/*
if (jump.indexOf('&from')==-1){
return
}*/
//這裏必定要幹掉&from這他嗎是微信本身在屁股後面加的參數,我這邊真實地址是加了base64的,因此要幹掉這個
let jumpurl=jump.slice(0,jump.indexOf('&from'))
//這個是龍龍後臺的接口
let url=urlWay.host+'shareExtend/handleShareExtendJumpLogic.action?jumpUrl='+jumpurl
setTimeout(
function () {
//這個是調微信接口看關注沒
window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+urlWay.appId+'&redirect_uri='+
url+'&response_type=code&scope=snsapi_userinfo&state=gc#wechat_redirect'
}
,500);
})();
</script>
有趣的東西,用jq生成二維碼的地方,要用到jq的插件(jquery.qrcode.js)函數
render:
"canvas"
,
必定要canvas,table是針對IE的,日了狗了,table就算你指定了寬高是正方形,table也仍是生成的長方形(高度會少一點,因此掃描不起)
測試
第一步,先映入jq,在引入jquery.qrcode.js(依賴於jq)
第二公:
<
div
id
=
"qrcode"
></
div
>
render:
"canvas"
,
//也能夠替換爲table,