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 是否有效 三 每乙個步驟的實...