用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分区模块| -user.js//user-related API配置| -一些基本配置-http . js//基本请求封装如get、Request post组件-基本组件的最小单位| | - Btn.vue //button组件| | - Input.vue //输入组件视图-/信息流单个微博组件| -usercell . vue//单个用户信息组件页面-所有页面|-时间轴页面(一个页面，一个页面-main . js//页面入口文件|-main . JSON//页面配置文件存储-状态管理|-模块-模块| | -用户导出utils-存储所有工具功能|-index.js//tool函数图像-所有图像资源(在applets -home.png应用程序中不支持。JSON-整个小程序应用程序的全局配置。给全球门户一个挂载点

vue:

Newvue ({el:' # app '，商店，})复制代码mpvue:

Vue.prototype.$store=存储挂起在全局

一般来说，如果真的找不到合适的模块，应该先用公共模块，以后集成到模块中也很简单。尽量用模块来区分。

vuex 在 mpvue 中的使用

template div class=' container '我是一个. vue组件/div/templatescript import { mapstate，mapgetters，mapvariants，mapActions }来自' vuex ' export default { data(){ return } }，computed: {.mapgetter({ userInfo : ' userInfo ' })，map state({ some state : ' some state ' })}，components : {}，onshow(){//applet的hook函数}，methods: {.map突变({ some突变： ' some突变' })，mapactions({ some action : ' some action ' })} }/Script style lang=' SCSS '作用域/styleCopy代码

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

//vue的hook函数created () {}和applet的生命周期函数onShow() {}。把代码复制到这里，你会发现它和写vue项目没有太大区别。完全是vue写的，只需要注意小程序提供了哪些功能。

在 mpvue 中使用小程序的生命周期钩子函数

通过微博开放平台api和oauth 2.0授权操作获得了自己的access_token。微博提供了以下开放界面，但是对于单个用户来说，微博每天限制150个请求，所以开发的时候还是省省吧。

相比微信oauth的授权，微博更开放。微信不给予开发许可，需要提供域名备案。

说明：不提供发微博到微博的界面。我从第三方借用了分享到微博的界面，看起来和发微博没什么区别，但是内容一定要带安全域名，这是在微博开放平台设置的。