一个基于vue2的h5项目,被嵌套在安卓APP和iOS APP中使用。因为某些原因无法在webview中使用缓存,也无法使用cdn方式。
在经过分包、按需加载、代码清理、压缩资源文件、减少并发请求等常规手段优化后,网络较差的情况下较长的白屏时间仍然很尴尬。于是在index.html中加上了默认loading动画效果,这样用户在加载完入口文件后就可以直接看到动画,待vue初始化完成时再关闭loading动画,体验更佳。
辣么问题来了,在PC和Android设备上进行测试,都能达到预期效果。但是在iOS设备上,不管是 Safari 还是基于 iOS的WebView中,ind...
使用之前别忘了先安装clipboard(npm i clipboard -S)
1、调用方法
this.$store.commit('emitCopy', '复制内容')
2、App.vue文件中
<template>
<div class="app-root">
<router-view />
<!-- 复制面板 -->
<ClipboardPanel ref="clipboardRef" />
</div>
</template>
<script>
...
某日被告知某个系统在低版本火狐浏览器打开时一片空白,要求尽快修复,于是卸载本机firefox,安排上表现异常的版本Firefox 42.0,打开目标系统果然一片空白,然后打开控制台,发现提示如下:
SyntaxError: let is a reserved identifier
嗯,看提示是低版本还不支持let语法,按照经验转成 var 就行,于是给安排上babel-polyfill再加上各种转换折腾了一上午,无果emmm,,,
嗯,看来还是想当然了(手动捂脸)。于是换个思路,从抛错点入手,从控制台中打开抛错的文件,发现该function有添加"u...
1、vuex
不论是父子关系、兄弟关系、层层嵌套关系还是八竿子打不着的关系,都可以使用vuex来进行数据的传递或是做做中间处理。
vuex是vue的状态管理器,存储的数据是响应式的,但是并不会保存起来,刷新之后就回到了初始状态,一般在vuex里数据改变的时候存一份到localStorage或sessionStorage里面(看项目需求),刷新之后,如果localStorage里有保存的数据,取出来再替换store里的state即可。
ps:vuex最简单、最详细的入门文档
2、事件总线EventBus
通过新建一个js文件event...
webpack-bundle-analyzer插件用以分析webpack打包之后的结果,在vue-cli3之前是集成到scripts中,然后直接执行命令就行,而在vue cli3中用vue create创建的项目木有这个插件的命令了,查阅官方文档发现这个文档仍然是被集成的,只是需要我们在有需要的时候自己添加相关参数。
官方默认的命令是这样的:
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
那么我们可以执行n...
多页模式官方配置说明 https://cli.vuejs.org/zh/config/#pages
const isProd = process.env.NODE_ENV === 'production'
const isDev = process.env.NODE_ENV === 'development'
const cdnResource = {
dev: {
css: [
'https://cdn.jsdelivr.net/npm/element-ui@2.10.1/lib/theme-chalk/index.css'
],
...
项目中有类似需求:列表进详情,详情再返回列表,列表保持之前的状态,而其他页面进列表则重新渲染。
结合项目实际情况,最终实现方法:结合beforeRouteEnter和beforeRouteLeave钩子然后用keep-alive做缓存。
有关keep-alive的作用及使用方法本文将不再赘述(详见官方文档)
栗子如下,父组件:
<template>
<div id="app">
<keep-alive :include="cachedPages">
<router-view />
<...
支付宝支付一般是请求接口后收到一组form表单代码,在h5中,可以直接像下面这样直接使用
doPayAlipay(alipayNeedParams).then(resAlipay=>{
if(resAlipay.code==0){
const div = document.createElement('div');
div.innerHTML = resAlipay.data.form;
document.body.appendChild(div);
document.getElementById('...
普通vue项目中
以CNZZ统计为例(CNZZ统计API),先在index.html中的head标签中加入:
<script>
var _czc = _czc || [];
_czc.push(["_setAutoPageview", false]);
(function() {
var cnzz_s_tag = document.createElement('script');
cnzz_s_tag.type = 'text/javascript';
cnzz_s_tag.async = true;
cnzz_s_t...