(1) 代码规范文件目录结构
(2) 解决办法
(1) 设置一个代码模板片段
文件-->首选项-->用户代码片段-->vue.json
(2) 替换原有代码
代码中的 "prefix": "vue", 就是快捷键
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"",
"export default {",
// "//这里注册组件",
"components:{",
"},",
// "//这里存放数据",
"data() {",
"return {",
"",
"};",
"},",
// "//监听属性 类似于data概念",
"computed: {},",
// "//生命周期 - 挂载完成（可以访问DOM元素）",
"mounted() {",
"",
"},",
// "//beforeCreate() {}, //生命周期 - 创建之前",
// "//beforeMount() {}, //生命周期 - 挂载之前",
// "//beforeUpdate() {}, //生命周期 - 更新之前",
// "//updated() {}, //生命周期 - 更新之后",
// "//beforeDestroy() {}, //生命周期 - 销毁之前",
// "//destroyed() {}, //生命周期 - 销毁完成",
// "//activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
// "//方法集合",
"methods: {",
"",
"},",
// "//监控data中的数据变化",
// "watch: {}",
"}",
"</script>",
"<!--声明语言，并且添加scoped-->",
"<style lang='scss' scoped>",
"</style>"
],
"description": "Log output to console"
}
}
(3) 在vue文件中输入 vue ，按下 enter 快捷键
(1) 问题描述：增加可选链式语法报错
(2) 解决办法：
npm install --save-dev @babel/plugin-proposal-optional-chaining在babel.config.js文件中添加
plugins:["@babel/plugin-proposal-optional-chaining"]
备注： 对于 Vue 技术栈的项目，在某些情况下，当安装 Veture 扩展插件后，后者仍然会对可选链式语法报错，即红色波浪线，解决方法是： 设置 —用户—扩展— Veture ，取消选中 Validate js/ts in <script> ，关闭 JavaScript 验证
"javascript.validate.enable": false, "vetur.validation.script": false
(1) 问题描述
最近在维护项目,接触了 swiper 。发现 2 个比较头疼的问题，第一个是基于 swiper 插件本身，第二个是在 U3D 中切换 swiper ，数据源刷新然后又加载了原始数据（纯网页浏览 Ok ）。
① 以我项目为例，数据源接口返回5条数据， swiper 一屏 4 条数据，一行加载 2 条数据，第二屏应该只有 1 条数据，但实际上它加载了上一屏幕的数据。如果是数据正好占满屏幕或者不足一屏，逻辑就是正常的。
② 我点击对应swiper筛选条件，先加载了条件对应数据源，然后又加载了原始数据。
(2) 问题解决思路
① 第一个问题插件本身问题-暂不考虑解决
② 第二个问题默认先加载初始化的数据源，而不是一上来就加载u3d的传参
③ 接收到u3d的传参之后并通知 u3d 已接收成功
(1) 问题描述
最近与unity 3d配合移动端（网页加载模型），我提供数据源。他们 自己手动创建了 iview 框架项目，存在访问数据接口跨域问题。后端代码我已设置跨域问题，所以考虑从前端再次处理。
(2) 问题解决思路
① webpack之 proxyTable 设置跨域
② 全局注册
③ 代码示例
④ 帮助地址
(1) 数值传递相互的，网页发送数据给U3D， U3D 发送数据给网页。
(2) 公共JS方法，放置 index.html 主文件入口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
</head>
<body>
<noscript>
<strong>We're sorry but iview-admin doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<script>
function Hooks() {
return {
initEnv: function () {
Function.prototype.hook = function (hookFunc, context) {
var _context = null; //函数上下文
var _funcName = null; //函数名
_context = context || window;
_funcName = getFuncName(this);
_context['realFunc_' + _funcName] = this;
if (_context[_funcName].prototype && _context[_funcName].prototype.isHooked) {
console.log("Already has been hooked,unhook first");
return false;
}
function getFuncName(fn) {
// 获取函数名
return fn.name.replace("bound ", "");
// var strFunc = fn.toString();
// var _regex = /function\s+(\w+)\s*\(/;
// var patten = strFunc.match(_regex);
// if (patten) {
// return patten[1];
// };
// return '';
}
try {
eval('_context[_funcName] = function ' + _funcName + '(){\n' +
'var args = [];\n' +
"args.push(_context['realFunc_" + _funcName + "'].name.replace('bound ',''));\n" +
'args.push(Array.prototype.slice.call(arguments,0));\n' +
'var obj = this;\n' +
'hookFunc.apply(obj,args);\n' +
"return _context['realFunc_" + _funcName + "'].apply(obj,args);\n" +
'};');
_context[_funcName].prototype.isHooked = true;
// console.log("已勾住"+_funcName);
return true;
} catch (e) {
console.log("Hook failed,check the params.");
return false;
}
}
Function.prototype.unhook = function (context) {
var _context = null;
var _funcName = null;
_context = context || window;
_funcName = this.name.replace("bound ", "");;
if (!_context[_funcName].prototype.isHooked) {
console.log("No function is hooked on");
return false;
}
_context[_funcName] = _context['realFunc' + _funcName];
delete _context['realFunc'];
console.log("已释放" + _funcName);
return true;
}
},
cleanEnv: function () {
if (Function.prototype.hasOwnProperty("hook")) {
delete Function.prototype.hook;
}
if (Function.prototype.hasOwnProperty("unhook")) {
delete Function.prototype.unhook;
}
return true;
}
};
}
var hook = Hooks();
hook.initEnv();
//业务主
function HookEvent() {
console.log(arguments);
console.log(arguments[0], arguments[1]);
HookHandler(arguments[0], arguments[1]);
}
function testTTTTT(param) {
console.log("index数据");
console.log(param);
}
Function.prototype.inject = function (injectFunc) {
try {
var _funcName = this.name.replace("bound ", "");
var _injectFuncName = injectFunc.name.replace("bound ", "");
window['reflectionFunc_' + _funcName] = this;
eval('window[_injectFuncName] = function _injectFuncName(funcName, args) {\n' +
'return eval("reflectionFunc_" + funcName + "(args);")\n' +
'}'
)
return true;
} catch (error) {
console.log("Reflection injected function failed,check the params.");
return false;
}
}
Function.prototype.release = function () {
try {
var _funcName = this.name.replace("bound ", "");
return delete window['reflectionFunc_' + _funcName];
} catch (error) {
console.log("Reflection release failed,Please ensure that the method has been injected");
return false;
}
}
//unity主
function InvokeFunc() {
}
</script>
(3) 如何向U3D传递数据？
(4) U3D如何向网页传递数据？
| 修改日期 | 修改人 | 备注 |
| 2020-08-08 11:14:19[当前版本] | 钱钟书 | 增加vue.json用户代码片段 |
| 2020-08-08 10:13:53 | 钱钟书 | 增加vue cli 3.0 环境中启用 optional-chaining语法功能 |
| 2020-01-06 11:19:18 | 钱钟书 | v1.3 |
| 2019-12-28 11:16:17 | 钱钟书 | v1.2 |
| 附件类型 |
|
|
|
|
||
MP4
JPG
PNG