微信小程序開發(fā)之從“跳傘”到“吃雞”
寫在前邊微信小程序隨著官方開放越多越多的接口，也是變的越來(lái)越火了，越來(lái)越多的企業(yè)已經(jīng)開始布局小程序生態(tài)。所以，對(duì)于我們開發(fā)者來(lái)說(shuō)，掌握小程序開發(fā)顯得分外重要。如果點(diǎn)亮了該技能，那么離升職加薪贏取白富美的日子就又近了一步啦！ 關(guān)于我筆者算是一個(gè)野生的程序猿吧，沒(méi)有什么大廠經(jīng)驗(yàn)，搞開發(fā)就是一個(gè)字，干！從不來(lái)虛的。因此，隨性的性格造就了我全棧（一竅不通）的本事，做項(xiàng)目那就是一把抓，前后端全包，什么前后端撕逼的問(wèn)題統(tǒng)統(tǒng)沒(méi)有了，哈哈哈（想想心里還有點(diǎn)小激動(dòng)）。不過(guò)本文筆者只重點(diǎn)分享小程序開發(fā)相關(guān)的東西，想了解后端的話，可以坐等我下一次的分享哈哈哈（可能會(huì)遙遙無(wú)期）。 準(zhǔn)備工作話不多說(shuō)，進(jìn)入正題。現(xiàn)在開始分享我是怎么開發(fā)完一款小程序的。小程序的官方文檔其實(shí)寫的是很詳細(xì)很清晰的，相比微信公眾號(hào)的開發(fā)文檔來(lái)說(shuō)真的是非常非常的良心，所以開發(fā)前瀏覽一遍開發(fā)文檔非常關(guān)鍵。下邊我分享一下其他準(zhǔn)備工作。 1. 開發(fā)工具工欲善其事，必先利其器，首選的就是把開發(fā)環(huán)境給弄好咯，我推薦如下： 開發(fā)工具
調(diào)試工具
當(dāng)然開發(fā)工具什么的只要自己習(xí)慣就好，我的推薦只是參考。筆者最后習(xí)慣是直接在官方的開發(fā)者工具上編輯加調(diào)試。 2. 小程序配置這塊的內(nèi)容官方文檔都有詳細(xì)的教程，我就不多補(bǔ)充啦。總體來(lái)說(shuō)就是需要去申請(qǐng)一個(gè)開發(fā)者賬號(hào)，然后配置小程序的基本信息，比較值得重點(diǎn)說(shuō)的就是小程序api的配置，官方要求必須是https。說(shuō)到這里，如果讀者你的api接口已經(jīng)了https可以跳過(guò)了，如果不是，然后你也像筆者一樣是全棧開發(fā)，那么筆者將告訴你如何快速讓接口踏上https的航班。 是的，沒(méi)錯(cuò)， 就是它！Certbot
在官網(wǎng)上選好http服務(wù)器和linux系統(tǒng)后，按照命令一個(gè)一個(gè)敲，就ok了，簡(jiǎn)直不要太簡(jiǎn)單。哈哈哈，至于想深入了解這個(gè)東東的話，可以去了解下Let's Encrypt 開發(fā)總算可以正式的開始擼功能了！因?yàn)榭紤]到現(xiàn)在程序猿找對(duì)象是真的太難了，所以筆者擼的小程序是一個(gè)脫單交友的小程序（單身汪的福音哦），小程序頁(yè)面也不多，核心就是讓用戶填寫個(gè)人信息然后展示出來(lái)。是的，就是這么簡(jiǎn)單！ 授權(quán)登錄小程序的授權(quán)登錄其實(shí)可以看作是兩件事情，授權(quán)和登錄，這兩者是可以單獨(dú)分開處理的（個(gè)人觀點(diǎn)，允許反駁）。 授權(quán)對(duì)于授權(quán)，其實(shí)官方已經(jīng)有講到，就是換成微信內(nèi)的授權(quán)詢問(wèn)，就是如下這個(gè)東西
。 這個(gè)微信授權(quán)的詢問(wèn)彈窗之前的版本中只要調(diào)用獲取用戶信息的api，是會(huì)自動(dòng)彈出的，現(xiàn)在小程序做了調(diào)整需要自行通過(guò)按鈕觸發(fā)，所以這個(gè)很蛋疼。那么需要怎么去設(shè)計(jì)呢，這里也有兩個(gè)方案，一個(gè)是做個(gè)單獨(dú)的頁(yè)面，另一個(gè)方案是做彈窗。個(gè)人建議是選方案一，因?yàn)檫@樣可以把授權(quán)邏輯從頁(yè)面邏輯里獨(dú)立出來(lái)，方便所有頁(yè)面渲染前調(diào)用。具體coding如下： 在app.js中，判斷是否已經(jīng)授權(quán)，如果未授權(quán)則跳轉(zhuǎn)到授權(quán)頁(yè)面
App({
onLaunch: function () {
...
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會(huì)彈框
console.log('已經(jīng)授權(quán)')
} else {
// 未授權(quán)，跳轉(zhuǎn)到授權(quán)頁(yè)面，必須要用reLauch進(jìn)行跳轉(zhuǎn)
wx.reLaunch({
url: '/pages/auth/index',
})
console.log('需要授權(quán)')
}
}
})
},
在'pages/auth/index.wxml'頁(yè)面中，使用button做授權(quán)按鈕 <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">微信賬號(hào)授權(quán)登錄</button> 'pages/auth/index.js'中定義綁定的回調(diào)方法，重新跳轉(zhuǎn)回上一頁(yè)
Page({
...
// 點(diǎn)擊授權(quán)后跳回首頁(yè)
bindGetUserInfo (e) {
wx.reLaunch({ url: '../index/index' })
// 用戶已經(jīng)同意小程序使用獲取用戶信息功能，后續(xù)調(diào)用 wx.startRecord 接口不會(huì)彈窗詢問(wèn)
}
})
這樣，一個(gè)授權(quán)邏輯就完成了。 登錄登錄的目錄其實(shí)是和后端交互，需要在服務(wù)器端存儲(chǔ)當(dāng)前用戶的標(biāo)識(shí)，以便用戶下一次登錄時(shí)服務(wù)器知道是誰(shuí)登錄了。做過(guò)微信公眾號(hào)開發(fā)的朋友應(yīng)該都知道，能承擔(dān)這個(gè)作用的角色就是open_id了，所以要實(shí)現(xiàn)登錄的話，其實(shí)就是需要獲取當(dāng)前用戶的open_id，官方文檔中是這么介紹的： 1.小程序調(diào)用wx.login() 獲取 臨時(shí)登錄憑證code ，并回傳到開發(fā)者服務(wù)器。
App({
onLaunch: function () {
// 授權(quán)判斷
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會(huì)彈框
console.log('已經(jīng)授權(quán)')
} else {
// 未授權(quán)，跳轉(zhuǎn)到授權(quán)頁(yè)面，必須要用reLauch進(jìn)行跳轉(zhuǎn)
wx.reLaunch({
url: '/pages/auth/index',
})
console.log('需要授權(quán)')
}
}
})
},
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
if (res.code) {
api.post('/user/mplogin', { 'code': res.code }).then(res => {
wx.setStorageSync('access_token', res.access_token)
}).catch(error=>{
console.log(error)
})
} else {
console.log('登錄失敗！' + res.errMsg)
}
}
})
這里需要多提的一點(diǎn)是關(guān)于會(huì)話維持的方案，就是如何讓服務(wù)器端知道訪問(wèn)接口的是誰(shuí)。筆者提供兩個(gè)辦法：
筆者選擇的是第二種，通過(guò)后端的登錄接口返回token，然后將token存入Storage，然后在發(fā)起請(qǐng)求的時(shí)候?qū)oken封裝到http請(qǐng)求體中。 兩種方案都可行，讀者們可根據(jù)自己情況自行實(shí)現(xiàn)。 由于wx.request()方法發(fā)起請(qǐng)求比較麻煩，還需要處理會(huì)話邏輯，所以建議讀者們還是進(jìn)行一次封裝，下邊貼上筆者的代碼： 在utils文件夾中創(chuàng)建request.js文件
const domain = "https://cdx.tyhub.com"
function GET(url, params) {
return request('GET', url, params)
}
function POST(url, params) {
return request('POST', url, params)
}
function request(method, url, params) {
return new Promise((resolve, reject) => {
wx.request({
url: domain + url,
data: params,
method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'bearer' + ' ' + wx.getStorageSync('access_token'),
},
success(res) {
if (res.data.code === 100) {
let resData = res.data.data
if (!resData) {
resData = ''
}
resolve(resData)
} else {
let err = {
code: res.data.code,
msg: res.data.msg
}
reject(err)
}
}
})
})
}
module.exports = {
get: GET,
post: POST
}
使用
const api = require('../../utils/request')
...
api.post('/user/mplogin', { 'code': res.code }).then(res => {
wx.setStorageSync('access_token', res.access_token)
}).catch(error=>{
console.log(error)
})
至此，登錄邏輯便已完成，是不是覺(jué)得小程序開發(fā)也不過(guò)如此呢？由于篇幅有限，今天就分享到這啦，后續(xù)我將繼續(xù)和看官們一起探究以下小程序開發(fā)的話題
歡迎筆者持續(xù)關(guān)注，也歡迎筆者私信告知我其他疑問(wèn)，我盡量都一一分享，知無(wú)不言，言無(wú)不盡。 不是結(jié)束的結(jié)語(yǔ)
最后祝大家在事業(yè)和愛(ài)情的“戰(zhàn)場(chǎng)中都能脫穎而出，順利吃雞！ |
