關於微信分享的一些心得

首先，我一拿到分享這個功能，我是懵逼的，沒作過，好比怎麼點擊右上角的按鈕，怎麼觸發發送朋友圈事件等等之類，其實這個不用擔憂，這個都是微信本身的，

咱們只須要在在vue你要分享的那個頁面中初始化微信的分享就行，本身寫一個recommend.js(這個裏面有調微信接口的，有配置的等等之類的，注意微信分享這個只能在預發佈和正式環境測試，由於微信的接口才會經過)，咱們作分享的思路是，分享出去後，那個鏈接跳轉的空html，好比下面的share。html，這個html裏面有個函數自執行，用於調接口第一個接口是微信的，看是否關注，第二個接口是後臺的，用於記錄推薦人，因此二維碼裏面埋的地址也是這個，很長，因此二維碼看到很密集

第一步：先把寫好的recommend引入

import recommend from '../../../static/js/recommend.js'

第二步：在mounted初始化recommend(也不必定要mounted裏面搞，好比下面的doctorName，這些你在你哪裏獲得了，就能夠初始化recommend)

 

//分享那個
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中作你改動的操做

下面是recommend.js文件，（我從新寫弄一個上傳吧，另外一個隨筆）

這個文件裏面注意幾個坑，第一個獲取簽名那裏的url必定要動態獲取，就算你知道域名也要動態獲取（就是當前分享的頁面的域名），第二個若是分享出去沒有標題沒有圖片等那就說明wx.config裏面有錯，把debug打開調試就能夠看到哪裏出錯了

第4步：在空的html中

 

</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 >

第三部：$( "#code").qrcode({

　　　　render: "canvas", //也能夠替換爲table，
             text: this.Url,
              width:300,
              height:300

});