第一次寫(xiě)小程序,由于偏愛(ài) Vue,所以選則了 mpvue 這個(gè)框架。那就寫(xiě)個(gè)青銅版微博來(lái)練練手吧。
圖1:微博首頁(yè)
圖2:發(fā)微博
圖3:我的
1、小程序框架:mpvue
2、http 請(qǐng)求庫(kù):fly.js
3、狀態(tài)管理:vuex
4、數(shù)據(jù)來(lái)源:微博開(kāi)放平臺(tái) api
1、微博列表
2、發(fā)微博
3、個(gè)人信息
4、我的粉絲
5、我關(guān)注的人
6、我的收藏(收藏和取消收藏)
7、查看我的微博(由于api限制,只能查看自己的)
8、分享到微信聊天
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ù)制代碼
跟 Vue 項(xiàng)目中使用只有一個(gè)區(qū)別
vue :
new Vue({ el: '#app', store, .... })復(fù)制代碼
mpvue:
Vue.prototype.$store = store 掛在到全局
一般來(lái)說(shuō),實(shí)在找不到合適的模塊,就先公共的里面,以后想整合到模塊中也很簡(jiǎn)單,盡量還是用模塊區(qū)分。
<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ù)制代碼
// vue 的鉤子函數(shù) created () { }, // 小程序的生命周期函數(shù) onShow() { } 。。。復(fù)制代碼
看到這里你會(huì)發(fā)現(xiàn),跟寫(xiě) vue 項(xiàng)目沒(méi)啥太大的區(qū)別。完全是 vue 的寫(xiě)法,只需要去關(guān)注小程序提供哪些能力即可。
通過(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è)置的
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)