uniapp引入模块化js文件和非模块化js文件的四种方式
作者:佛佛? 发布时间:2024-04-30 10:23:04
标签:uniapp,模块化,js文件,非模块化
方式1:引入普通的js文件,如user.js
1.1、属性和方法都写在一个变量内部
const user={
login:true,
isLogin:function(data){
console.log("展示用户登录信息")
}
}
export default user;
1.2、也可以单独写
function isLogin(data){
? ? console.log("展示用户登录信息")
}
function getMobile(data){
? ? console.log("22222222")
}
?
export default {
? ? isLogin,
? ? getMobile
}
在.vue页面中引用:
<script>
? ? // 绝对路径,@指向项目根目录,在cli项目中@指向src目录
? ? import userfrom '@/common/user.js';
? ? // 相对路径
? ? import user from '../../common/user.js';
?
? ? export default {
? ? ? ? ...
? ? ? ? methods: {
? ? ? ? ? ? test(){
? ? ? ? ? ? ? ? user.isLogin() ?//具体使用
? ? ? ? ? ? }
? ? ? ? }
? ? }
?
</script>
注意
js 文件不支持使用/开头的方式引入
方式2:把user.js放在入口文件main.js中,成为全局方法
import user from './common/user.js';
Vue.prototype.$user = user;
在.vue页面中引用:
<script>
? ? export default {
? ? ? ? ...
? ? ? ? methods: {
? ? ? ? ? ? test(){
? ? ? ? ? ? ? ? this.$user.isLogin()//具体使用
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
方式3:引入第三方的模块化.js文件
如md5.js加密文件,可以放在common文件夹下,当成普通的.js文件引用即可,模块化的通过module.exports暴露出来成为一个对象:
var exports = createMethod();
if (COMMON_JS) {
? ? module.exports = exports;
} else {
? ? root.md5 = exports;
? ? if (AMD) {
? ? ? ? define(function () {
? ? ? ? ? ? return exports;
? ? ? ? });
? ? }
}
在.vue页面中引用:
<script>
? ? import md5 from '../../common/md5.js';
? ? export default {
? ? ? ? ...
? ? ? ? methods: {
? ? ? ? ? ? test(){
? ? ? ? ? ? ? ? let sign = md5(getSignStr(arrKeys, arrValues)).toUpperCase();
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
方式4:uniapp开发的H5,引入第三方的非模块化.js文件
如nomodule.js,就是纯js文件,没有module.exports暴露出来成为一个对象,这种放在common文件夹下,像上面那样引入会提示找不到,这时候应该把该nomodule.js放在static文件夹下,uniapp发行H5时static文件下的内容不编译,在并在入口.html文件中引入全局js,在.vue页面中直接引用就行
4.1、nomodule.js
function isNoModule(data){
? ? console.log("3333333")
}
4.2、 并在入口.html文件中引入全局js
<script charset="utf-8" src="<%= BASE_URL %>static/nomodule.js"></script>
4.3、在.vue页面中引用
<script>
? ? export default {
? ? ? ? ...
? ? ? ? methods: {
? ? ? ? ? ? test(){
? ? ? ? ? ? ? ? isNoModule();
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
来源:https://blog.csdn.net/LzzMandy/article/details/126669128
0
投稿
猜你喜欢
- 图形化验证码生成和验证功能介绍在使用用户名和密码登录功能时,需要填写验证码,验证码是以图形化的方式进行获取和展示的。验证码使用原理验证码的使
- 前言:本人遇到一个需求,需要在MySql的字段中截取一段字符串中的特定字符,类似于正则表达式的截取,苦于没有合适的方法,百度之后终于找到一个
- 前面简单提到了 Python 模拟登录的程序,但是没写清楚,这里再补上一个带注释的 Python 模拟登录的示例程序。简单说一下流程:先用c
- 滤波算子简介ndimage中提供了卷积算法,并且建立在卷积之上,提供了三种边缘检测的滤波方案:prewitt, sobel以及laplace
- 前言MySQL是目前非常流行的数据库之一,也是中小企业持久化存储的首选数据库。不同于我们日常学习,在实际应用中,MySQL服务都会挂载在某台
- 测试平台 Ubuntu 13.04 X86_64 Python 2.7.4花了将近两个小时, 问题主要刚开始没有想到传一个文件对象到线程里面
- 作为胶水语言,Python可以很方便的执行系统命令,Python3中常用的执行操作系统命令有os.system()、os.popen()、s
- 引子: 今天看到别人的一个题目: function fn(x){ x = 10; arguments[0] = 20; console.lo
- 下载了一个小型的记帐软件,发现这个软件数据库用的是access,很想看看它的数据库结构怎样,结果人家加密了。access的解密小case了,
- 发现一个很简单的配置方法,一直想写的没写上,今天抽空就把它给补充完整好了。本文的配置方法Windows,Mac和Linux系统均适合。一.安
- 前言Python中,.whl文件是使用wheel格式存储的一种Python安装包,同时也是一个标准的内置包格式。可以将其看作Python库的
- 1、纯粹的截取字符串function cutstr(thestr1,strlen) dim l,t,c&nbs
- 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想。OOP把对象作为程序的基本单元,一个
- 闭包的定义非常晦涩——闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。
- 在迁移学习finetune时我们通常需要冻结前几层的参数不参与训练,在Pytorch中的实现如下:class Model(nn.Module
- 在Django中有非常强大的URL模块,可以按照开发者的想法来制定清晰的URL,同时支持正则表达式。此外,在URL中还可以传递参数。1.&n
- 类型1:父类和子类的实例变量均不需要传递class A(object): def __init__(self):
- 数组:复制传递(不要按照c/c++的方式去理解,c/c++中数组是引用传递),定长切片:引用传递,底层实现是3个字段 array(数组) +
- 本文整理了3种鼠标经过图片,图片边框加粗或改变颜色的方法,希望大家喜欢。下面3中只是提供了一个方法,具体的鼠标经过图片的样式,你自己可以修改
- 使用php,定义php的默认语言. php.ini中: default_charset = "gb2312" 在网页中输