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

權衡利弊以后決定使用微信公眾號生態，獲取手機號可以用戶輸入，分享好友可以引導用戶進行操作。
要使用公眾號分享后好友能看到標題的描述的內容需要使用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"
}