标签 Vue 下的文章

错误描述

在使用uni-app开发微信小程序的时候，想要通过uni.chooseLocation获取用户地理位置的时候出现chooseLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json这样的错误。

错误分析

把错误日志分析下大致的意思就是：api需要在app.json/ext.json的requiredPrivateInfos字段中声明，也就是说需要app.json/ext.json在这里面配置下requiredPrivateInfos，那么怎么在uni-app里面配置呢？

解决办法

打开manifest.json选择源码视图，找到mp-weixin节点，添加requiredPrivateInfos的配置，源码如下：

"mp-weixin" : {
    "requiredPrivateInfos" : [ "chooseLocation", "getLocation" ]
}

然后问题就解决了，就可以正常获取用户的地理位置了。

现在的视频格式很多，有传统的、有新颖的，而m3u8格式的视频越来越受欢迎，因为它不占空间，而且播放速度很快。而且现在很多监控播放地址也是m3u8,video标签无法直接在浏览器中播放m3u8格式的视频。这时候我们需要借助video.js来播放。

第一步安装video.js

npm install vue-video-player videojs-contrib-hls --save

第二步在main.js中引入

import 'video.js/dist/video-js.css'

第三步新建视频播放组件

<template>
    <div style="width: 100%; height: 100%">
        <video id="video" preload="auto" muted class="video-js vjs-default-skin" style="width: 100%; object-fit: fill">
            <source :src="video" />
        </video>
    </div>
</template>
<script>
    import videojs from 'video.js'
    import 'videojs-contrib-hls'
    export default {
        props: {
            video: {
                value: null
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.playVideo()
            })
        },
        methods: {
            playVideo() {
                videojs('video', {
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    posterImage: false,
                    errorDisplay: false,
                    controls: true,
                    hls: {
                        withCredentials: true
                    }
                }, function() {
                    this.play()
                })
            }
        }
    }
</script>

第四部引用组件

<Video src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"></Video>

小编今天在使用npm install安装东西的时候出现了这样的错误

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
gyp ERR! System Darwin 20.3.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/zero/projects/test/vue_test/big-screen-vue-datav/node_modules/fsevents
gyp ERR! node -v v14.16.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

看上面的提示可能是Xcode的问题，那么我们就重装下Xcode的吧，果然解决了问题。

xcode-select --install

做前端的小伙伴应该都很清楚使用vue的v-for就可以很方便的一个数组，然后对数组中的元素就行展示或者操作，那么有没有考虑过遍历对象呢。我们在学习js的时候都应该知道，我们使用js是可以遍历对象的，比如：

var oj = {"a":1, "b": 2, "c": 3}
for(var i in oj){
    console.log(i,"----->" ,oj[i])
}
// 输出
// a -----> 1
// b -----> 2
// c -----> 3

其实使用vue的v-for的效果是一样的，也是用的in。下面案例的输出结果是一样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-for="(val, key, index) in list">{{key}}----->{{val}}</p>
    </div>

    <script>
        var obj=
        new Vue({
            el: '#app',
            data:{
                list:{
                    'a':1,
                    'b':2,
                    'c':3
                }
            }
        })
    </script>
</body>
</html>

小编今天在制作视频播放组件的时候，想让视频默认直接就是全屏播放，或者点击之后全屏播放，并不是点击全屏之后再进行全屏，实现方式可能有很多种，小编在这里介绍一种比较简单的，通过官方的VideoContext就可以实现的。
首先我们要引入视频组件：

<video id="myVideo" :src="videoUrl" @click="playvideo" @fullscreenchange="fullscreenchange"></video>

然后设置点击事件

playvideo: function(e){
    this.videoContext = uni.createVideoContext('myVideo', this);
    this.videoContext.requestFullScreen({direction: 0});
    this.videoContext.play()
},

这样就成功实现了全屏播放了，不过我们发现退出全屏后视频还在播放，那么我们就要设置下在退出全屏后，就要停止播放视频了。

fullscreenchange (e){
    if(!e.detail.fullScreen){  
        this.videoContext.pause()
        this.showvideo = false
    }
},

在使用vueCli的脚手架工具创建完项目后，然后倒入模块的时候出现了error 'XXX' is defined but never used这样的错误，这是由于我们使用了eslint规范，ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。这就导致了运行时候出现的错误。解决办法：

在package.json文件内加入如下代码：然后保存重启项目。

"rules": {
    "generator-star-spacing": "off",
    "no-tabs":"off",
    "no-unused-vars":"off",
    "no-console":"off",
    "no-irregular-whitespace":"off",
    "no-debugger": "off"
},

Error: Avoided redundant navigation to current location ElementUI导航栏重复点菜单报错的解决办法：
首先打开我们的路由配置文件，ranhu就可以解决了。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

如果修改了push还是没有生效，那么可以尝试replace方法，例如：

const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};