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

寫在前邊

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

關於我

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

準備工做

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

1. 開發工具

工欲善其事，必先利其器，首選的就是把開發環境給弄好咯，我推薦以下：

開發工具

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

調試工具

• 官方微信開發者工具

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

2. 小程序配置

這塊的內容官方文檔都有詳細的教程，我就很少補充啦。整體來講就是須要去申請一個開發者帳號，而後配置小程序的基本信息，比較值得重點說的就是小程序api的配置，官方要求必須是https。說到這裏，若是讀者你的api接口已經上了https能夠跳過了，若是不是，而後你也像筆者同樣是全棧開發，那麼筆者將告訴你如何快速讓接口踏上https的航班。

是的，沒錯， 就是它！Certbot

在官網上選好http服務器和linux系統後，按照命令一個一個敲，就ok了，簡直不要太簡單。哈哈哈，至於想深刻了解這個東東的話，能夠去了解下Let's Encrypt

開發

總算能夠正式的開始擼功能了！由於考慮到如今程序猿找對象是真的太難了，因此筆者擼的小程序是一個脫單交友的小程序（單身汪的福音哦），小程序頁面也很少，核心就是讓用戶填寫我的信息而後展現出來。是的，就是這麼簡單！

受權登陸

小程序的受權登陸其實能夠看做是兩件事情，受權和登陸，這二者是能夠單獨分開處理的（我的觀點，容許反駁）。

受權

對於受權，其實官方已經有講到，就是換成微信內的受權詢問，就是以下這個東西
。

這個微信受權的詢問彈窗以前的版本中只要調用獲取用戶信息的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圖標
• 微信支付
• 模板消息
• ....

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

不是結束的結語

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

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