記一次微信公眾號開發

叫我王珩hénghénghéng發表於2019-03-31

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

功能/是否支援 微信公眾號 小程式
一鍵分享好友 ❎ ✅
分享朋友圈 ✅ ❎
直接獲取手機號 ❎ ✅
下載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"
}
複製程式碼

相關文章