解决SUI Mobile中$.init()报错的问题

最新推荐文章于 2022-01-08 21:15:35 发布

alsa20

最新推荐文章于 2022-01-08 21:15:35 发布

阅读量1.5k

点赞数

文章标签：移动web开发

本文链接：https://blog.csdn.net/m0_37063730/article/details/70990919

版权

本人是第一次使用SUI Mobile框架，在根据文档学习使用时，发现总是报错：$.init is not a function。以为是需要引入JQuery的原因，但是引用JQuery之后发现还是报错，按照JQuery语法修改后仍然不对，后来根据SUI Mobile官网上的实例查看了源代码，认真对比之后发现，报错是由代码中对js的引用位置不对而引起的。

修改错误之前的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- SUI Mobile中的css文件 -->
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
<!-- 自己定义的css文件 -->
<link rel="stylesheet" href="css/login.css">
<!-- jquery的js文件 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 自己定义的js文件 -->
<script src="js/login.js"></script>
</head>
<body>
	<div class="page-group">
		<div class="page">
			<div class="content">
				<div class="list-block">
					<ul>
						<li>
							<div class="item-content">
								<div class="item-media">
									<i class="icon icon-form-name"></i>
								</div>
								<div class="item-inner">
									<div class="item-input">
										<input type="text" placeholder="账号">
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="item-content">
								<div class="item-media">
									<i class="icon icon-form-password"></i>
								</div>
								<div class="item-inner">
									<div class="item-input">
										<input type="password" placeholder="密码">
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="item-content">
								<div class="item-media">
									<i class="icon icon-form-role"></i>
								</div>
								<div class="item-inner">
									<div class="item-input">
										<p>
											&nbsp;<a href="#" class="create-actions">请选择登录角色</a>
										</p>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="col-50">
					<a href="#" class="button button-big button-fill button-success">登录</a>
				</div>
			</div>
		</div>
	</div>
	<!-- SUI Mobile框架用到的js文件 -->
		<script type='text/javascript'
		src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
</body>
</html>

**注意：**在这段代码中，我在<head>元素中引用了jquery-3.2.1.min…js文件，在<body>中引用了zepto.js和sm.js。其实jquery和zepto都是JavaScript库，只不过zepto更加轻量。

此时，浏览器报的错误为：

这里写图片描述

后来在代码中加入了SUI Mobile扩展包的js引用（插入到引用zepto.js的语句之前）:

<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'
		charset='utf-8'></script>

然后报出的错误多了一个：

这里写图片描述

此时，我意识到我对js文件的引用顺序出了错，然后我又打开SUI Mobile官网中的示例，认真比对其源代码之后，将我对js的引用顺序修改为如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- 引用SUI Mobile框架的css文件 -->
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
<!-- 自己定义的css文件 -->
<link rel="stylesheet" href="css/login.css">
<!-- zepto.js的引用 -->
<script src='//g.alicdn.com/sj/lib/zepto/zepto.js'></script>
</head>
<body>
	<div class="page-group">
		<div class="page">
				...（省略页面布局代码）
		</div>
	</div>
	<!-- 引用SUI Mobile框架的js文件 -->
	<script src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js'></script>
	<script
		src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'></script>
	<!-- 自己定义的js文件 -->
	<script src="js/gtms.js"></script>
</body>
</html>

此时，再次打开浏览器，项目可以正常运行且没有报错。

在这段代码中要注意的点为：

对JavaScript库的引用要放在<head>元素中；
对SUI Mobile框架的js文件的引用要放在<body>元素中；
对自己定义的js/css文件的引用一定要放在对框架的引用之后，否则会出错。

以上即是本次使用SUI Mobile框架的一点笔记，希望能帮到大家。

alsa20

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决SUI Mobile中$.init()报错的问题

本人是第一次使用SUI Mobile框架，在根据文档学习使用时，发现总是报错：$.init is not a function。以为是需要引入JQuery的原因，但是引用JQuery之后发现还是报错，按照JQuery语法修改后仍然不对，后来根据SUI Mobile官网上的实例查看了源代码，认真对比之后发现，报错是由代码中对js的引用位置不对而引起的
复制链接

扫一扫