Vue 分享（第二期）

使用 cli3 会遇到一直报错 get 不到 /sockjs-node/info?t= 的问题：

如图

解决方法一：

解决办法

解决方法二：
直接将代理配置的端口号改成与项目一直的端口号就可以正常运行了
假如默认后台端口是 80；
本地项目运行端口是 8080；
找到 vue.config.js devServer:{} 。
配置 prot 本地端口和访问服务器的端口一致。

运行后 network 上没有 ip 显示的：

如图

解决方法：
看下你网络是否分享热点之类的。

运行时端口号被占用：

解决方法：

用于 Mac
动态编辑表格列的时候，会出现闪烁的现象：

如图

解决方法：
就是 table 里面加个 key ，来区分唯一，为了保证 table 每次都会重新渲染

如图

「网上看了一堆解决什么闪烁问题，反正不适合我」

H5 分享到微信(分享出去的页面在微信中打开，需要请求数据，并且这个链接还有时间有效期)：
1、分享出去的 url 需要拼接参数。

let 分享的 url = 当前的 ip + /router?参数1=xxx&参数2=xxx&当前时间=new Data().getTime() 
// 如果链接中的参数本身也是带有 `http://` 或者含有`中文`的链接，那么就需要转码，用 encodeURI(参数) ，不然链接就会出现乱码或者失效。

2、微信端点开这个分享链接，拿到链接上的参数去请求接口数据。

computed:{
  temp_参数(){
    return 获取到你链接中的`参数`
   // 获取的链接中带有`http://` 或者含有`中文`参数是因为事先转码，所以现在需要解码，但是对中文的解码是用decodeURI()，但是 http 是用 decodeURIComponent() 去解码。
  }
}

3、获取链接中的时间，和打开当前分享链接中的时间进行比较，来判断是否在有效期内。

URL 生成二维码，我用的是 qrcodejs2，但是在已有一个背景图片中再嵌套这种生成的二维码，在某些小米和华为手机上会显示空白，解决如下：

     import QRCode from "qrcodejs2";

     <div class="imgQrcode">
        <img
          :src="qrCode_img"
          alt=""
          ref="qrcode"
          class="qrcode"
        />
     </div>

     new QRCode(this.$refs.qrcode, {
      text: encodeURI(你要生成二维码的链接),
      width: 150,
      height: 150,
      colorDark: "#000000",
      colorLight: "#ffffff"
    });
    let myCanvas = document.getElementsByTagName("canvas")[0];
    this.qrCode_img = myCanvas.toDataURL("image/png");

    // qrcode 在页面生成二维码时，会生成一个 canvas 标签和一个 img 标签，在小米或者华为手机上生成的二维码是通过 canvas 展示的，img 标签被隐藏，所以需要特殊处理一下，将 canvas 标签隐藏，拿到生成的 url 放到 img 里面再展示出来

一些样式写法：

:style="{ backgroundImage: 'url(' + $imageUrl.zhucBG + ')' }"
height: calc(100vh - 65px);

样式挂载：

  get-container="#addMyCustomer" 
  // 我曾用于 van-popup 的弹框位置

原生和 JS 侨接：

 原生和 JS 侨接文章还是很多的，就不介绍了，基本都是 JS 调用原生的方法，如定位、分享、拍照～ 但也有时候需要原生调 JS 方法。
 如在原生的 tabbar 嵌套 H5 页面，从这个页面进入的二级 H5 页面如有操作，返回后，是无法自动刷新的，只能在返回的时候通知原生调用 JS 的刷新方法。
写法的区别就是一个调用，一个注册的区别。

修复 bug ，编译后游览器缓存问题：

 //在 vue.config.js 文件中加入
configureWebpack: {
 output: {
   // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
   filename: `static/js/[name].${Timestamp}.js`,
   chunkFilename: `static/js/[name].${Timestamp}.js`,
 },
},
// 可以看出玩前面有 static/js ，因为你不这样加上路径，编译后的 JS 文件就会出现在和 index.html 同一级

自定义指令(input)：

 // 定义 js 方法 校验输入正整数
export function intNumber(el) {
const input = el.getElementsByTagName('input')[0];
input.onkeyup = function (e) {
 if (input.value.length === 1) {
   input.value = input.value.replace(/[^1-9]/g, '');
 } else {
   input.value = input.value.replace(/[^\d]/g, '');
 }
 trigger(input, 'input');
};
 input.onblur = function (e) {
 if (input.value.length === 1) {
   input.value = input.value.replace(/[^1-9]/g, '');
 } else {
   input.value = input.value.replace(/[^\d]/g, '');
 }
 trigger(input, 'input');
 };
}

const trigger = (el, type) => {
   const e = document.createEvent('HTMLEvents');
   e.initEvent(type, true, true);
   el.dispatchEvent(e);
};

// 在 main.js 中
Vue.directive('intNumber', intNumber);

// vue 代码中
<el-input
     v-model.trim=""
     v-intNumber
>

el-checkbox 默认是 true 和 false：

// 如果后台需要 1 和 0 
    <el-checkbox
        :true-label="1" :false-label="0">
    </el-checkbox>

组件之间参数传递，父传子就不说了，说说爷传孙：

// 爷要传给孙方法，需要先传给父，然后在父那用 `v-on="$listeners"` 接收。

store 中直接去遍历注册每个子模块数据：
1、传统写法：

   export default new Vuex.Store {
     state: {},
     mutations: {},
     actions:{},
     modules:{
       模块1,
       模块2,
         .
         .
         .
     }
   }

2、遍历的写法：

const modulesFiles = require.context('./modules', false, /\.js$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
const value = modulesFiles(modulePath);
modules[moduleName] = value.default;
return modules;
}, {});

const store = new Vuex.Store({
modules,
});

// 但是目前，还不知道怎么加上个个子的文件模块，只能满足 modules 下的 store 文件都是同一层级

解决有些手机页面滑动卡顿的情况：

-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;

自动获取服务 ip ：

  const os = require('os')
  let localhost = ''
  try {
  const network = os.networkInterfaces()
  localhost = network[Object.keys(network)[0]][1].address
  } catch (e) {
  localhost = 'localhost';
  }
// 再找到host将其改为host:localhost即可

这次就到这里结束了，我们下期再见～～