用 mpvue 写个【微博-青铜版】微信小程序

栏目: IOS · Android · 发布时间: 5年前

内容简介:第一次写小程序,由于偏爱 Vue,所以选则了 mpvue 这个框架。那就写个青铜版微博来练练手吧。图1:微博首页

第一次写小程序,由于偏爱 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 授权,微博显得更加开放,微信是不给开发权限的,必须提供备案的域名。

说明 :发微博的接口微博是没有提供的,我借用了第三方分享到微博这个接口,看上去跟发微博没啥区别,但内容中必须带上一个安全域名,这个域名是在微博开放平台设置的。


以上所述就是小编给大家介绍的《用 mpvue 写个【微博-青铜版】微信小程序》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

缺失的终结

缺失的终结

【美】克尔•哈里斯 / 艾博 / 中国人民大学出版社 / 2017-6-15 / 39.00元

《缺失的终结》是一本反思互联网时代对普通人日常生活影响的书。作者认为,我们都曾渴望有一段远离现实生活烦扰的“瓦尔登湖”时光,悠闲地沉入自己的内心世界,从飞速变化的漩涡中暂时“缺失”。然而,互联网生活让我们每时每刻被互联网化,手环监测着我们的心跳和睡眠,微信、脸书、推特让我们人在床上就与世界链接起来,跑步了吗?走路了吗?英语单词背了吗?早餐的卡路里是否超标?坐在办公室,无数亟待处理的信息狂风暴雨般地......一起来看看 《缺失的终结》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具