記一次基於mpvue的小順序開闢及上線實戰

2019年8月24日 134次阅读 来源: jrainlau

經由為期兩個晚上下班時候的勤奮，終究把我第一個小順序開闢完成並宣布上線了。全部歷程還算順遂，因為運用了mpvue計劃舉行開闢，故可以享用和vue一致的流通開闢體驗；背景體系運用了python3+flask框架舉行，運用起碼的代碼完成了小順序的背景邏輯。除了開闢以外，還實實在在地體驗了一把微信小順序的開闢流程，包含開闢者東西的運用、體驗版的宣布、上線的要求等等。這些開闢體驗都異常值得被記錄下來，因而便一氣呵成，寫下這篇文章。

一、需求&功用

因為公司里有相當多的同事都住在同一個小區，所以上下班的時刻常常會在公司群里組織拼車。然則因為完全依靠聊天記錄，且上下班拼車的同事也許多，依靠群聊很輕易把音訊刷走，而且輕易形成信息紊亂。既然如此，那末完全可以開闢一個小東西把這些問題解決。

提議拼車的人把動身地點、目標地點、打車信息以卡片的情勢分享出來，介入拼車的人點擊卡片就可以挑選列入拼車，而且能看到同車拼友是誰，拼單的信息等等內容。

交互流程以下：

《記一次基於mpvue的小順序開闢及上線實戰》

可以看到，邏輯是異常簡樸的，我們只須要保證天生拼單、分享拼單、進入拼單和退出拼單這四個功用就好。

需乞降功用已肯定好，起首依據小順序官網的引見，註冊好小順序並拿到appId，接下來可以最先舉行背景邏輯的開闢。

二、背景邏輯開闢

因為時候急急，功用又簡樸，所以並沒有斟酌任何高併發等龐雜場景，僅僅斟酌功用的完成。從需求的邏輯可以曉得，實在背景只須要保護兩個列表，離別存儲當前一切拼車單以及當前一切介入了拼車的用戶即可，其數據結構以下：

  • 當前一切拼單列表billsList

    《記一次基於mpvue的小順序開闢及上線實戰》

  • 當前一切介入了拼車的用戶列表inBillUsers

    《記一次基於mpvue的小順序開闢及上線實戰》

當用戶肯定並分享了一個拼單今後，會直接新建一個拼單，同時把該用戶增加到當前一切介入了拼車的用戶列表列表內里，而且增加到該拼單的成員列表當中：

《記一次基於mpvue的小順序開闢及上線實戰》

只需保護好這兩個列表，接下來就是詳細的營業邏輯了。

為了疾速開闢，這裏我運用了python3+flask框架的計劃。不懂python的讀者看到這裏也不必慌張，代碼異常簡樸且直白，看看也不妨。

起首新建一個BillController類：

class BillController:
    billsList = []
    inBillUsers = []

接下來會在這個類的內部增加建立拼單、獵取拼單、介入拼單、退出拼單、推斷用戶是不是在某一拼單中、圖片上傳的功用。

1、獵取拼單getBill()

該要領吸收客戶端傳來的拼單ID，然後拿這個ID去檢索是不是存在對應的拼單。若存在則返回對應的拼單，不然報錯給客戶端。

    def getBill(self, ctx):
        ctxBody = ctx.form
        billId = ctxBody['billId']
        try: 
            return response([item for item in self.billsList if item['billId'] == billId][0])
        except IndexError:
            return response({
                'errMsg': '拼單不存在！',
                'billsList': self.billsList,
            }, 1)

2、建立拼單createBill()

該要領會吸收來自客戶端的用戶信息和拼單信息，離別增加到billsList和inBillUsers當中。

    def createBill(self, ctx):
        ctxBody = ctx.form
        user = {
            'userId': ctxBody['userId'],
            'billId': ctxBody['billId'],
            'name': ctxBody['name'],
            'avatar': ctxBody['avatar']
        }
        bill = {
            'billId': ctxBody['billId'],
            'from': ctxBody['from'],
            'to': ctxBody['to'],
            'time': ctxBody['time'],
            'members': [user]
        }

        if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:
            return response({
                'errMsg': '用戶已在拼單中！'
            }, 1)

        self.billsList.append(bill)
        self.inBillUsers.append(user)
        return response({
            'billsList': self.billsList,
            'inBillUsers': self.inBillUsers
        })

建立完成后，會返回當前的billsList和inBillUsers到客戶端。

3、介入拼單joinBill()

吸收客戶端傳來的用戶信息和拼單ID，把用戶增加到拼單和inBillUsers列表中。

    def joinBill(self, ctx):
        ctxBody = ctx.form
        billId = ctxBody['billId']
        user = {
            'userId': ctxBody['userId'],
            'name': ctxBody['name'],
            'avatar': ctxBody['avatar'],
            'billId': ctxBody['billId']
        }
        if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:
            return response({
                'errMsg': '用戶已在拼單中！'
            }, 1)
        theBill = [item for item in self.billsList if item['billId'] == billId]
        if not theBill:
            return response({
                'errMsg': '拼單不存在'
            }, 1)
        theBill[0]['members'].append(user)
        self.inBillUsers.append(user)
        return response({
            'billsList': self.billsList,
            'inBillUsers': self.inBillUsers
        })

4、退出拼單leaveBill()

吸收客戶端傳來的用戶ID和拼單ID，然後刪撤除兩個列表內里的該用戶。

這個函數另有一個功用，假如推斷到這個拼單ID所對應的拼單成員為空，會以為該拼單已取消，會直接刪撤除這個拼單以及所對應的車輛信息圖片。

    def leaveBill(self, ctx):
        ctxBody = ctx.form
        billId = ctxBody['billId']
        userId = ctxBody['userId']
        indexOfUser = [i for i, member in enumerate(self.inBillUsers) if member['userId'] == userId][0]
        indexOfTheBill = [i for i, bill in enumerate(self.billsList) if bill['billId'] == billId][0]
        indexOfUserInBill = [i for i, member in enumerate(self.billsList[indexOfTheBill]['members']) if member['userId'] == userId][0]
        # 刪除拼單內里的該用戶
        self.billsList[indexOfTheBill]['members'].pop(indexOfUserInBill)
        # 刪除用戶列表內里的該用戶
        self.inBillUsers.pop(indexOfUser)
        # 假如拼單內里用戶為空，則直接刪除這筆拼單
        if len(self.billsList[indexOfTheBill]['members']) == 0:
            imgPath = './imgs/' + self.billsList[indexOfTheBill]['img'].split('/getImg')[1]
            if os.path.exists(imgPath):
                os.remove(imgPath)
            self.billsList.pop(indexOfTheBill)
        return response({
            'billsList': self.billsList,
            'inBillUsers': self.inBillUsers
        })

5、推斷用戶是不是在某一拼單中inBill()

吸收客戶端傳來的用戶ID，接下來會依據這個用戶ID去inBillUsers內里去檢索該用戶所對應的拼單，假如能檢索到，會返回其地點的拼單。

    def inBill(self, ctx):
        ctxBody = ctx.form
        userId = ctxBody['userId']
        if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:
            return response({
                'inBill': [item for item in self.inBillUsers if ctxBody['userId'] == item['userId']][0],
                'billsList': self.billsList,
                'inBillUsers': self.inBillUsers
            })
        return response({
            'inBill': False,
            'billsList': self.billsList,
            'inBillUsers': self.inBillUsers
        })

6、圖片上傳uploadImg()

吸收客戶端傳來的拼單ID和圖片資本，先存儲圖片，然後把該圖片的途徑寫入對應拼單ID的拼單當中。

    def uploadImg(self, ctx):
        billId = ctx.form['billId']
        file = ctx.files['file']
        filename = file.filename
        file.save(os.path.join('./imgs', filename))
        # 把圖片信息掛載到對應的拼單
        indexOfTheBill = [i for i, bill in enumerate(self.billsList) if bill['billId'] == billId][0]
        self.billsList[indexOfTheBill]['img'] = url_for('getImg', filename=filename)
        return response({
            'billsList': self.billsList
        })

完成了營業邏輯的功用，接下來就是把它們分發給差別的路由了：

@app.route('/create', methods = ['POST'])
def create():
    return controller.createBill(request)

@app.route('/join', methods = ['POST'])
def join():
    return controller.joinBill(request)

@app.route('/leave', methods = ['POST'])
def leave():
    return controller.leaveBill(request)

@app.route('/getBill', methods = ['POST'])
def getBill():
    return controller.getBill(request)

@app.route('/inBill', methods = ['POST'])
def inBill():
    return controller.inBill(request)

@app.route('/uploadImg', methods = ['POST'])
def uploadImg():
    return controller.uploadImg(request)

@app.route('/getImg/<filename>')
def getImg(filename):
  return send_from_directory('./imgs', filename)

完全的代碼可以直接到堆棧檢察，這裏僅展現癥結的內容。

三、前端營業開闢

前端藉助vue-cli直接運用了mpvue的mpvue-quickstart來初始化項目，詳細歷程不再細述，直接進入營業開闢部份。

起首，微信小順序的API都是callback作風，為了運用方便，我把用到的小順序API都包裝成了Promise，一致放在src/utils/wx.js內部，相似下面如許：

export const request = obj => new Promise((resolve, reject) => {
  wx.request({
    url: obj.url,
    data: obj.data,
    header: { 'content-type': 'application/x-www-form-urlencoded', ...obj.header },
    method: obj.method,
    success (res) {
      resolve(res.data.data)
    },
    fail (e) {
      console.log(e)
      reject(e)
    }
  })
})

1、註冊全局Store

因為開闢習氣，我喜好把一切接口要求都放在store內里的actions當中，所以這個小順序也是須要用到Vuex。但因為小順序每個Page都是一個新的Vue實例，所以依據Vue的體式格局，用全局Vue.use(Vuex)是不會把$store註冊到實例當中的，這一步要手動來。

在src/目次下新建一個store.js文件，然後在內里舉行運用註冊：

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

export default new Vuex.Store({})

接下來在src/main.js當中，手動在Vue的原型里註冊一個$store：

import Vue from 'vue'
import App from './App'
import Store from './store'

Vue.prototype.$store = Store

如許，今後在任何的Page里都可以經由過程this.$store來操縱這個全局Store了。

2、構建好要求的API接口

和背景體系的邏輯對應，前端也要組織好各個要求的API接口，如許的做法可以防止把API邏輯疏散到頁面四周，具有清楚、易保護的上風。

    /**
     * @param  {} {commit}
     * 獵取用戶公然信息
     */
    async getUserInfo ({ commit }) {
      const { userInfo } = await getUserInfo({
        withCredenitals: false
      })
      userInfo.avatar = userInfo.avatarUrl
      userInfo.name = userInfo.nickName
      userInfo.userId = encodeURIComponent(userInfo.nickName + userInfo.city + userInfo.gender + userInfo.country)
      commit('GET_USER_INFO', userInfo)
      return userInfo
    },
    /**
     * @param  {} {commit}
     * @param  { String } userId 用戶ID
     * 搜檢用戶是不是已存在於某一拼單中
     */
    async checkInBill ({ commit }, userId) {
      const res = await request({
        method: 'post',
        url: `${apiDomain}/inBill`,
        data: {
          userId
        }
      })
      return res
    },
    /**
     * @param  {} {commit}
     * @param  { String } userId 用戶ID
     * @param  { String } name   用戶昵稱
     * @param  { String } avatar 用戶頭像
     * @param  { String } time   動身時候
     * @param  { String } from   動身地點
     * @param  { String } to     目標地點
     * @param  { String } billId 拼單ID
     * 建立拼單
     */
    async createBill ({ commit }, { userId, name, avatar, time, from, to, billId }) {
      const res = await request({
        method: 'post',
        url: `${apiDomain}/create`,
        data: {
          userId,
          name,
          avatar,
          time,
          from,
          to,
          billId
        }
      })
      commit('GET_BILL_INFO', res)
      return res
    },
    /**
     * @param  {} {commit}
     * @param  { String } billId 拼單ID
     * 獵取拼單信息
     */
    async getBillInfo ({ commit }, billId) {
      const res = await request({
        method: 'post',
        url: `${apiDomain}/getBill`,
        data: {
          billId
        }
      })
      return res
    },
    /**
     * @param  {} {commit}
     * @param  { String } userId 用戶ID
     * @param  { String } name   用戶昵稱
     * @param  { String } avatar 用戶頭像
     * @param  { String } billId 拼單ID
     * 列入拼單
     */
    async joinBill ({ commit }, { userId, name, avatar, billId }) {
      const res = await request({
        method: 'post',
        url: `${apiDomain}/join`,
        data: {
          userId,
          name,
          avatar,
          billId
        }
      })
      return res
    },
    /**
     * @param  {} {commit}
     * @param  { String } userId 用戶ID
     * @param  { String } billId 拼單ID
     * 退出拼單
     */
    async leaveBill ({ commit }, { userId, billId }) {
      const res = await request({
        method: 'post',
        url: `${apiDomain}/leave`,
        data: {
          userId,
          billId
        }
      })
      return res
    },
    /**
     * @param  {} {commit}
     * @param  { String } filePath 圖片途徑
     * @param  { String } billId   拼單ID
     * 列入拼單
     */
    async uploadImg ({ commit }, { filePath, billId }) {
      const res = await uploadFile({
        url: `${apiDomain}/uploadImg`,
        header: {
          'content-type': 'multipart/form-data'
        },
        filePath,
        name: 'file',
        formData: {
          'billId': billId
        }
      })
      return res
    }

3、填寫拼單並完成分享功用完成

新建一個src/pages/index目次，作為小順序的首頁。

該首頁的營業邏輯以下：

  1. 進入首頁的時刻先獵取用戶信息，獲得userId
  2. 然後用userId去要求推斷是不是已處於拼單
  3. 如果，則跳轉到對應拼單Id的詳情頁
  4. 若否，才許可新建拼單

在onShow的生命周期鈎子中完成上述邏輯：

  async onShow () {
    this.userInfo = await this.$store.dispatch('getUserInfo')
    const inBill = await this.$store.dispatch('checkInBill', this.userInfo.userId)

    if (inBill.inBill) {
      wx.redirectTo(`../join/main?billId=${inBill.inBill.billId}&fromIndex=true`)
    }
  },

當用戶填寫完拼單后，會點擊一個帶有open-type="share"屬性的button，然後會觸發onShareAppMessage生命周期鈎子的邏輯把拼單構形成卡片分享出去。當分享勝利後會跳轉到對應拼單ID的列入拼單頁。

  onShareAppMessage (result) {
    let title = '一同拼車'
    let path = '/pages/index'
    if (result.from === 'button') {
      this.billId = 'billId-' + new Date().getTime()
      title = '我提議了一個拼車'
      path = `pages/join/main?billId=${this.billId}`
    }
    return {
      title,
      path,
      success: async (res) => {
        await this.$store.dispatch('createBill', { ...this.userInfo, ...this.billInfo })

        // 上傳圖片
        await this.$store.dispatch('uploadImg', {
          filePath: this.imgSrc,
          billId: this.billId
        })
        
        // 分享勝利后，會帶着billId跳轉到列入拼單頁
        wx.redirectTo(`../join/main?billId=${this.billId}`)
      },
      fail (e) {
        console.log(e)
      }
    }
  },

4、介入拼單&退出拼單功用完成

新建一個src/pages/join目次，作為小順序的“列入拼單頁”。

該頁面的運轉邏輯以下：

  1. 起首會獵取從url內裡帶來的billId
  2. 其次會要求一次userInfo，獵取userId
  3. 然後拿這個userId去搜檢該用戶是不是已處於拼單
  4. 假如已處於拼單，那末就會獵取一個新的billId替代從url獵取的
  5. 拿當前的billId去查詢對應的拼單信息
  6. 假如billId都無效，則redirect到首頁

因為要獵取url照顧的內容，親測onShow()是不可的，只能在onLoad()內里獵取：

  async onLoad (options) {
    // 1. 起首會獵取從url內裡帶來的billId
    this.billId = options.billId
    // 2. 其次會要求一次userInfo，獵取userId
    this.userInfo = await this.$store.dispatch('getUserInfo')
    // 3. 然後拿這個userId去搜檢該用戶是不是已處於拼單
    const inBill = await this.$store.dispatch('checkInBill', this.userInfo.userId)
    // 4. 假如已處於拼單，那末就會有一個billId
    if (inBill.inBill) {
      this.billId = inBill.inBill.billId
    }
    // 5. 假如沒有處於拼單，那末將要求當前billId的拼單
    // 6. 假如billId都無效，則redirect到首頁，不然搜檢當前用戶是不是處於該拼單當中
    await this.getBillInfo()
  }

另外，當用戶點擊“介入拼車”后，須要從新要求拼單信息，以革新視圖拼車職員列表；當用戶點擊“退出拼車”后，要重定向到首頁。

經由上面幾個步驟，客戶端的邏輯已完成，可以舉行預宣布了。

四、預宣布&要求上線

假如要宣布預宣布版本，須要運轉npm run build敕令，打包出一個臨盆版本的包，然後經由過程小順序開闢者東西的上傳按鈕上傳代碼，並填寫測試版本號：

《記一次基於mpvue的小順序開闢及上線實戰》

接下來可以在小順序治理背景→開闢治理→開闢版本當中看到體驗版小順序的信息，然後挑選宣布體驗版即可：

《記一次基於mpvue的小順序開闢及上線實戰》

當肯定預宣布測試無誤今後，就可以夠點擊“提交考核”，正式把小順序提交給微信團隊舉行考核。考核的時候異常快，在3小時內基礎都可以有回復。

值得注意的是，小順序一切要求的API，都必須經由域名備案和運用https證書，同時要在設置→開闢設置→服務器域名內里把API增加到白名單才可以一般運用。

五、跋文

這個小順序如今已宣布上線了，算是完全體驗了一把小順序的開闢興趣。小順序獲得了微信團隊的大力支持，今後的生態只會愈來愈繁華。當初小順序上線的時刻我也對它有一些抵牾，但厥後想了想，這隻不過是前端工程師所需面臨的又一個“端“罷了，沒有必要為它戴上有色眼鏡，多控制一些老是好的。

“一同打車吧”微信小順序依然是一個玩具般的存在，僅供本身進修和探究，固然也迎接列位讀者可以孝敬代碼，介入開闢~

    原文作者：jrainlau
    原文地址: https://segmentfault.com/a/1190000014506757
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞