第一次寫(xiě)小程序，由于偏愛(ài) Vue，所以選則了 mpvue 這個(gè)框架。那就寫(xiě)個(gè)青銅版微博來(lái)練練手吧。

效果截圖：

圖1：微博首頁(yè)

圖2：發(fā)微博

圖3：我的

技術(shù)要點(diǎn)

1、小程序框架：mpvue

2、http 請(qǐng)求庫(kù)：fly.js

3、狀態(tài)管理：vuex

4、數(shù)據(jù)來(lái)源：微博開(kāi)放平臺(tái) api

實(shí)現(xiàn)的功能：

1、微博列表

2、發(fā)微博

3、個(gè)人信息

4、我的粉絲

5、我關(guān)注的人

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

7、查看我的微博（由于api限制，只能查看自己的）

8、分享到微信聊天

項(xiàng)目結(jié)構(gòu)

api -----------------------   所有的api劃分模塊
     |-- user.js   // 用戶(hù)相關(guān)的 api

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

 components --------------------   最小單位的基礎(chǔ)組件 
     |-- Btn.vue  // button 組件
     |-- Input.vue // input 組件
views --------------------   業(yè)務(wù)組件 
    |-- PostCell.vue  //  信息流單條微博組件
    |-- UserCell.vue // 單個(gè)用戶(hù)信息組件   pages ----------------------   所有的頁(yè)面
     |-- timeline -------------   時(shí)間線(xiàn)頁(yè)面（一個(gè)頁(yè)面一個(gè)文件夾）
            |-- index.vue //  頁(yè)面組件
            |-- main.js  // 頁(yè)面的入口文件
            |-- main.json // 頁(yè)面配置文件

    store ---------------------   狀態(tài)管理
      | -- module -- 模塊
      |       |- user.js // 用戶(hù)模塊
      |       |- post.js // 微博模塊 
      | -- getters.js // 全局getters
      | -- actions.js  // 全局 actions     
      | -- mutations.js  // 全局 mutations
      | -- state.js  // 全局 state
      | -- mutation-types.js  // 所有的 mutation types
      | -- index.js  //  整合成一個(gè) store，導(dǎo)出

    utils ---------------------   存放所有的工具函數(shù)    
      |-- index.js    // 工具函數(shù)

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

   app.json --------------------   整個(gè)小程序的全局配置
   App.vue  --------------------   給全局入口一個(gè)掛載點(diǎn)
   main.js  --------------------   全局入口文件
   復(fù)制代碼

vuex 在 mpvue 中的使用

跟 Vue 項(xiàng)目中使用只有一個(gè)區(qū)別

vue ：

new Vue({
    el: '#app',
    store,
    ....
})復(fù)制代碼

mpvue：

Vue.prototype.$store = store 掛在到全局

一般來(lái)說(shuō)，實(shí)在找不到合適的模塊，就先公共的里面，以后想整合到模塊中也很簡(jiǎn)單，盡量還是用模塊區(qū)分。

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

<template>  
    <div class="container">    
        我是一個(gè) .vue 組件  
    </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {  
    data () {    
        return {}  
    },  
    computed: {   
         ...mapGetters({      
            userInfo: 'userInfo'   
         }),    
         ...mapState({
            someState: 'someState'
         })  
    },
  components: {  },
  onShow () {
    // 小程序的鉤子函數(shù)
  },
  methods: {
    ...mapMutations({
        someMutation: 'someMutation'
    }),
    ...mapActions({
       someAction: 'someAction'
    })  
  }
}
</script>
<style lang="scss" scoped>
</style>
復(fù)制代碼

在 mpvue 中使用小程序的生命周期鉤子函數(shù)

// vue 的鉤子函數(shù)
created () {

},
// 小程序的生命周期函數(shù)
onShow() {
}
。。。復(fù)制代碼

看到這里你會(huì)發(fā)現(xiàn)，跟寫(xiě) vue 項(xiàng)目沒(méi)啥太大的區(qū)別。完全是 vue 的寫(xiě)法，只需要去關(guān)注小程序提供哪些能力即可。

微博數(shù)據(jù)

通過(guò)微博開(kāi)放平臺(tái) api，通過(guò) oauth 2.0 授權(quán)操作，拿到自己的 access_token。微博提供了以下開(kāi)放接口，但是對(duì)于單個(gè)用戶(hù)來(lái)說(shuō)，微博每天限制 150 次請(qǐng)求，開(kāi)發(fā)的時(shí)候省著點(diǎn)用吧。

相比于微信 oauth 授權(quán)，微博顯得更加開(kāi)放，微信是不給開(kāi)發(fā)權(quán)限的，必須提供備案的域名。

說(shuō)明 ：發(fā)微博的接口微博是沒(méi)有提供的，我借用了第三方分享到微博這個(gè)接口，看上去跟發(fā)微博沒(méi)啥區(qū)別，但內(nèi)容中必須帶上一個(gè)安全域名，這個(gè)域名是在微博開(kāi)放平臺(tái)設(shè)置的