vue微信網頁開發微信JS SDK自定義分享踩坑

2021-10-02 01:29:32 字數 2919 閱讀 2201

由於銷售員是直接輸入使用者名稱密碼登入，因此在銷售員登入後將銷售員編號，以及文章編號存入本地；

在頁面載入，即mounted中，取出本地的銷售員編號、文章編號和路徑的銷售員編號、文章編號，如果本地存在銷售員編號則為銷售員，反之為客戶；

乙個https的網域名稱，如果確實沒有，那也可以先使用內網穿透。關於內網穿透，本人開始使用的是花生殼的內網穿透，坑爹啊，衝了6塊錢不說，網域名稱還不能固定。推薦使用sunny-ngrok內網穿透，真心比花生殼好用，而且可以免費用乙個

import


from


'vuex'


import wx from


'weixin-js-sdk'


import qs from


'qs'


import


from


'../../api'


data()


,                salesnum:'',


//銷售員編號


newsdetail:


,//新聞詳情}}


,async


mounted()


=paramsobj


salesnum=salesnum || cookisalesnum


connum=connum || cookiconnum


let=this


.$globalmethods.


wxpublicdata()


let iswx=


this


.isweixin()


if(!cookisalesnum &&


!code && iswx)


/newsdetail?connum=


$&salesnum=$`


redirect_uri=


encodeuricomponent


(redirect_uri)


//此處必須要轉碼


window.location.href=


&redirect_uri=


$&response_type=code&scope=snsapi_userinfo&state=state#wechat_redirect`


return


}let newsdetail=


await


reqnewsdetail


(connum)


//獲取資訊詳情


this


.newsdetail=newsdetail//將資訊詳情渲染到頁面


iswx &&


this


.wxsignfun()


cookisalesnum &&


this


.$store.


dispatch


('getmycardinfo',)


//銷售員，顯示銷售員資訊if(


!cookisalesnum && iswx)}}


,        methods:


=congigresult


wx.config()


//處理驗證失敗的資訊


wx.error


(function


(res)


)let desc=


this


.totext


(newsdetail.context)


.substring(0


,20)let link=`$


?connum=


$&salesnum=$`


let sharedata=,}


wx.ready


(result=>})


})},


//富文字資料轉純文字函式


totext


(html),


isweixin()


,}
簽名url錯誤。注意簽名的url一定用window.location.href來取，另外，專案必須部署以後才能測試簽名，不管網域名稱是已經申請好的https網域名稱，還是內網穿透的https網域名稱都行，直接在開發工具位址列輸入localhost:8080，簽名肯定失敗.

子頁面的簽名。本人的專案裡面，有多個簽名頁面，而且是從父級頁面跳轉到子級頁面後才簽名，這裡有個地方要注意，跳轉的時候請用window.location.href來進行子頁面的跳轉，用this.rou

ter.

repl

ace或

者thi

s.

router.replace或者this.

router

.rep

lace

或者th

is.router.push等vue的跳轉方式，在安卓機簽名可以成功，但是在蘋果機ios系統下，就會失敗，這和ios的路由快取機制有關

window.location.href=`$


/newsdetail`


//需要簽名的子頁面的正確跳轉方式
本人亦探索過用vue路由守衛解決ios的這個問題，但最終測試時發現無效，因此放棄

redirect_uri=`$


/newsdetail?connum=


$&salesnum=$`


redirect_uri=


encodeuricomponent


(redirect_uri)


window.location.href=


&redirect_uri=


$&response_type=code&scope=snsapi_userinfo&state=state#wechat_redirect`
由於vue開發是單頁面應用，如果想讓分享出去的頁面單獨顯示自己的標題，最有效的辦法就是在mounted裡面寫上這句

document.title='你的自定義標題'//
本人踩坑時亦嘗試過路由守衛，但是在ios上還是不盡人意，而且還比較麻煩

微信網頁開發

授權也分兩種 靜態授權和手動授權 關於網頁授權的兩種scope的區別說明 1 以snsapi base為scope發起的網頁授權，是用來獲取進入頁面的使用者的openid的，並且是靜默授權並自動跳轉到 頁的。使用者感知的就是直接進入了 頁 往往是業務頁面 2 以snsapi userinfo為sco...

微信公眾平台開發 微信網頁授權

條件 關於網頁授權的兩種scope的區別說明 以snsapi userinfo為scope發起的網頁授權，彈出授權頁面，可通過openid拿到暱稱 性別 所在地。並且，即使在未關注的情況下，只要使用者授權，也能獲取其資訊。關於網頁授權access token和普通access token的區別 而普...

微信開發之微信網頁授權 完整示例

二 總共有5個步驟 1 使用者同意授權，獲取code 2 通過code換取網頁授權access token 3 重新整理access token 如果需要 4 拉取使用者資訊 需scope為 snsapi userinfo 5 附 檢驗授權憑證 access token 是否有效 三 每乙個步驟的實...