微信小程序开发 2-6 教案-变量和函数的作用域及模块化[5页]

第2章小程序逻辑层

任务2.5 变量和函数的作用域及模块化

console.log('Hello ${name} ! ')

}

function sayGoodbye(name) {

console.log('Goodbye ${name} ! ')

}

module.exports.sayHello = sayHello //推荐使用这种

exports.sayGoodbye = sayGoodbye

页面JS中使用require引用common.js文件，此时就可以调用其中的函数。

//test.js

var common=require('../../utils/common.js') //目前暂时不支持绝对路径地址

Page({

hello: function() {

common.sayHello('2019')

},

goodbye: function() {

common.sayGoodbye('2018')

}

})}

module.exports.sayHello = sayHello //推荐使用这种

exports.sayGoodbye = sayGoodbye

三、实现效果

在app.js文件中定义的变量和函数是全局变量和函数，可以在任何js文件中进行引用。根据案例描述运行结果如下图2.32所示的效果。

图2.32 变量和函数的作用和模块化效果图

四、任务实现

在index.wxml中设置了六个调用变量分别是msg1、msg2 、msg3、msg4、msg5和msg6，这六个变量

需要通过index.js把值渲染到视图层中。通过index.js文件中调用app.js文件，调用index.js 文件本身以及调用util.js文件。变量和函数如图2.33展示了index.wxml、index.js、app.js和utils.js之间的调用关系。

图2.33 index.js、app.js和utils.js之间调用关系图

（1）编写index.wxml文件代码。本文件绑定了msg1~msg6这6个变量，通过在index.js文件中给这6个变量赋值，来演示在index.js文件中引用全局变量和函数、局部变量和函数以及其他模块的变量和函数的方法。文件中使用了view样式来设置文本的大小和行间距。

index.wxml文件：

变量模块化示例

全局变量：{{msg1}}

全局函数：{{msg2}}

本文件变量：{{msg3}}

本文件函数：{{msg4}}

其他模块化变量：{{msg5}}

其他模块化函数：{{msg6}}

（2）编写index.wxss文件代码。该文件定义了box、title和view的样式，用来设置标题大小、文字大小和行间距。index.wxss文件：

/**index.wxss**/

.box{

margin:20rpx;

padding:20rpx;

border:1px solid silver;

}

.title{

font-size:25px;

text-align:center;

margin-bottom:12px;

color:red;