微信小程序開發之從「跳傘」到「吃雞」

寫在前邊

微信小程序隨着官方開放越多越多的接口,也是變的愈來愈火了,愈來愈多的企業已經開始佈局小程序生態。因此,對於咱們開發者來講,掌握小程序開發顯得分外重要。若是點亮了該技能,那麼離升職加薪贏取白富美的日子就又近了一步啦!linux

關於我

筆者算是一個野生的程序猿吧,沒有什麼大廠經驗,搞開發就是一個字,幹!從不來虛的。所以,隨性的性格造就了我全棧(一竅不通)的本事,作項目那就是一把抓,先後端全包,什麼先後端撕逼的問題通通沒有了,哈哈哈(想一想內心還有點小激動)。不過本文筆者只重點分享小程序開發相關的東西,想了解後端的話,能夠坐等我下一次的分享哈哈哈(可能會遙遙無期)。小程序

準備工做

話很少說,進入正題。如今開始分享我是怎麼開發完一款小程序的。小程序的官方文檔其實寫的是很詳細很清晰的,相比微信公衆號的開發文檔來講真的是很是很是的良心,因此開發前瀏覽一遍開發文檔很是關鍵。下邊我羅列一下其餘準備工做。後端

1. 開發工具

工欲善其事,必先利其器,首選的就是把開發環境給弄好咯,我推薦以下:微信小程序

開發工具api

  • 官方微信開發者工具
  • visio studio code

調試工具瀏覽器

  • 官方微信開發者工具

固然開發工具什麼的只要本身習慣就好,個人推薦只是參考。筆者最後習慣是直接在官方的開發者工具上編輯加調試。服務器

2. 小程序配置

這塊的內容官方文檔都有詳細的教程,我就很少補充啦。整體來講就是須要去申請一個開發者帳號,而後配置小程序的基本信息,比較值得重點說的就是小程序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)
        }
      }
    })

這裏須要多提的一點是關於會話維持的方案,就是如何讓服務器端知道訪問接口的是誰。筆者提供兩個辦法:

  1. 經過wx.request()在header中強行組裝cookie字符串,來實現傳統瀏覽器上用cookie維持會話的效果
  2. 使用access_token的方式,好比jwt

筆者選擇的是第二種,經過後端的登陸接口返回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)
 })

至此,登陸邏輯便已完成,是否是以爲小程序開發也不過如此呢?因爲篇幅有限,今天就分享到這啦,後續我將繼續和看官們一塊兒探究如下小程序開發的話題

  • 圖片上傳
  • 表單提交
  • 級聯選擇器的實現
  • 如何使用iconfont圖標
  • 微信支付
  • 模板消息
  • ....

歡迎看官們持續關注,也歡迎看官們私信告知我其餘疑問,我儘可能都一一分享,知無不言,言無不盡。

不是結束的結語

打波小小的廣告,我的開發的找對象小程序「佛系處對象」已經順利上線,歡迎讀者看官們掃碼體驗,若是脫單了記得通知我喲!

最後祝你們在事業和愛情的「戰場」中都能脫穎而出,順利吃雞!

相關文章
相關標籤/搜索