【uniapp】uniapp 引用 js 组件

UniApp作为一款优秀的跨平台开发框架,它可以让我们使用一套代码,并在多个平台上进行编译,从而获得高性能、易扩展和可维护的应用程序。在UniApp开发过程中,我们不仅需要掌握各种UI组件的使用方法,还需要了解如何在项目中引入JS文件。在本文中,我将介绍UniApp中如何引入JS的方法。

引入模块化 js 文件的方式

js 复制代码
var handleDecodedXML = function(decodedXml) {}
var escapeMarkup = function(dangerousInput) {}

module.exports = {
  handleDecodedXML,
  escapeMarkup
}

场景 1 在vue文件中直接引入JS文件

在UniApp开发中,我们使用的是Vue框架,因此,可以直接在.vue文件中引入JS文件。

在项目的根路径下建立lib/js文件夹,并在该文件夹下新建一个util.js的文件,用于存放JS代码,之后在.vue文件中通过import语句来引入:

js 复制代码
<script>
    // 下面方法三选一,可以直接引入方法,也可以引入整个模块
	import util from '@/lib/js/util.js' // 在后续的代码中就可以调用 util.xxx  调用 util 中的方法
	import {handleDecodedXML} from '@/lib/js/util'
	const {handleDecodedXML} = require('@/lib/js/util')
</script>

其中 @ 表示项目根目录,handleDecodedXML 表示导入的方法。

引入非模块化 js 文件的方式

直接引入

可以通过 import 语句直接引入一个非模块化 js 文件,如下所示:

复制代码
import '@/lib/js/util';

其中 @ 表示项目根目录,util 是 js 目录下的一个非模块化 js 文件。

script 标签

可以使用 script 标签引入一个非模块化 js 文件,如下所示:

js 复制代码
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js"></script>

参考

https://pythonjishu.com/kzmssyrbwoaorux/

https://www.php.cn/faq/546287.html

相关推荐
sdgsdgdsgc7 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生9847 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j7 小时前
spark
javascript·数据库·spark
黑云压城After10 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
2501_9159090611 小时前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
未来之窗软件服务12 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
牧杉-惊蛰13 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木14 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js
FuckPatience14 小时前
前后端分离项目部署完成后 前后端交互过程
vue.js·asp.net
CoderYanger14 小时前
前端基础-HTML入门保姆级课堂笔记
前端·javascript·css·html