記一次基於 mpvue 的小程序開發及上線實戰

小程序名稱：一塊兒打車吧

項目地址：

• 客戶端：https://github.com/jrainlau/taxi-together-client

• 服務端：https://github.com/jrainlau/taxi-together-server

小程序二維碼：

 

通過爲期兩個晚上下班時間的努力，終於把我第一個小程序開發完成併發布上線了。整個過程還算順利，因爲使用了 mpvue方案進行開發，故能夠享受和 vue一致的流暢開發體驗；後臺系統使用了 python3+ flask框架進行，使用最少的代碼完成了小程序的後臺邏輯。

除了開發以外，還實實在在地體驗了一把微信小程序的開發流程，包括開發者工具的使用、體驗版的發佈、上線的申請等等。這些開發體驗都很是值得被記錄下來，因而便趁熱打鐵，寫下這篇文章。

1、需求&功能

因爲公司裏有至關多的同事都住在同一個小區，因此上下班的時候常常會在公司羣裏組織拼車。可是因爲徹底依賴聊天記錄，且上下班拼車的同事也不少，依賴羣聊很容易把消息刷走，並且容易形成信息錯亂。既然如此，那麼徹底能夠開發一個小工具把這些問題解決。

發起拼車的人把出發地點、目的地點、打車信息以卡片的形式分享出來，參與拼車的人點擊卡片就能選擇參加拼車，而且能看到同車拼友是誰，拼單的信息等等內容。

交互流程以下：

能夠看到，邏輯是很是簡單的，咱們只須要保證生成拼單、分享拼單、進入拼單和退出拼單這四個功能就好。

需求和功能已經肯定好，首先按照小程序官網的介紹，註冊好小程序並拿到 appId，接下來能夠開始進行後臺邏輯的開發。

2、後臺邏輯開發

因爲時間倉促，功能又簡單，因此並無考慮任何高併發等複雜場景，僅僅考慮功能的實現。從需求的邏輯能夠知道，其實後臺只須要維護兩個列表，分別存儲當前全部拼車單以及當前全部參與了拼車的用戶便可，其數據結構以下：

當前全部拼單列表 billsList

當前全部參與了拼車的用戶列表 inBillUsers

當用戶肯定並分享了一個拼單以後，會直接新建一個拼單，同時把該用戶添加到當前全部參與了拼車的用戶列表列表裏面，而且添加到該拼單的成員列表當中：

只要維護好這兩個列表，接下來就是具體的業務邏輯了。

爲了快速開發，這裏我使用了 python3+ flask框架的方案。不懂 python的讀者看到這裏也不用緊張，代碼很是簡單且直白，看看也無妨。

首先新建一個 BillController類：

1. class BillController:

2.    billsList = []

3.    inBillUsers = []

接下來會在這個類的內部添加建立拼單、獲取拼單、參與拼單、退出拼單、判斷用戶是否在某一拼單中、圖片上傳的功能。

一、獲取拼單 getBill()

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

1.    def getBill(self, ctx):

2.        ctxBody = ctx.form

3.        billId = ctxBody['billId']

4.        try:

5.            return response([item for item in self.billsList if item['billId'] == billId][0])

6.        except IndexError:

7.            return response({

8.                'errMsg': '拼單不存在！',

9.                'billsList': self.billsList,

10.            }, 1)

二、建立拼單 createBill()

該方法會接收來自客戶端的用戶信息和拼單信息，分別添加到 billsList和 inBillUsers當中。

1.    def createBill(self, ctx):

2.        ctxBody = ctx.form

3.        user = {

4.            'userId': ctxBody['userId'],

5.            'billId': ctxBody['billId'],

6.            'name': ctxBody['name'],

7.            'avatar': ctxBody['avatar']

8.        }

9.        bill = {

10.            'billId': ctxBody['billId'],

11.            'from': ctxBody['from'],

12.            'to': ctxBody['to'],

13.            'time': ctxBody['time'],

14.            'members': [user]

15.        }

16.  

17.        if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:

18.            return response({

19.                'errMsg': '用戶已經在拼單中！'

20.            }, 1)

21.  

22.        self.billsList.append(bill)

23.        self.inBillUsers.append(user)

24.        return response({

25.            'billsList': self.billsList,

26.            'inBillUsers': self.inBillUsers

27.        })

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

三、參與拼單 joinBill()

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

1.    def joinBill(self, ctx):

2.        ctxBody = ctx.form

3.        billId = ctxBody['billId']

4.        user = {

5.            'userId': ctxBody['userId'],

6.            'name': ctxBody['name'],

7.            'avatar': ctxBody['avatar'],

8.            'billId': ctxBody['billId']

9.        }

10.        if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:

11.            return response({

12.                'errMsg': '用戶已經在拼單中！'

13.            }, 1)

14.        theBill = [item for item in self.billsList if item['billId'] == billId]

15.        if not theBill:

16.            return response({

17.                'errMsg': '拼單不存在'

18.            }, 1)

19.        theBill[0]['members'].append(user)

20.        self.inBillUsers.append(user)

21.        return response({

22.            'billsList': self.billsList,

23.            'inBillUsers': self.inBillUsers

24.        })

四、退出拼單 leaveBill()

接收客戶端傳來的用戶ID和拼單ID，而後刪除掉兩個列表裏面的該用戶。

這個函數還有一個功能，若是判斷到這個拼單ID所對應的拼單成員爲空，會認爲該拼單已經做廢，會直接刪除掉這個拼單以及所對應的車輛信息圖片。

1.    def leaveBill(self, ctx):

2.        ctxBody = ctx.form

3.        billId = ctxBody['billId']

4.        userId = ctxBody['userId']

5.        indexOfUser = [i for i, member in enumerate(self.inBillUsers) if member['userId'] == userId][0]

6.        indexOfTheBill = [i for i, bill in enumerate(self.billsList) if bill['billId'] == billId][0]

7.        indexOfUserInBill = [i for i, member in enumerate(self.billsList[indexOfTheBill]['members']) if member['userId'] == userId][0]

8.        # 刪除拼單裏面的該用戶

9.        self.billsList[indexOfTheBill]['members'].pop(indexOfUserInBill)

10.        # 刪除用戶列表裏面的該用戶

11.        self.inBillUsers.pop(indexOfUser)

12.        # 若是拼單裏面用戶爲空，則直接刪除這筆拼單

13.        if len(self.billsList[indexOfTheBill]['members']) == 0:

14.            imgPath = './imgs/' + self.billsList[indexOfTheBill]['img'].split('/getImg')[1]

15.            if os.path.exists(imgPath):

16.                os.remove(imgPath)

17.            self.billsList.pop(indexOfTheBill)

18.        return response({

19.            'billsList': self.billsList,

20.            'inBillUsers': self.inBillUsers

21.        })

五、判斷用戶是否在某一拼單中 inBill()

接收客戶端傳來的用戶ID，接下來會根據這個用戶ID去 inBillUsers裏面去檢索該用戶所對應的拼單，若是能檢索到，會返回其所在的拼單。

1.    def inBill(self, ctx):

2.        ctxBody = ctx.form

3.        userId = ctxBody['userId']

4.        if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:

5.            return response({

6.                'inBill': [item for item in self.inBillUsers if ctxBody['userId'] == item['userId']][0],

7.                'billsList': self.billsList,

8.                'inBillUsers': self.inBillUsers

9.            })

10.        return response({

11.            'inBill': False,

12.            'billsList': self.billsList,

13.            'inBillUsers': self.inBillUsers

14.        })

六、圖片上傳 uploadImg()

接收客戶端傳來的拼單ID和圖片資源，先存儲圖片，而後把該圖片的路徑寫入對應拼單ID的拼單當中。

1.    def uploadImg(self, ctx):

2.        billId = ctx.form['billId']

3.        file = ctx.files['file']

4.        filename = file.filename

5.        file.save(os.path.join('./imgs', filename))

6.        # 把圖片信息掛載到對應的拼單

7.        indexOfTheBill = [i for i, bill in enumerate(self.billsList) if bill['billId'] == billId][0]

8.        self.billsList[indexOfTheBill]['img'] = url_for('getImg', filename=filename)

9.        return response({

10.            'billsList': self.billsList

11.        })

完成了業務邏輯的功能，接下來就是把它們分發給不一樣的路由了：

1. @app.route('/create', methods = ['POST'])

2. def create():

3.    return controller.createBill(request)

4.  

5. @app.route('/join', methods = ['POST'])

6. def join():

7.    return controller.joinBill(request)

8.  

9. @app.route('/leave', methods = ['POST'])

10. def leave():

11.    return controller.leaveBill(request)

12.  

13. @app.route('/getBill', methods = ['POST'])

14. def getBill():

15.    return controller.getBill(request)

16.  

17. @app.route('/inBill', methods = ['POST'])

18. def inBill():

19.    return controller.inBill(request)

20.  

21. @app.route('/uploadImg', methods = ['POST'])

22. def uploadImg():

23.    return controller.uploadImg(request)

24.  

25. @app.route('/getImg/<filename>')

26. def getImg(filename):

27.  return send_from_directory('./imgs', filename)

完整的代碼能夠直接到倉庫查看，這裏僅展現關鍵的內容。

3、前端業務開發

前端藉助 vue-cli直接使用了mpvue的mpvue-quickstart來初始化項目，具體過程再也不細述，直接進入業務開發部分。

首先，微信小程序的API都是callback風格，爲了使用方便，我把用到的小程序API都包裝成了 Promise，統一放在 src/utils/wx.js內部，相似下面這樣：

1. export const request = obj => new Promise((resolve, reject) => {

2.  wx.request({

3.    url: obj.url,

4.    data: obj.data,

5.    header: { 'content-type': 'application/x-www-form-urlencoded', ...obj.header },

6.    method: obj.method,

7.    success (res) {

8.      resolve(res.data.data)

9.    },

10.    fail (e) {

11.      console.log(e)

12.      reject(e)

13.    }

14.  })

15. })

一、註冊全局Store

因爲開發習慣，我喜歡把全部接口請求都放在store裏面的 actions當中，因此這個小程序也是須要用到 Vuex。但因爲小程序每個Page都是一個新的Vue實例，因此按照Vue的方式，用全局 Vue.use(Vuex)是不會把 $store註冊到實例當中的，這一步要手動來。

在 src/目錄下新建一個 store.js文件，而後在裏面進行使用註冊：

1. import Vue from 'vue'

2. import Vuex from 'vuex'

3.  

4.  

5. Vue.use(Vuex)

6.  

7. export default new Vuex.Store({})

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

1. import Vue from 'vue'

2. import App from './App'

3. import Store from './store'

4.  

5. Vue.prototype.$store = Store

這樣，之後在任何的Page裏均可以經過 this.$store來操做這個全局Store了。

二、構建好請求的API接口

和後臺系統的邏輯對應，前端也要構造好各個請求的API接口，這樣的作法可以避免把API邏輯分散到頁面四處，具備清晰、易維護的優點。

1.    /**

2.     * @param  {} {commit}

3.     * 獲取用戶公開信息

4.     */

5.    async getUserInfo ({ commit }) {

6.      const { userInfo } = await getUserInfo({

7.        withCredenitals: false

8.      })

9.      userInfo.avatar = userInfo.avatarUrl

10.      userInfo.name = userInfo.nickName

11.      userInfo.userId = encodeURIComponent(userInfo.nickName + userInfo.city + userInfo.gender + userInfo.country)

12.      commit('GET_USER_INFO', userInfo)

13.      return userInfo

14.    },

15.    /**

16.     * @param  {} {commit}

17.     * @param  { String } userId 用戶ID

18.     * 檢查用戶是否已經存在於某一拼單中

19.     */

20.    async checkInBill ({ commit }, userId) {

21.      const res = await request({

22.        method: 'post',

23.        url: `${apiDomain}/inBill`,

24.        data: {

25.          userId

26.        }

27.      })

28.      return res

29.    },

30.    /**

31.     * @param  {} {commit}

32.     * @param  { String } userId 用戶ID

33.     * @param  { String } name   用戶暱稱

34.     * @param  { String } avatar 用戶頭像

35.     * @param  { String } time   出發時間

36.     * @param  { String } from   出發地點

37.     * @param  { String } to     目的地點

38.     * @param  { String } billId 拼單ID

39.     * 建立拼單

40.     */

41.    async createBill ({ commit }, { userId, name, avatar, time, from, to, billId }) {

42.      const res = await request({

43.        method: 'post',

44.        url: `${apiDomain}/create`,

45.        data: {

46.          userId,

47.          name,

48.          avatar,

49.          time,

50.          from,

51.          to,

52.          billId

53.        }

54.      })

55.      commit('GET_BILL_INFO', res)

56.      return res

57.    },

58.    /**

59.     * @param  {} {commit}

60.     * @param  { String } billId 拼單ID

61.     * 獲取拼單信息

62.     */

63.    async getBillInfo ({ commit }, billId) {

64.      const res = await request({

65.        method: 'post',

66.        url: `${apiDomain}/getBill`,

67.        data: {

68.          billId

69.        }

70.      })

71.      return res

72.    },

73.    /**

74.     * @param  {} {commit}

75.     * @param  { String } userId 用戶ID

76.     * @param  { String } name   用戶暱稱

77.     * @param  { String } avatar 用戶頭像

78.     * @param  { String } billId 拼單ID

79.     * 參加拼單

80.     */

81.    async joinBill ({ commit }, { userId, name, avatar, billId }) {

82.      const res = await request({

83.        method: 'post',

84.        url: `${apiDomain}/join`,

85.        data: {

86.          userId,

87.          name,

88.          avatar,

89.          billId

90.        }

91.      })

92.      return res

93.    },

94.    /**

95.     * @param  {} {commit}

96.     * @param  { String } userId 用戶ID

97.     * @param  { String } billId 拼單ID

98.     * 退出拼單

99.     */

100.    async leaveBill ({ commit }, { userId, billId }) {

101.      const res = await request({

102.        method: 'post',

103.        url: `${apiDomain}/leave`,

104.        data: {

105.          userId,

106.          billId

107.        }

108.      })

109.      return res

110.    },

111.    /**

112.     * @param  {} {commit}

113.     * @param  { String } filePath 圖片路徑

114.     * @param  { String } billId   拼單ID

115.     * 參加拼單

116.     */

117.    async uploadImg ({ commit }, { filePath, billId }) {

118.      const res = await uploadFile({

119.        url: `${apiDomain}/uploadImg`,

120.        header: {

121.          'content-type': 'multipart/form-data'

122.        },

123.        filePath,

124.        name: 'file',

125.        formData: {

126.          'billId': billId

127.        }

128.      })

129.      return res

130.    }

三、填寫拼單並實現分享功能實現

新建一個 src/pages/index目錄，做爲小程序的首頁。

該首頁的業務邏輯以下：

1. 進入首頁的時候先獲取用戶信息，獲得userId

2. 而後用userId去請求判斷是否已經處於拼單

3. 如果，則跳轉到對應拼單Id的詳情頁

4. 若否，才容許新建拼單

在 onShow的生命週期鉤子中實現上述邏輯：

1.  async onShow () {

2.    this.userInfo = await this.$store.dispatch('getUserInfo')

3.    const inBill = await this.$store.dispatch('checkInBill', this.userInfo.userId)

4.  

5.    if (inBill.inBill) {

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

7.    }

8.  },

當用戶填寫完拼單後，會點擊一個帶有 open-type="share"屬性的button，而後會觸發 onShareAppMessage生命週期鉤子的邏輯把拼單構形成卡片分享出去。當分享成功後會跳轉到對應拼單ID的參加拼單頁。

1.  onShareAppMessage (result) {

2.    let title = '一塊兒拼車'

3.    let path = '/pages/index'

4.    if (result.from === 'button') {

5.      this.billId = 'billId-' + new Date().getTime()

6.      title = '我發起了一個拼車'

7.      path = `pages/join/main?billId=${this.billId}`

8.    }

9.    return {

10.      title,

11.      path,

12.      success: async (res) => {

13.        await this.$store.dispatch('createBill', { ...this.userInfo, ...this.billInfo })

14.  

15.        // 上傳圖片

16.        await this.$store.dispatch('uploadImg', {

17.          filePath: this.imgSrc,

18.          billId: this.billId

19.        })

20.  

21.        // 分享成功後，會帶着billId跳轉到參加拼單頁

22.        wx.redirectTo(`../join/main?billId=${this.billId}`)

23.      },

24.      fail (e) {

25.        console.log(e)

26.      }

27.    }

28.  },

四、參與拼單&退出拼單功能實現

新建一個 src/pages/join目錄，做爲小程序的「參加拼單頁」。

該頁面的運行邏輯以下：

1. 首先會獲取從url裏面帶來的billId

2. 其次會請求一次userInfo，獲取userId

3. 而後拿這個userId去檢查該用戶是否已經處於拼單

4. 若是已經處於拼單，那麼就會獲取一個新的billId代替從url獲取的

5. 拿當前的billId去查詢對應的拼單信息

6. 若是billId都無效，則redirect到首頁

因爲要獲取url攜帶的內容，親測 onShow()是不行的，只能在 onLoad()裏面獲取：

1.  async onLoad (options) {

2.    // 1. 首先會獲取從url裏面帶來的billId

3.    this.billId = options.billId

4.    // 2. 其次會請求一次userInfo，獲取userId

5.    this.userInfo = await this.$store.dispatch('getUserInfo')

6.    // 3. 而後拿這個userId去檢查該用戶是否已經處於拼單

7.    const inBill = await this.$store.dispatch('checkInBill', this.userInfo.userId)

8.    // 4. 若是已經處於拼單，那麼就會有一個billId

9.    if (inBill.inBill) {

10.      this.billId = inBill.inBill.billId

11.    }

12.    // 5. 若是沒有處於拼單，那麼將請求當前billId的拼單

13.    // 6. 若是billId都無效，則redirect到首頁，不然檢查當前用戶是否處於該拼單當中

14.    await this.getBillInfo()

15.  }

此外，當用戶點擊「參與拼車」後，須要從新請求拼單信息，以刷新視圖拼車人員列表；當用戶點擊「退出拼車」後，要重定向到首頁。

通過上面幾個步驟，客戶端的邏輯已經完成，能夠進行預發佈了。

4、預發佈&申請上線

若是要發佈預發佈版本，須要運行 npm run build命令，打包出一個生產版本的包，而後經過小程序開發者工具的上傳按鈕上傳代碼，並填寫測試版本號：

接下來能夠在小程序管理後臺→開發管理→開發版本當中看到體驗版小程序的信息，而後選擇發佈體驗版便可：

當肯定預發佈測試無誤以後，就能夠點擊「提交審覈」，正式把小程序提交給微信團隊進行審覈。審覈的時間很是快，在3小時內基本都可以有答覆。

值得注意的是，小程序全部請求的API，都必須通過域名備案和使用https證書，同時要在設置→開發設置→服務器域名裏面把API添加到白名單才能夠正常使用。

5、後記

這個小程序如今已經發布上線了，算是完總體驗了一把小程序的開發樂趣。小程序獲得了微信團隊的大力支持，之後的生態只會愈來愈繁榮。當初小程序上線的時候我也對它有一些抵觸，但後來想了想，這只不過是前端工程師所需面對的又一個「端「而已，沒有必要爲它戴上有色眼鏡，多掌握一些老是好的。

「一塊兒打車吧」微信小程序依然是一個玩具般的存在，僅供本身學習和探索，固然也歡迎各位讀者可以貢獻代碼，參與開發~

---

SegmentFault Hackathon 2018 盛大開場，Let's hack ！

轉載自：https://mp.weixin.qq.com/s/67x-OfkFzLFjTu_qyHJwAA

閱讀原文