記一次微信公眾號開發

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

功能/是否支持 微信公眾號 小程序
一鍵分享好友 ? ?
分享朋友圈 ? ?
直接獲取手機號 ? ?
下載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`
    )
  1. 用戶授權后會跳回,并在參數后拼上code
  2. 通過code換取網頁授權access_token,必須從后端發起了
{
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE" 
 }
  1. 通過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"
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容