用 mpvue 寫個【微博-青銅版】微信小程式

摘要： 第一次寫小程式，由於偏愛 Vue，所以選則了 mpvue 這個框架。那就寫個青銅版微博來練練手吧。 效果截圖： 圖1：微博首頁 圖2：發微博 圖3：我的 技術要點 1、小程式框架：mpvue 2、http 請求庫：fly.js...

第一次寫小程式，由於偏愛 Vue，所以選則了 mpvue 這個框架。那就寫個青銅版微博來練練手吧。

效果截圖：

圖1：微博首頁

圖2：發微博

圖3：我的

技術要點

1、小程式框架：mpvue

2、http 請求庫：fly.js

3、狀態管理：vuex

4、資料來源：微博開放平臺 api

實現的功能：

1、微博列表

2、發微博

3、個人資訊

4、我的粉絲

5、我關注的人

6、我的收藏（收藏和取消收藏）

7、檢視我的微博（由於api限制，只能檢視自己的）

8、分享到微信聊天

專案結構

api -----------------------所有的api劃分模組
|-- user.js// 使用者相關的 api

config ----------------------一些基本的配置
|-- const.js // 基本常量
|-- fly.js// fly 的配置
|-- http.js// 基本的請求封裝 比如 get，post 請求

 components --------------------最小單位的基礎元件 
|-- Btn.vue// button 元件
|-- Input.vue // input 元件
views --------------------業務元件 
|-- PostCell.vue//資訊流單條微博元件
|-- UserCell.vue // 單個使用者資訊元件pages ----------------------所有的頁面
|-- timeline -------------時間線頁面（一個頁面一個資料夾）
|-- index.vue //頁面元件
|-- main.js// 頁面的入口檔案
|-- main.json // 頁面配置檔案

store ---------------------狀態管理
| -- module -- 模組
||- user.js // 使用者模組
||- post.js // 微博模組 
| -- getters.js // 全域性getters
| -- actions.js// 全域性 actions
| -- mutations.js// 全域性 mutations
| -- state.js// 全域性 state
| -- mutation-types.js// 所有的 mutation types
| -- index.js//整合成一個 store，匯出

utils ---------------------存放所有的工具函式
|-- index.js// 工具函式

images ---------------------所有的圖片資源（小程式中不支援 svg）
|-- home.png

app.json --------------------整個小程式的全域性配置
App.vue--------------------給全域性入口一個掛載點
main.js--------------------全域性入口檔案
複製程式碼

vuex 在 mpvue 中的使用

跟 Vue 專案中使用只有一個區別

vue ：

new Vue({
el: '#app',
store,
....
})複製程式碼

mpvue：

Vue.prototype.$store = store 掛在到全域性

一般來說，實在找不到合適的模組，就先公共的裡面，以後想整合到模組中也很簡單，儘量還是用模組區分。

在 .vue 元件中使用 state, getter, mutation, action

<template>
<div class="container">
我是一個 .vue 元件
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapGetters({
userInfo: 'userInfo'
}),
...mapState({
someState: 'someState'
})
},
components: {},
onShow () {
// 小程式的鉤子函式
},
methods: {
...mapMutations({
someMutation: 'someMutation'
}),
...mapActions({
someAction: 'someAction'
})
}
}
</script>
<style lang="scss" scoped>
</style>
複製程式碼

在 mpvue 中使用小程式的生命週期鉤子函式

// vue 的鉤子函式
created () {

},
// 小程式的生命週期函式
onShow() {
}
。。。複製程式碼

看到這裡你會發現，跟寫 vue 專案沒啥太大的區別。完全是 vue 的寫法，只需要去關注小程式提供哪些能力即可。

微博資料

通過微博開放平臺 api，通過 oauth 2.0 授權操作，拿到自己的 access_token。微博提供了以下開放介面，但是對於單個使用者來說，微博每天限制 150 次請求，開發的時候省著點用吧。

相比於微信 oauth 授權，微博顯得更加開放，微信是不給開發許可權的，必須提供備案的域名。

說明 ：發微博的介面微博是沒有提供的，我借用了第三方分享到微博這個介面，看上去跟發微博沒啥區別，但內容中必須帶上一個安全域名，這個域名是在微博開放平臺設定的。