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

 更新时间:2023年09月15日 11:07:28   作者:wenxueliu@HW  
在UniApp开发过程中,我们不仅需要掌握各种UI组件的使用方法,还需要了解如何在项目中引入JS文件,在本文中,我将介绍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 表示导入的方法。

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

直接引入

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

import '@/lib/js/util';

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

script 标签

可以使用 script 标签引入一个非模块化 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

到此这篇关于uniapp 引用 js 组件的文章就介绍到这了,更多相关uniapp 引用 js 组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现上传按钮并显示缩略图小轮子

    js实现上传按钮并显示缩略图小轮子

    这篇文章主要为大家详细介绍了js实现上传按钮并显示缩略图小轮子,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • js生成随机数(指定范围)的实例代码

    js生成随机数(指定范围)的实例代码

    下面小编就为大家带来一篇js生成随机数(指定范围)的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 微信小程序实现判断是分享到群还是个人功能示例

    微信小程序实现判断是分享到群还是个人功能示例

    这篇文章主要介绍了微信小程序实现判断是分享到群还是个人功能,结合实例形式分析了微信小程序分享与判断功能的实现原理、步骤及相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 小程序实现上下切换位置

    小程序实现上下切换位置

    这篇文章主要为大家详细介绍了小程序实现上下切换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js中class的点击事件没有效果的解决方法

    js中class的点击事件没有效果的解决方法

    下面小编就为大家带来一篇js中class的点击事件没有效果的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 使用时间戳解决ie缓存的问题

    使用时间戳解决ie缓存的问题

    当编辑某条数据时,再回过头来进行编辑,会发现,里面的数据和没有编辑以前是一样的,这就是ie缓存的问题,下面是一个不错的解决方法
    2014-08-08
  • 深入理解js中的加载事件

    深入理解js中的加载事件

    提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件。下面跟着小编一起来看下吧
    2017-02-02
  • 纯前端实现发布新版本主动检测更新提醒方案

    纯前端实现发布新版本主动检测更新提醒方案

    快速迭代的软件开发环境中,前端应用的更新频率日益加快,为了确保用户能够享受到最新的功能和修复,开发者需要设计一套高效的更新提醒机制,这篇文章主要介绍了纯前端实现发布新版本主动检测更新提醒的相关资料,需要的朋友可以参考下
    2026-03-03
  • 轻松实现javascript数据双向绑定

    轻松实现javascript数据双向绑定

    这篇文章教大家轻松实现javascript数据双向绑定,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 基于逻辑运算的简单权限系统(实现) JS 版

    基于逻辑运算的简单权限系统(实现) JS 版

    基于逻辑运算的简单权限系统(实现) JS 版...
    2007-03-03

最新评论