虎事小程序

发表于 更新于

童年中的趣事是最最珍贵的。小时候，我们因为幼小无知而闹出了许多笑话，打开记忆的匣门，童年趣事便接踵而来。

做梦找到厕所，醒来尿床了

小时候穿着裆裤时，跟着小女孩跳皮筋

撒尿和泥，还玩的不亦乐乎

纠结自己要上清华还是北大，长大后发现想多了

用笔在自己胳膊上画手表，还舍不得洗掉

用放大镜烤蚂蚁（小时候居然那么残忍……）

老爸骑 28 自行车带我上街，忘了我已经先坐在后座上，偏腿上车，我就飞了出去…

听着这么一段小故事，或许都发现了这些虎事很有趣。

功能展示

  1. 首页-视频播放 （同时只能播放一个视频特性）
  2. 点赞
  3. 分享
  4. 回复 （二级页面尚未完善）

知识总结

1. 首页-视频播放 （实现统一时刻只能播放一个视频）

解决思路：无非就是找一个标识，作为全局变量去记录上次播放的视频。也可以使用循环的方式去实现，不过循环的方式非常的不友好，随着分页数据的加载回导致程序越来越慢！

方案实时：我使用的是** vuex **,不过也可以采取 ** Storage ** 本地存储的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
handleVideoPlay() {
        if (!this.playFlag) {
          this.ajaxVideoClick()
        }
        this.playFlag = true;
        const videoCtx = wx.createVideoContext('video-'+this.video.id)
        videoCtx.play()
        //用store定义的变量去判断
        if(this.videoPlayId === -1){
          // 调用，修改 store中的 videoPlayId 值
          this[VideoPlayId](this.video.id)
          return false
        }
        const videoCtx1 = wx.createVideoContext('video-'+this.videoPlayId)
        videoCtx1.pause()
        this[VideoPlayId](this.video.id)
        // videoCtx.requestFullScreen()
      },
2. 分享功能

小程序如果想对外分享，必须在 page 里面定义 onShareAppMessage 函数，来配置页面分享转发相关的信息。

  • 只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮
  • 用户点击转发按钮的时候会调用
  • 此事件需要 return 一个 Object，用于自定义转发内容

一个页面可能会有多个分享，可以由插入的参数 options 来判断具体是由哪个位置进行分享，从而做不同的逻辑判断。

不过在 mpvue 中，需要把 onShareAppMessage 函数写在 export default { } 根节点中，与 methods 方法通级。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
onShareAppMessage(res) {
       return {
         title: '虎事小程序-' + this.video.auther,
         path: this.detaiUrl,
         imageUrl: this.video.img,
         success: function (shareTickets) {
           console.info(shareTickets + '成功');
           // 转发成功
         },
         fail: function (res) {
           console.log(res + '失败');
           // 转发失败
         },
         complete:function(res){
           // 不管成功失败都会执行
         }
       }
     }
3. 带参数跳转

在微信小程序中，跳转有普通导航跳转和 tabar 跳转。在 mpvue 框架中进行跳转可以使用 ** a 标签 **去实现，也可以使用 ** wx.navigateTo() **。

1
2
3
4
5
// 跳转
wx.navigateTo({ url: "pages/detail/main?id" + this.video.id });

// 目的页面，参数的接收
this.videoId = this.$root.$mp.query.id;
4. 使用 scss 书写 css

首先需要安装 node-scss 和 scss-loader

1
2
npm install scss-loader --save-dev
npm install node-scss --save-dev

安装完毕就可以这样书写 css 代码了

1
2
3
4
5
6
7
8
9
10
<style lang="scss" scoped>
  .video {
    margin-bottom: 10px;
    overflow: hidden;
    .video-img {
      overflow: hidden;
      width: 100%;
    }
  }
</style>

如果安装完，** ** 嵌套的代码，不智能提示，及 ** {}** 有红色波浪线警告，可以采用如下解决方案。

在 VsCode 编辑器中，点击 文件-首选项-设置 增加一下几行配置即可。

1
2
3
"files.associations": {
	"*.css": "scss"
}
5.mpvue 中如何使用 vuex

在 pages 根目录下创建 stores 的目录，并且新建 3 个文件

1
2
3
index.js
mutation-types.js
mutations.js
1
2
3
4
5
6
7
// mutation-types.js

// 获取上次播放ID 用于结束上次播放的视频
export const VideoPlayId = "VideoPlayId";

// 获取微信用户信息 存有 openID
export const UserInfor = "UserInfor";
1
2
3
4
5
6
7
8
9
10
11
12
// mutations.js

import { VideoPlayId, UserInfor } from "./mutation-types";

export default {
  [VideoPlayId](state, v) {
    state.videoPlayId = v;
  },
  [UserInfor](state, v) {
    state.userInfo = v;
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// index.js

import Vue from "vue";
import Vuex from "vuex";

import mutations from "./mutations";

Vue.use(Vuex);

const state = {
  videoPlayId: -1,
  userInfo: {},
};

export default new Vuex.Store({
  state,
  mutations,
});

绑定 Store 到 mpvue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from "vue";
import App from "./App";

// 导入Store
import Store from "./stores";

Vue.config.productionTip = false;
App.mpType = "app";

// 绑定
Vue.prototype.$store = Store;

const app = new Vue(App);
app.$mount();

在使用的地方，需要吧 state 定义的变量，及触发的方法导出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<template>
  <div>
    <button :class="{logged: isLogged}"
			open-type="getUserInfo" :lang="zh_CN"
			@click="doLogin"
	>获取用户信息</button>
  </div>
</template>

<script>

// ---开始 vuex
import { mapState, mapMutations } from 'vuex'
import { UserInfor } from '@/stores/mutation-types'
// ---结束 vuex

import { get, showSuccess, showModal } from '@/utils/index'
import qcloud from 'wafer2-client-sdk'
import config from './../../config'

export default {
  data () {
    return {
    }
  },

  computed:{
    // --- 导出 state 定义的 userInfo 变量
    ...mapState([
      'userInfo'
    ]),
    isLogged () {
      return !!this.userInfo['openId'];
    }
  },
  methods: {
    /* --- 导出 Mutations 定义的 UserInfor变量用来，
		   修改Store.state的userInfo值 */
    ...mapMutations([
      UserInfor
    ]),
    doLogin(){
      qcloud.login({
        success: res => {
		  // 调用Store 方法去修改
          this[UserInfor](res)
          // this.userInfo // 可以 直接访问
        },
        fail: err => {
          this[UserInfor]({})
          showModal('登录错误')
        }
      })
    }
  }
}
</script>

<style scoped>
.logged{
  display: none;
}
</style>

作品展示