Javascript 在ionic 4中使用.js文件
我是爱奥尼亚的新手,我想在一个页面中使用Javascript 在ionic 4中使用.js文件,javascript,typescript,ionic-framework,ionic4,Javascript,Typescript,Ionic Framework,Ionic4,我是爱奥尼亚的新手,我想在一个页面中使用.js文件 我有一个.js文件,它在画布中创建气泡 我想做的是,在我的爱奥尼亚4项目中使用.js文件,并在我的主页上显示bubble 这是我想用的密码笔的密码 我在'assets/js/bubblefile.js'中创建了文件,但我不知道如何在我的home.html或home.ts中使用'bubblefile.js'文件?下面是我的代码 已编辑 home.htmlcode: <ion-header> <ion-toolbar>
.js
文件
我有一个.js
文件,它在画布中创建气泡
我想做的是,在我的爱奥尼亚4项目中使用.js
文件,并在我的主页上显示bubble
这是我想用的密码笔的密码
我在'assets/js/bubblefile.js'
中创建了文件,但我不知道如何在我的home.html
或home.ts
中使用'bubblefile.js'
文件?下面是我的代码
已编辑
home.html
code:
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<script src="assets/js/bubblefile.js"></script>
</ion-content>
bubblefile.js代码
var nodes = new vis.DataSet([
{label: "Pop"},
{label: "Alternative"},
{label: "Rock"},
{label: "Jazz"},
{label: "Hits"},
{label: "Dance"},
{label: "Metal"},
{label: "Experimental"},
{label: "Rap"},
{label: "Electronic"},
]);
var edges = new vis.DataSet();
var container = document.getElementById('bubbles');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
physics: {
stabilization: false,
minVelocity: 0.01,
solver: "repulsion",
repulsion: {
nodeDistance: 40
}
}
};
var network = new vis.Network(container, data, options);
// Events
network.on("click", function(e) {
if (e.nodes.length) {
var node = nodes.get(e.nodes[0]);
// Do something
nodes.update(node);
}
});
export { nodes, edges, container, data, options, network };
var bubble = (function(){
var nodes = new vis.DataSet([
{label: "Pop"},
{label: "Alternative"},
{label: "Rock"},
{label: "Jazz"},
{label: "Hits"},
{label: "Dance"},
{label: "Metal"},
{label: "Experimental"},
{label: "Rap"},
{label: "Electronic"},
]);
var edges = new vis.DataSet();
var container = document.getElementById('bubbles');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
physics: {
stabilization: false,
minVelocity: 0.01,
solver: "repulsion",
repulsion: {
nodeDistance: 40
}
}
};
var network = new vis.Network(container, data, options);
// Events
network.on("click", function(e) {
if (e.nodes.length) {
var node = nodes.get(e.nodes[0]);
// Do something
nodes.update(node);
}
});
export { nodes, edges, container, data, options, network };
})
项目结构
任何帮助或建议都将不胜感激
如果您想在HTML文件中使用它,请多谢:
<script src="assets/js/bubblefile.js"></script>
在要在其中使用的文件顶部:
import "./assets/js/bubblefile";
home.html代码:
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<script src="assets/js/bubblefile.js"></script>
</ion-content>
bubble.js代码
var nodes = new vis.DataSet([
{label: "Pop"},
{label: "Alternative"},
{label: "Rock"},
{label: "Jazz"},
{label: "Hits"},
{label: "Dance"},
{label: "Metal"},
{label: "Experimental"},
{label: "Rap"},
{label: "Electronic"},
]);
var edges = new vis.DataSet();
var container = document.getElementById('bubbles');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
physics: {
stabilization: false,
minVelocity: 0.01,
solver: "repulsion",
repulsion: {
nodeDistance: 40
}
}
};
var network = new vis.Network(container, data, options);
// Events
network.on("click", function(e) {
if (e.nodes.length) {
var node = nodes.get(e.nodes[0]);
// Do something
nodes.update(node);
}
});
export { nodes, edges, container, data, options, network };
var bubble = (function(){
var nodes = new vis.DataSet([
{label: "Pop"},
{label: "Alternative"},
{label: "Rock"},
{label: "Jazz"},
{label: "Hits"},
{label: "Dance"},
{label: "Metal"},
{label: "Experimental"},
{label: "Rap"},
{label: "Electronic"},
]);
var edges = new vis.DataSet();
var container = document.getElementById('bubbles');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
physics: {
stabilization: false,
minVelocity: 0.01,
solver: "repulsion",
repulsion: {
nodeDistance: 40
}
}
};
var network = new vis.Network(container, data, options);
// Events
network.on("click", function(e) {
if (e.nodes.length) {
var node = nodes.get(e.nodes[0]);
// Do something
nodes.update(node);
}
});
export { nodes, edges, container, data, options, network };
})
从@sivakumar Answer我得到了一些使用.js文件的技巧 home.html代码:
<ion-header>
<ion-toolbar>
<ion-title>
Music Bubble
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="bubbles">
</div>
</ion-content>
bubblefile.js代码:
var bubble = (function(){
var nodes = new vis.DataSet([
{label: "Pop"},
{label: "Alternative"},
{label: "Rock"},
{label: "Jazz"},
{label: "Hits"},
{label: "Dance"},
{label: "Metal"},
{label: "Experimental"},
{label: "Rap"},
{label: "Electronic"},
]);
var edges = new vis.DataSet();
var container = document.getElementById('bubbles');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
physics: {
stabilization: false,
minVelocity: 0.01,
solver: "repulsion",
repulsion: {
nodeDistance: 40
}
}
};
var network = new vis.Network(container, data, options);
// Events
network.on("click", function(e) {
if (e.nodes.length) {
var node = nodes.get(e.nodes[0]);
// Do something
nodes.update(node);
}
});
})
有一个用于加载异步JavaScript文件的库。 安装软件包:
npm i scriptjs
然后在任何地方使用它,如下所示:
import { get } from 'scriptjs';
ngOnInit() {
get("assets/js/searchEmp.js", () => {
getSerchInspContext = this;
loadSearchEmp();
});}`
或
您可以简单地使用jquery方法在头中追加或删除脚本标记
要添加.js文件,请在ngOnInit()下的下面一行调用:
我需要在哪个文件顶部添加最后一行?在你的
bubblefile.js
中添加export
行,在你想在中使用的任何js文件中添加bubblefile.js
行。我想在.ts文件中使用它,而不是在js文件中。谢谢你的快速重播,但它给出了错误/src/app/home/home.page.ts模块未找到:错误:无法解析“/assets/js/bubblefile”in'/Users/atologistimac2/Documents/HybridApps/musicbuble/src/app/home'
与home.page.ts
文件相关的文件存储在哪里?检查文件路径如所示更改文件名气泡
npm i scriptjs
import { get } from 'scriptjs';
ngOnInit() {
get("assets/js/searchEmp.js", () => {
getSerchInspContext = this;
loadSearchEmp();
});}`
$('head').append('<script async src="assets/js/search.js"></script>');
document.querySelector('script[src="assets/js/search.js"]').remove();