nuxt系列问题解决汇总

0、序

作为一个前端开发小白,在没有任何H5高手知道的情况下,通过一段时间对nuxt的学习,终于写好了一个极其简单的【H5小游戏】,在这个摸索学习的过程,每当突破一个小技术点的时候,都有很大的成就感;在这段时间里着实让我痛并快乐着。在这里根据个人学习情况,所踩过的坑做了一个汇总和总结:

1、IP端口配置

在写demo的时候,我没记错的话,默认本地的端口好是3307,有时候这个端口号会被其他应用占用,这时候运营项目就会报错;还有有个问题就是,同时运行两个demo的时候,如果没有对端口号配置的话,后面运行的一个demo也会报相同的错误。面对这个问题,针对这个问题,我搜索了很多相关资料,都是很琐碎,而且关键词不好找,在这里,我另写了一篇博客,做了个全面的汇总总结,需要浏览的请点击这里

2、Mac系统端口配置不能使用80,系统默认占用

在写完H5小游戏的时候,要将这个产品发布,想要采用80端口,发现Window系统可以使用运行,而Mac系统直接报错(linux系统什么情况我就不知道了,没有查证),提示端口号被占用,但是查了一下80端口号应用情况,发现并没有其他任何应用占用了该端口,经过多方查证的结果竟然是Mac系统的80端口已经被系统默认占用了,最后只能通过后台端口转换访问。

3、关于页面图层布局

之前写OC在UI实现方面,只要定好位置,图层是可以自动默认往上叠加的,但是H5不行,需要另外应用到两个css2的参数:position(位置关系,里面的水还很深,可以再深入了解一下)、z-index(图层关系,正负值都可以,数值越大距离我们越近),position的几个属性值见下图:

在这里插入图片描述

4、页面内容已出及滑动与静止的处理

采用css3的元素:overflow-y、overflow-x,其属性值见下表:
在这里插入图片描述

5、v-bind、v-model、methods()的各种数据传值

在学会了写基本的UI之后,就要考虑到传值这个问题,这里建议直接看Vue的官方文档就好(其他的资料更少),建议看英文文档比较完善,在这里想吐槽一下:咱国人自己开发的一个框架,怎么就这么不待见国人吗?虽然没有嘴上明说,但总感觉其从骨子里头就散发出那种让自己自相矛盾的厌恶的气息,中文版的官方文档都拉下了好几个版本还不知道吗?好吧,讨厌我自己吧,我竟然恬不知耻的拿来用了。

6、地址选择器集成

在H5小游戏中需要用到地址选择器,查看了很多地方都没有现成货,于是我自己摸石踏河,做了个简单集成,并写了一个博文,需要的请点这里

7、本地缓存管理、不同管理类型的应用

本来想多花点时间系统的研究一下本地缓存这个事情,但是怕进度来不及,所以直接使用cookie做了一些简单的集成:

/*设置缓存*/
export function cookie_set (name, value) {
  if (value) {
    const Days = 365;
    const exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
    document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
  }
}
/*获取缓存*/
export function cookie_get (name) {
  if (document&&document.cookie.length > 0) {
    let begin = document.cookie.indexOf(name + '=');
    if (begin !== -1) {
      begin += name.length + 1 // cookie值的初始位置
      let end = document.cookie.indexOf(';', begin); // 结束位置
      if (end === -1) {
        end = document.cookie.length // 没有;则end为字符串结束位置
      }
      return unescape(document.cookie.substring(begin, end))
    }
  }
  return null
  // cookie不存在返回null
}
/*删除缓存*/
export function cookie_delete (name) {
  const exp = new Date();
  exp.setTime(exp.getTime() - 1)
  const cval = setCookie(name);
  if (cval && cval != null) {
    document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
  }
}
/*清除所有cookie缓存*/
export function cookie_clear () {
  const keys = document.cookie.match(/[^ =;]+(?=\=)/g);
  if (keys) {
    for (let i = keys.length; i--;) {
      document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
    }
  }
}


var Cache={
  type:'session',
  setType:function(){
    if(this.type == 'session'){
      return window.sessionStorage;
    }
    if(this.type == 'local'){
      return window.localStorage;
    }
    console.log('类型错误!');
  },
  set:function($key,$value){
    this.setType().setItem($key,$value);
  },
  get:function($key){
    return this.setType().getItem($key)
  }
}

8、字体包下载

通常情况下,你需要什么的字体包直接找UI就可以了,不过今天我想多了解这方面的东西,就找UI了解了这一模块,于是他给我介绍了一家UI使用比较多的设计网站站酷,里面可以找到一很多字体包,如直接在里面搜索“免费商用字体下载”,就会有很多字体包提供下载链接:
在这里插入图片描述
如果要下载某个具体的字体,直接百度一下就好。另外知识普及一下,字体有.ttf、.ttc两种格式。.ttc格式不是完整的,有部分字体不是对应格式的。

9、音乐调起集成

这里我又想吐槽一下,pc端浏览器可以正常播放几个背景音乐,但是到了移动端,需要专门的方法去调用;但是移动的android端和ios又是不一样的,android端做完配置后,就可以触发音乐事件;ios端还是不行,在做完配置之后,还需要点击或者滑动事件才能出发音乐事件。话说这每一端都不一样,简直是日了狗了。好了,下面我们来看一下音乐调起的集成:

import {cookie_set,cookie_get} from '../../plugins/jsTools/zmCookie'

/*播放/暂停*/
export function music_pause_or_play(audioId) {
  if (audioId !== null && audioId !== undefined && audioId !== '' ) {
    const audio = document.getElementById(audioId);
    if (audio) {
      if (audio.paused) {
        audio.play();
        cookie_set(audioId,'1')
        return '1'
      } else {
        audio.pause();
        cookie_set(audioId,'0')
        return '0'
      }
    }
  }else {
    console.log("参数为空")
  }
}

/*播放*/
export function music_play(audioId) {
  if (audioId !== null && audioId !== undefined && audioId !== '' ) {
    const audio = document.getElementById(audioId);
    if (audio) {
      if (audio.paused) {
        audio.play();
        cookie_set(audioId,'1')
        return '1'
      }
    }
  }else {
    console.log("参数为空")
  }
}

/*暂停*/
export function music_pause(audioId) {
  if (audioId !== null && audioId !== undefined && audioId !== '' ) {
    const audio = document.getElementById(audioId);
    if (audio) {
      if (audio.played) {
        audio.pause();
        cookie_set(audioId,'0')
        return '0'
      }
    }
  }else {
    console.log("参数为空")
    return '1'
  }
}

/*重头播放*/
export function music_restart(audioId) {
  if (audioId !== null && audioId !== undefined && audioId !== '' ) {
    const audio = document.getElementById(audioId);
    if (audio) {
      audio.currentTime = 0;
      cookie_set(audioId,'1')
    }
  }else {
    console.log("参数为空")
  }
}

/*关闭音乐*/
export function music_close(audioId) {
  if (audioId !== null && audioId !== undefined && audioId !== '' ) {
    const audio = document.getElementById(audioId);
    if (audio){
      audio.pause();
      audio.load();
      cookie_set(audioId,'0')
    }
  }else {
    console.log("参数为空")
  }
}

/*获取本地音乐缓存状态*/
export function music_local_status(audioId) {
  if (audioId !== null && audioId !== undefined && audioId !== '' ) {
    let value = cookie_get(audioId)
    if (value === null && value === undefined && value === ''){
      value='1'
    }
    return value
  }else {
    console.log("参数为空")
    return '1'
  }
}

上面使用了cookie的缓存,不需要的自行可以删掉。音乐调起的方法有了,再来看一下移动端微信浏览器(我用的只有这个,其他的暂时不考虑)调起音乐的配置:

      /*音乐自动触发*/
      autoMusic() {
        //--创建页面监听,等待微信端页面加载完毕 触发音频播放
        document.addEventListener('DOMContentLoaded', function () {
          function audioAutoPlay() {
            const audio = document.getElementById("bgMusicName");
            const vm = this
            if (audio) {
              audio.play();
            }
            document.addEventListener("WeixinJSBridgeReady", function () {
              if (vm.audio) {
                vm.audio.play();
              }
            }, false);
            document.addEventListener('YixinJSBridgeReady', function () {
              if (vm.audio) {
                vm.audio.play();
              }
            }, false);
          }
          audioAutoPlay();
        });
        //--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
        document.addEventListener('touchstart', function () {
          function audioAutoPlay() {
            var audio = document.getElementById("bgMusicName");
            if (audio) {
              audio.play();
            }
          }
          audioAutoPlay();
        });
      },

调用以上方法就可以。

10、.js资源文件的引用

这个在官网里面就有,写的还是比较详细的,不过关键词是“外部资源”,其他的还找不到,文档没看全,找了大半天才找到,也是跪了。只能说关键词运营这个块做的还不够,我呢,文档也没看全。

11、nuxt.js引入第三方插件

这里有个别人写的博客,还是比较全面的,可以看一下

12、隐藏微信底部前进/返回标签栏或分享栏

这个我测试了下,发现底部前进返回栏的隐藏,是无法实现的(我可以说Tecent是个骗纸吗,伤害了小心灵),但是其他的可以实现,我还是把他给分享出来吧:

引用:

<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script>

调用:

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    // 通过下面这个API隐藏右上角按钮
    WeixinJSBridge.call('hideOptionMenu');
});
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    // 通过下面这个API显示右上角按钮
    WeixinJSBridge.call('showOptionMenu');
});

2、隐藏微信网页底部的导航栏
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    // 通过下面这个API隐藏底部导航栏
    WeixinJSBridge.call('hideToolbar');
});
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    // 通过下面这个API显示底部导航栏
    WeixinJSBridge.call('showToolbar');
});

3、在微信网页中获取用户的网络状态
WeixinJSBridge.invoke('getNetworkType',{},function(e){
    // 在这里拿到e.err_msg,这里面就包含了所有的网络类型
    alert(e.err_msg);
 });
e.err_msg的取值如下所示:
 network_type:wifi wifi网络
 network_type:edge 非wifi,包含3G/2G 3
 network_type:fail 网络断开

13、DOMContentLoaded与load的区别

这里有篇详细描述DOM文档加载的详细步骤的博文,这里写个简单的步骤吧,具体的看详细文档:

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load

14、内网穿透原理

好东西做出来当然要拿出来分享啊,但自己又没有云服务器啊,这时候内网穿透就很重要了,作为对服务器是个小白的我来说,看了一篇很详细的博客,狠狠的恶补了一下,还是有点用的。

15、实现内网穿透

window系统可以使用【jnat】可视化工具,我同事在用,超级简单实用,他用的时候还是免费,不过听说现在还是收费了,但一年也就十来块钱,还是很便宜的。感到很可惜,不足的方面的是mac系统不能用啊,简直是有种想跳楼的冲动,但是查了下Mac系统还是有些比较有用的对应的工具的,我现在在用的是【EchoSite】,三端(window、mac、linux)都可以使用,一个月一块钱,前三个月还是免费的,之后一个月一块,还是很实惠的,这里还有一个网友做了个使用步骤总结,很简单。

16、二维码生成

这里我用了很多第三方工具,但是我很菜,就【qrcode】这个插件我会用,其他的都是调用失败,有待进一步研究

注: 其实上面还有很多问题处理的并不怎样,而且我还想在这里持续更新总结,欢迎大家一起来探讨学习~

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瓜子三百克

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值