input js赋值 text_【我们的第一个微信小程序】第三篇：小程序的js大脑

在上一篇文章里我们已经实现了“猜猜我是几？”的界面，接下来我们就要实现这个程序的实际操作了。我们之前在浏览器的控制台里实现这个程序就是完全用的js代码，这次也一样，所有操作都会用js来写，而且基本逻辑也和原来一样。只是会有一点不同，那就是原来的程序中，我们是用alert()和prompt()这样的浏览器内置函数弹出对话框来作为交互界面的，这次我们要换成让js代码操作我们之前写的小程序图形界面了。

我们先来看看之前在浏览器控制台里实现的最后一个版本的“猜猜我是几？”代码：

var members = ['小明', '小红', '小蓝', '小黑'];
var score = {};
for (var i = 0; i < members.length; ++i) {
  score[members[i]] = 0;
}

var i = 0;
for (;;) {
  var n = Math.ceil(Math.random() * 100);
  var input;
  for (;;) {
    var index = i % members.length;
    input = prompt(members[index] + "，猜猜我是几？");
    if (input == null) {
      break;
    }

    input = Number(input);
    if (isNaN(input)) {
        // 输入的不是数字
        alert("你输入的数字格式不正确，请重新输入");
        continue;
    } else {
        // 输入的不是数字时再给一次猜数字的机会
        // 如果输入的是数字，那么下一次就轮到下一个人猜了
        i = i + 1;
    }

    if (n > input) {
      alert("我大于" + input);
    } else if (n < input) {
      alert("我小于" + input);
    } else {
      alert(members[index] + "，你猜对啦！我是" + n);
      score[members[index]] += 1;
      var str = "得分榜：n";
      for (var j = 0; j < members.length; j=j+1) {
          str = str + members[j] + "得分: " + score[members[j]] + "n";
      }
      alert(str);
      break;
    }
  }

  if (input == null) {
    break;
  }
}

接下来，我们就逐步地把这个js程序迁移到微信小程序的index.js文件里，完成一个小程序版的“猜猜我是几？”。

要做到这一点，我们只需要完成三个部分：

1. 在点击“确定”按钮时，获取文本输入框里输入的数字
2. 然后根据上面完整版的js代码的运行逻辑判断猜数字的结果
3. 最后根据结果修改<text>标签中的文本提示内容

小程序中的js文件

我们知道每个页面都有四个文件，后缀分别是wxml、wxss、json和js。我们在上一次画出小程序版“猜猜我是几？”的画面时已经用到了wxml和wxss两种文件，其中wxml用来定义界面上会出现的元素，而wxss可以调整wxml中元素的位置和样式让界面变得更好看。

那么js文件在页面上可以起什么作用呢？

js和我们之前写的代码功能基本一样，就是用来控制程序的行为的。比如我们在“猜猜我是几？”中就需要在用户输入数字并点击“确定”按钮之后给用户对应的提示。为了做到这一点，我们可以在用户点击“确定”按钮之后改变显示“猜猜我是几？”的<text>标签中的内容。

那么我们要如何做到改变<text>标签里显示的内容呢？

目前显示在<text>标签中的内容是我们写死在.wxml文件里的，为了能够修改它，我们就要把标签中的值和js代码绑定起来。

首先，我们要把<text>标签体里写死的"猜猜我是几？"字符串改成一个变量：

在.wxml文件里，可以用两个大括号{{ }}中间写上一个变量名来表示使用一个变量的值。那我们要怎么设置这个变量的值呢？

这时候就轮到我们的js文件登场了，在js文件里我们可以用代码修改变量tip的值，然后页面上就会出现对应的变化了。

页面刷新以后界面上显示的文本就会变成"Hello World"，我们来看看js代码里的每一个部分都代表了什么意思：

Page({
  onLoad: function () {
    this.setData({
      motto: 'Hello World',
      tip: 'Hello World'
    });
  }
})

代码中调用了一个Page(...)函数，Page在英语里就是页面的意思，这个函数就代表创建了我们看到的页面。这个函数的入参是一个用大括号{}包围起来的KV映射（map），里面只有一个值onLoad，并且这个值是一个函数。

这里的onLoad函数会在页面加载的时候被自动调用，这种在特定条件下（比如特定的事件发生时）被自动调用的函数就被叫做回调函数。

Page对象上更多的回调函数可以在下面这份文档中找到： https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

当onLoad函数被调用以后，那函数体里的代码就会被执行，在上面的代码里，onLoad函数体中是如下的代码片段：

this.setData({
  motto: 'Hello World',
  tip: 'Hello World'
});

this是js中的一个特殊关键字，它代表的是这个函数所在的对象，那么因为onLoad是Page对象上的函数，所以this指向的也就是代表页面的Page对象了。Page对象是小程序本身定义的，所以里面已经有了一些定义好的函数。比如这里我们就用了Page对象里的setData函数来更新页面里使用的变量的值，传入这个函数的是一个KV映射(map)，其中的key就是变量名，value就是我们想要保存到变量中的值。

一旦我们调用完this.setData函数，我们传入的变量值就会生效，页面就会相应地发生改变。比如在上面的代码中我们把页面中的tip变量设置为了"Hello World"，所以页面上显示在数字输入框上面的文字就成了"Hello World"。

接下来我们就把这两段代码输入到我们的小程序开发工具里，来看一下效果。

index.wxml

<text>{{ tip }}</text>

index.js

Page({
  onLoad: function () {
    this.setData({
      motto: 'Hello World',
      tip: 'Hello World'
    });
  }
})