本人是第一次使用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>
<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框架的一点笔记,希望能帮到大家。