記一次微信公衆號開發

產品要作一個分享傳播的活動考慮微信公衆或者小程序

功能/是否支持	微信公衆號	小程序
一鍵分享好友	❎	✅
分享朋友圈	✅	❎
直接獲取手機號	❎	✅
下載app	✅	❎

權衡利弊之後決定使用微信公衆號生態，獲取手機號能夠用戶輸入，分享好友能夠引導用戶進行操做。 要使用公衆號分享後好友能看到標題的描述的內容須要使用JSSDK。

微信文檔

這裏我走進了個誤區，覺得使用JSSDK須要用戶受權，實際不須要也能使用。 接下來咱們開搞。

JSSDK開發

1. 第一步，綁定域名，主要是在公衆平臺填寫js接口安全域名
2. 第二步，在頁面中引入http://res.wx.qq.com/open/js/jweixin-1.4.0.js或者http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
3. 第三步，在填寫wx.config
4. 第四部，在wx.ready裏使用微信分享，配置對應的標題描述圖片和訪問地址
5. 第五步，大功告成

哇，好簡單！固然不可能了，這麼簡單不就很差玩了。在第三步的填寫wx.config時還需作比較多的工做

配置wx.config

主要是要生成signature

jsapi_ticket文檔

1. 首先須要後端小夥伴配合獲取jsapi_ticket
2. 生成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}&timestamp=${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
})
複製代碼

---

我在過程當中遇到兩個坑

1. 第一個坑，經過微信官方給的signature生成驗證工具,無論怎麼樣都不同，最後發現官方的時間戳是10位，我這邊生成的是13位，因此在代碼裏我作了除以1000parseInt操做
2. 第二個坑，兩邊生成的signature同樣了，可是在頁面裏仍是報invalid signature，最後發現是我appid填寫錯誤，填寫正確之後就正常了。

微信 JS 接口簽名校驗工具 常見錯誤及解決方法

---

我在作的時候仍是作了用戶受權（雖然作完發現不須要註釋了） 這裏仍是記錄一下。 主要是從微信獲取code

微信文檔

用戶受權，獲取用戶信息

1. 跳轉到中間頁獲取用戶受權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`
    )
複製代碼

2. 用戶受權後會跳回，並在參數後拼上code
3. 經過code換取網頁受權access_token，必須從後端發起了

{
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE" 
 }
複製代碼

4. 經過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"
}
複製代碼