微信小程序隨着官方開放越多越多的接口,也是變的愈來愈火了,愈來愈多的企業已經開始佈局小程序生態。因此,對於咱們開發者來講,掌握小程序開發顯得分外重要。若是點亮了該技能,那麼離升職加薪贏取白富美的日子就又近了一步啦!linux
筆者算是一個野生的程序猿吧,沒有什麼大廠經驗,搞開發就是一個字,幹!從不來虛的。所以,隨性的性格造就了我全棧(一竅不通)的本事,作項目那就是一把抓,先後端全包,什麼先後端撕逼的問題通通沒有了,哈哈哈(想一想內心還有點小激動)。不過本文筆者只重點分享小程序開發相關的東西,想了解後端的話,能夠坐等我下一次的分享哈哈哈(可能會遙遙無期)。小程序
話很少說,進入正題。如今開始分享我是怎麼開發完一款小程序的。小程序的官方文檔其實寫的是很詳細很清晰的,相比微信公衆號的開發文檔來講真的是很是很是的良心,因此開發前瀏覽一遍開發文檔很是關鍵。下邊我羅列一下其餘準備工做。後端
工欲善其事,必先利其器,首選的就是把開發環境給弄好咯,我推薦以下:微信小程序
開發工具api
調試工具瀏覽器
固然開發工具什麼的只要本身習慣就好,個人推薦只是參考。筆者最後習慣是直接在官方的開發者工具上編輯加調試。服務器
這塊的內容官方文檔都有詳細的教程,我就很少補充啦。整體來講就是須要去申請一個開發者帳號,而後配置小程序的基本信息,比較值得重點說的就是小程序api的配置,官方要求必須是https。說到這裏,若是讀者你的api接口已經上了https能夠跳過了,若是不是,而後你也像筆者同樣是全棧開發,那麼筆者將告訴你如何快速讓接口踏上https的航班。微信
是的,沒錯, 就是它!Certbotcookie
在官網上選好http服務器和linux系統後,按照命令一個一個敲,就ok了,簡直不要太簡單。哈哈哈,至於想深刻了解這個東東的話,能夠去了解下Let's Encryptsession
總算能夠正式的開始擼功能了!由於考慮到如今程序猿找對象是真的太難了,因此筆者擼的小程序是一個脫單交友的小程序(單身汪的福音哦),小程序頁面也很少,核心就是讓用戶填寫我的信息而後展現出來。是的,就是這麼簡單!
小程序的受權登陸其實能夠看做是兩件事情,受權和登陸,這二者是能夠單獨分開處理的(我的觀點,容許反駁)。
對於受權,其實官方已經有講到,就是換成微信內的受權詢問,就是以下這個東西。
這個微信受權的詢問彈窗以前的版本中只要調用獲取用戶信息的api,是會自動彈出的,如今小程序作了調整須要自行經過按鈕觸發,因此這個很蛋疼。那麼須要怎麼去設計呢,這裏也有兩個方案,一個是作個單獨的頁面,另外一個方案是作彈窗。我的建議是選方案一,由於這樣能夠把受權邏輯從頁面邏輯裏獨立出來,方便全部頁面渲染前調用。具體coding以下:
在app.js中,判斷是否已經受權,若是未受權則跳轉到受權頁面
App({ onLaunch: function () { ... wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經受權,能夠直接調用 getUserInfo 獲取頭像暱稱,不會彈框 console.log('已經受權') } else { // 未受權,跳轉到受權頁面,必需要用reLauch進行跳轉 wx.reLaunch({ url: '/pages/auth/index', }) console.log('須要受權') } } }) },
在'pages/auth/index.wxml'頁面中,使用button作受權按鈕
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">微信帳號受權登陸</button>
'pages/auth/index.js'中定義綁定的回調方法,從新跳轉回上一頁
Page({ ... // 點擊受權後跳回首頁 bindGetUserInfo (e) { wx.reLaunch({ url: '../index/index' }) // 用戶已經贊成小程序使用獲取用戶信息功能,後續調用 wx.startRecord 接口不會彈窗詢問 } })
這樣,一個受權邏輯就完成了。
登陸的目錄實際上是和後端交互,須要在服務器端存儲當前用戶的標識,以便用戶下一次登陸時服務器知道是誰登陸了。作過微信公衆號開發的朋友應該都知道,能承擔這個做用的角色就是open_id
了,因此要實現登陸的話,其實就是須要獲取當前用戶的open_id,官方文檔中是這麼介紹的:
1.小程序調用wx.login() 獲取 臨時登陸憑證code ,並回傳到開發者服務器。
2.開發者服務器以code換取 用戶惟一標識openid 和 會話密鑰session_key。
以後開發者服務器能夠根據用戶標識來生成自定義登陸態,用於後續業務邏輯中先後端交互時識別用戶身份。
因此完成登陸的前提就是須要後端提供一個接口,我們把code傳給後端就好了,剩下的工做就是後端去完成啦。
App({ onLaunch: function () { // 受權判斷 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經受權,能夠直接調用 getUserInfo 獲取頭像暱稱,不會彈框 console.log('已經受權') } else { // 未受權,跳轉到受權頁面,必需要用reLauch進行跳轉 wx.reLaunch({ url: '/pages/auth/index', }) console.log('須要受權') } } }) }, // 登陸 wx.login({ success: res => { // 發送 res.code 到後臺換取 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) } } })
這裏須要多提的一點是關於會話維持的方案,就是如何讓服務器端知道訪問接口的是誰。筆者提供兩個辦法:
筆者選擇的是第二種,經過後端的登陸接口返回token,而後將token存入Storage,而後在發起請求的時候將token封裝到http請求體中。 兩種方案均可行,讀者們可根據本身狀況自行實現。 因爲wx.request()方法發起請求比較麻煩,還須要處理會話邏輯,因此建議讀者們仍是進行一次封裝,下邊貼上筆者的代碼:
在utils
文件夾中建立request.js
文件
const domain = "https://domain.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) })
至此,登陸邏輯便已完成,是否是以爲小程序開發也不過如此呢?因爲篇幅有限,今天就分享到這啦,後續我將繼續和看官們一塊兒探究如下小程序開發的話題
歡迎看官們持續關注,也歡迎看官們私信告知我其餘疑問,我儘可能都一一分享,知無不言,言無不盡。
打波小小的廣告,我的開發的找對象小程序「佛系處對象」已經順利上線,歡迎讀者看官們掃碼體驗,若是脫單了記得通知我喲!
最後祝你們在事業和愛情的「戰場」中都能脫穎而出,順利吃雞!