第一次寫小程式，由於偏愛 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 授權，微博顯得更加開放，微信是不給開發許可權的，必須提供備案的域名。
說明：發微博的介面微博是沒有提供的，我借用了第三方分享到微博這個介面，看上去跟發微博沒啥區別，但內容中必須帶上一個安全域名，這個域名是在微博開放平臺設定的。