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

temool007發表於2019-03-03
Vue微信小程式

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

效果截圖：

圖1：微博首頁

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

圖2：發微博

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

圖3：我的

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


技術要點

1、小程式框架：mpvue

2、http 請求庫：fly.js

3、狀態管理：vuex

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

實現的功能：

1、微博列表

2、發微博

3、個人資訊

4、我的粉絲

5、我關注的人

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

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

8、分享到微信聊天

專案結構

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

    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 掛在到全域性

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

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

在 .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 次請求，開發的時候省著點用吧。

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

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

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


相關文章