微信小程序学习笔记（3）

写在前面：

本文仅用于记录自己的学习经过和转载一些资料

本文所有练习和实例均使用vscode和微信官方的微信开发者工具共同完成，vscode仅用于编译代码。某些功能如即时模拟，实际上要使用微信官方工具才得以实现。

要达成代码同步，仅需要使用vscode和微信工具同时打开一个项目即可。

---

四、事件绑定

        使用关键字bind进行处理。

        举例，一个会同步显示内容的输入框(input)：

        （1）先创建一个input标签，并为他使用bindinput（当产生输入时触发事件）来绑定一个事件：

<input type="text" bindinput="output" />

        （2）在js文件中创建事件“output”，并载入page中：

Page({
    output(e){
        console.log(腾讯大sb);
    }
});

        此时我们便绑定了一个简单的事件：

输入时便会打印相关信息

         类似上述的bindinput的，关于bind的应用和相关关键字，类似bindtap（点击后触发）之类的事件可以在微信官方的这里进行查看和查找，有关表单组件和关键字，此处不赘述。

        （3）在上述方法bindinput中，绑定的方法获得的参是整个input组件的属性值（设为e），用console.log可以看出获得的参数：

控制台的输出值

                 可以看出输入的值“things”是该组件的detail.value，故该值的位置为e.detail.value。

        （4）将获取的值赋给一个新对象（num）并将其载入data。

this.setData({
    num:e.detail.value
})

                此处注意：

                这里和React一样的写法但和vue不一样。不能使用this.data.num = e.detail.value 和 this.num = e.detail.value两种写法。

        （5）完成绑定后在wxml界面将赋值的num放出来就可以完成需求了。

完成

---

         *注意：在小程序事件中不能直接传参。

        举个例子，在上述需求的基础上，我需要两个按钮来实现对输入数加1减1的需求：

<button bindtap="tap(1)">+</button>
<button bindtap="tap(-1)">-</button>

        此处我创建了两个按钮，并因为希望节约时间，通过只创建一个方法，传入不同参数来达成分别实现加减需求的目的，但这种语法是不被小程序接受的，这会让编译器自动寻找“tap(1)”与“tap(-1)”两个方法而不是寻找“tap()”方法并分别传参1与-1。

控制台报错找不到方法 

        那如果我非要节约大脑，一定要仅写一个方法就完成需求呢？也可以：间接传参。需要非常脱裤子放屁的在标签中添加值，data-operation（自定义属性），并在js界面重复上述（获得输入的值）操作来获取参数：

<button bindtap="tap" data-operation="{{1}}">+</button>
<button bindtap="tap" data-operation="{{-1}}">-</button>

别忘了标签定义时要用"{{}}"

        并在js文件中用相同方法获取data-operation：

        首先，同样的，可以先通过console.log来找到该值位于e.currentTarget.dataset.operation：

        其次，在js文件中创建方法，实现加减法。

tap(e){
    const num1 = e.currentTarget.dataset.operation * 1;
    //获取加减按钮传入的参
    this.setData({
        num : this.data.num * 1 + num1
    })
    //实现加减法
}

        *特别注意：此处input获取到的值默认为String字符串类型！当你希望实现加减法时，一定要记得转换数据类型，可以用Number()或直接用数值*1强制改变数据类型。

加减法实现

 

之前读取输入框的功能也没有覆盖，随时可以更改