微信小程序第六次课（模块化和绑定事件）

模块化

1.首先 我们在utils里面创建一个新的js文件

2.新的js文件里面写我们要实现的函数功能  

3.把新的函数功能  通过 module.export.对外公开文件名 =新文件名  的方式把之前的函数公开到其他他模块                             （类似于public  让别的模块可以访问到新的函数）

function sayHello(name ){// console.log("hello liming")//根据不同的信息 输出信息  console.log("hello "+ name)//可以使用对象类型 来传递多个信息
}//定义好功能了  把函数开放出去 使用以下代码
//右边为当前函数名   左边的是开放出去的文件名
module.exports.Hello =sayHello

4.打开要实现功能的wxml文件 添加一个按钮 绑定任意函数名

<button bind:tap="welcome">Hello</button>

5.打开对应的js文件 把微信wxml文件里面的新函数 定义在js文件

6.调用 util里面的新函数 先申请一下使用权限  在require方法里面写文件路径

     var com = require("../../utils/tool")  最后使用 com 调用tool里面的函数

 //调用 util里面的Hello 先申请一下使用权限  在require方法里面写文件路径welcome(){//申请var com = require("../../utils/tool")//调用com.Hello("Gao");},

绑定事件

例题一  点击按钮修改文字颜色 

1. 在对应的wxss文件中  设置文字的样式

.color1{color: aqua;font-size: larger;
}
.color2{color: blueviolet;font-size: xx-large;}

2.在wxml文件中  绑定文字样式  通过{{变量值}}

<button bind:tap="colorchange">修改颜色</button>
<view class="{{color}}}"> 修改文字的颜色</view>

3.在js文件中的 data里面 声明color变量 设置一个默认值

//4. 定义一个函数 点击按钮  color1->color2  color2->color1
colorchange(){if(this.data.color === "color1")this.setData({color:"color2"})else{this.setData({color:"color1"})} },

例题二  点击按钮 隐藏文字 的两种方式

1.在wxml文件中  绑定文字样式  通过{{变量值}}

<!-- 因为是字符串类型 空串才会错误  所以必须加上大括号 -->
<view wx:if="{{show}}">文字的显示和隐藏</view>
<button bind:tap="fontChange">显示/隐藏</button><!-- 通过 hidden来隐藏  -->
<view hidden="{{show?false:true}}">通过hidden来显示或隐藏</view>

2.在js文件中 data中声明变量 show 

3.在js文件中写一个函数绑定 view

  colorchange(){if(this.data.color === "color1")this.setData({color:"color2"})else{this.setData({color:"color1"})} },