產品要做一個分享傳播的活動考慮微信公眾或者小程序
功能/是否支持 | 微信公眾號 | 小程序 |
---|---|---|
一鍵分享好友 | ? | ? |
分享朋友圈 | ? | ? |
直接獲取手機號 | ? | ? |
下載app | ? | ? |
權衡利弊以后決定使用微信公眾號生態,獲取手機號可以用戶輸入,分享好友可以引導用戶進行操作。
要使用公眾號分享后好友能看到標題的描述的內容需要使用JSSDK。
這里我走進了個誤區,以為使用JSSDK需要用戶授權,實際不需要也能使用。
接下來我們開搞。
JSSDK開發
- 第一步,綁定域名,主要是在公眾平臺填寫js接口安全域名
- 第二步,在頁面中引入http://res.wx.qq.com/open/js/jweixin-1.4.0.js或者http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
- 第三步,在填寫wx.config
- 第四部,在wx.ready里使用微信分享,配置對應的標題描述圖片和訪問地址
- 第五步,大功告成
哇,好簡單!當然不可能了,這么簡單不就不好玩了。在第三步的填寫wx.config時還需做比較多的工作
配置wx.config
主要是要生成signature
- 首先需要后端小伙伴配合獲取jsapi_ticket
- 生成signature,雖說微信建議在后端生成,實際在前端也可以做。
(1). 用jsapi_ticket、noncestr(隨機字符串)、timestamp(任意時間戳)、url(當前頁面url,如果有#,#后不需要)。按照順序,拼接成一個字符串
(2). 對字符串進行sha1加密
(3). 得到signature
const signArgs = {
timestamp: parseInt(new Date().getTime() / 1000), // 時間戳
noncestr: Math.random().toString(36).substr(2), // 隨機字符串
url: location.href.split('#')[0],
jsApiTicket
}
const preSha = `jsapi_ticket=${signArgs.jsApiTicket}&noncestr=${signArgs.noncestr}×tamp=${signArgs.timestamp}&url=${signArgs.url}`
const signResult = {
noncestr: signArgs.noncestr,
timestamp: signArgs.timestamp,
signature: sha1(preSha)
}
wx.config({
debug: false,
appId: weixinAppid,
timestamp: signResult.timestamp,
nonceStr: signResult.noncestr,
signature: signResult.signature,
jsApiList: self.jsApiList
})
我在過程中遇到兩個坑
- 第一個坑,通過微信官方給的signature生成驗證工具,不管怎么樣都不一樣,最后發現官方的時間戳是10位,我這邊生成的是13位,所以在代碼里我做了除以1000parseInt操作
- 第二個坑,兩邊生成的signature一樣了,但是在頁面里還是報invalid signature,最后發現是我appid填寫錯誤,填寫正確以后就正常了。
我在做的時候還是做了用戶授權(雖然做完發現不需要注釋了)
這里還是記錄一下。
主要是從微信獲取code
用戶授權,獲取用戶信息
- 跳轉到中間頁獲取用戶授權authorize為我這里的頁面
const url = encodeURIComponent(window.location.href)
window.location.replace(
`${authorize}?appid=${weixinAppid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
)
- 用戶授權后會跳回,并在參數后拼上code
- 通過code換取網頁授權access_token,必須從后端發起了
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
- 通過access_token和openid就可以拿到用戶信息了
{
"openid":" OPENID",
" nickname": NICKNAME,
"sex":"1",
"province":"PROVINCE"
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}