1.17
外部文件引用方式变化
以前通过script src、link href引入外部的js和css;
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
现在是es6的写法, import 引入外部的js模块(注意不是文件)或css;
js要require进来,变成了对象。 在hello uni-app的 common 目录有一个工具类 util.js ,可以在hello uni-app中搜索这个例子查看。hello uni-app示例代码可从 github 获取。
<script>
var util = require('../../../common/util.js'); //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>
而在这个 util.js 里,要把之前的 function 封装为对象的方法
function formatTime(time) {
return time;//这里没写逻辑
}
module.exports = {
formatTime: formatTime
}
当然还有一些高级的用法
// 直接使用js模块的属性。在hello uni-app有示例
var dateUtils = require('../../../common/util.js').dateUtils;
// 将js导入并重命名为echarts,然后使用echarts.来继续执行方法。在hello uni-app有示例
import * as echarts from '/components/echarts/echarts.simple.min.js';
css外部文件导入。全局样式,在根目录下的 app.vue 里写入,每个页面都会加载 app.vue 里的样式。
<style>
@import "./common/uni.css";
.uni-hello-text{
color:#7A7E83;
}
</style>
浙公网安备 33010602011771号