uniapp 引用 js 组件的方法(场景分析)

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

<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 表示导入的方法。

直接引入

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

import '@/lib/js/util';

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

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