在前段時間做了一個微信公眾號,因為我又是新手,沒什麼經驗,拿起vue就開始,導致一坑再坑,簡直闊怕!!!
對於此次專案,我主要用到的是vue的整框架和必要的外掛,但是我沒用vuex,用vuex的話會方便很多很多

1.首先從認證獲取openid說起;

因為我們後天也是第一次做微信公眾號,導致大家都走了很多彎路,剛開始認證是由前端來轉認證跳轉,後臺給我介面,傳一個url給我我做跳轉再返回到我的目標頁面,把引數帶在地址後面,然後我去擷取地址,獲取引數,這樣不是不可以,但是徵得增加了很多不必要的麻煩.

後來我們改正了,有後臺去做認證跳轉,進去我們的頁面就直接認證,自己做跳轉,引數還是帶在url地址後面,我個人認為要是後端可以,把引數放在cookie是比較好的;

2.微信支付;

之前一直不知道,我覺得微信支付必須要認證成功之後可以,但是後來發現並不是這樣的,之前做的時候,一直遇到坑,因為我們授權是寫在登入頁面的,使用者第一次進入的時候需要到登入頁面,就要授權,但是使用者第二次進入的話不需要登入,就導致沒有授權,微信支付就不成功,後來我們就改成了,只要點選微信公眾號的導航欄的目標頁面,第一次進去就開始認證,這樣微信支付就成功了,微信支付還要注意,要在微信商戶平臺配置需要支付的地址,不然報錯

這樣錯我遇到了兩次,一次就是沒有授權,第一次能支付,第二次就出現這樣的錯,第二次就是沒有配置地址;反正在微信支付這裡我弄了很久,但是弄清楚之後你就會發現其實不難

3.微信分享;

微信分享也是,現在我想著我之前思路不清晰,做的哪些東西,真的,腦殼皮都還在痛,微信分享首先要認證;
![這裡寫圖片描述](https://img-blog.csdn.net/20171226160224087?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzY5NzczODE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

配置自己需要的引數,微信支付和認證裡面的data都是後臺返回的,注意大小寫,微信認證可以寫router.beforeEach
裡面更具自己的需求,要是路由切換了,就認證;這是最終解決的方法,但是之前我的config認證是寫在每個頁面的,我需要分享的頁面我就會去配置,導致自己真的一坑在坑,首先,是先後問題,就是每次進入頁面,我config還沒有認證成功,我的就已經調起了分享的函數了,這導致我每次分享都不成功,要是寫在router.beforeEach裡面就不會存在這個問題,還有就是要注意shareMessage裡面的內容,要是是動態配置的就不會有多大的問題.

說到這個認證,就會涉及到url地址:
首先是在hash下面,獲取的url地址，前端需要用js獲取當前頁面除去’#’hash部分的連結:可用location.href.split(‘#’)[0]獲取;
要是用的history模式的話,就獲當前也買你的地址,但是你會發現問題又來了,因為history模式的話,在Android手機上沒什麼問題,但是ios上面問題就出來了,就是你怎麼弄只有當前進去的頁面可以認證成功,之後每個頁面,你可以複製當前也買你的地址,不管是那個頁面都是你第一次進去的那個也買你的地址,這樣就導致地址認證不成功,生成的簽名不一樣,config也就不成功,我是這樣解決的,

還是要用到router.beforeEach,我會先判斷是不是Android,要是是的話就直接next();要是不是的話就判斷是不是第一次進來,如果是第一次進入頁面,就把地址儲存起來,我上面說我沒有用vuex我直接儲存在sessionStorage裡面的,這樣我要是是ios的話我每次config的地址就是我sessionStorage的地址,這樣我在history模式下就把config認證好了.當然也還有其他方法,比如可以用a標籤跳轉,但這樣也就失去意義了,也沒有必要.