最近因為公司業(yè)務(wù)一直在做微信小程序的項目,趁此機會將最近踩過的一些坑總結(jié)記錄下。
appid 小程序唯一標(biāo)識 secret 小程序的 app secret js_code 登錄時獲取的 code grant_type 填寫為 authorization_code
openid 用戶唯一標(biāo)識 session_key 會話密鑰
openid 是用戶唯一標(biāo)識,但不建議直接用做后端服務(wù)器的各用戶標(biāo)示符。 session_key 是針對用戶數(shù)據(jù)進行加密簽名的密匙。session_key 在文件校驗,獲取用戶具體信息時均需使用
一般為了安全起見,這兩個數(shù)據(jù)都不會發(fā)往客戶端。
//app.js const NOLOGINCODE = 1000003 //未登錄 const SUCCESS = 1000001 //成功 App({ onLaunch: function () { var loginFlag = wx.getStorageSync('sessionId'); var that = this; if (loginFlag) { // 檢查 session_key 是否過期 wx.checkSession({ // session_key 有效(未過期) success: function () { var userInfo = wx.getStorageSync('wxUserInfo') if (userInfo) { that.globalData.hasUserInfo = true } }, // session_key 過期 fail: function () { // session_key過期,重新登錄 that.doLogin(); } }); } else { // 無skey,作為首次登錄 this.doLogin(); } }, doLogin() { this.log().then(res => { this.$post('/auth', { code: res.code, }, false).then(data => { wx.setStorageSync('sessionId', data.sessionId); }) }) }, /** *微信登錄 獲取code值,并將code傳遞給服務(wù)器 * @returns */ log() { return new Promise(resolve => { wx.login({ success(res) { if (res.errMsg === "login:ok") { resolve(res) } else { wx.showToast({ title: '微信登錄失敗', icon: 'none', duration: 1200 }) } }, fail() { wx.showToast({ title: '微信登錄接口調(diào)用失敗', icon: 'none', duration: 1200 }) } }) }) }, globalData: { baseurl: 'https://www.fake.shop' } }) 復(fù)制代碼
微信小程序中網(wǎng)絡(luò)請求的api是wx.request(),但是這個請求是個異步回調(diào)的形式,每次發(fā)請求都要寫好長一串,而且如果是嵌套的發(fā)請求,就會發(fā)現(xiàn)代碼寫的及其臃腫,所以將其 Promisefy是及其有必要的。 代碼如下:
$get(url, data = {}, needToken = true) { let SUCCESS = 200 var that = this needToken ? (data.token = wx.getStorageSync('ToKen')) : '' return new Promise((resolve, reject) => { wx.request({ url: that.globalData.baseurl + url, method: "GET", header: { 'content-type': 'application/json' }, data: data, success(e) { if (e.data.code == SUCCESS) { resolve(e.data) return } }, fail(e) { wx.showModal({ title: '提示', content: '請求失敗', showCancel: false }) reject(e) } }) }) }, $post(url, data = {}, needToken = true) { let that = this let SUCCESS = 200 let TimeOut = 1000 var that = this needToken ? (data.token = wx.getStorageSync('ToKen')) : '' return new Promise((resolve, reject) => { wx.request({ url: that.globalData.baseurl + url, method: "POST", //此處可以根據(jù)接口文檔設(shè)置header頭 // header: { // 'content-type': 'application/x-www-form-urlencoded' // }, data: data, success(e) { if (e.statusCode == SUCCESS) { if (e.data.code == SUCCESS) { resolve(e.data) } else { reject(e) wx.showModal({ title: '提示', content: e.data.msg, showCancel: false, success: function (res) { if (res.confirm) { if (e.data.code == TimeOut) { //根據(jù)實際業(yè)務(wù)返回的code碼判斷是否過期 // 登錄過期 that.doLogin(); } } } }) } } else { wx.showModal({ title: '提示', content: e.data.error, showCancel: false }) reject(e) } }, fail(e) { console.log(e) wx.showModal({ title: '提示', content: '請求失敗', showCancel: false }) reject(e) }, complete(e) { } }) }) }, 復(fù)制代碼
雖然是寫小程序踩坑指南,但是在微信內(nèi)的H5頁面支付和小程序內(nèi)掉起支付還是有相似之處的,順便記錄一下。
UnionID:為了識別用戶,每個用戶針對每個公眾號會產(chǎn)生一個安全的 OpenID,如果需要在多公眾號、移動應(yīng)用之間做用戶共通,則需前往微信開放平臺,將這些公眾號和應(yīng)用綁定到一個開放平臺賬號下,綁定后,一個用戶雖然對多個公眾號和應(yīng)用有多個不同的 OpenID,但他對所有這些同一開放平臺賬號下的公眾號和應(yīng)用,只有一個 UnionID 網(wǎng)頁授權(quán): 一些復(fù)雜的業(yè)務(wù)場景下,需要以網(wǎng)頁的形式提供服務(wù),通過網(wǎng)頁授權(quán)可以獲取用戶的openid(注:獲取用戶的 OpenID 是無需用戶同意的,獲取用戶的基本信息則需用戶同意) 微信 JS-SDK:是開發(fā)者在網(wǎng)頁上通過 JavaScript 代碼使用微信原生功能的工具包,開發(fā)者可以使用它在網(wǎng)頁上錄制和播放微信語音、監(jiān)聽微信分享、上傳手機本地圖片、拍照等許多能力。
npm install weixin-js-sdk ;
var wx = require('weixin-js-sdk');
URLEncoder.encode(payUrl)是非常有必要的 state參數(shù): 用于保持請求和回調(diào)的狀態(tài),授權(quán)請求后原樣帶回給第三方。該參數(shù)可用于防止 csrf 攻擊(跨站請求偽造攻擊),建議第三方帶上該參數(shù),可設(shè)置為簡單的隨機數(shù)加 session 進行校驗 后端獲取openid的原因: 因為我是前端,不想搞這個(開玩笑的
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)