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