微信小程序入门笔记2-第一个微信小程序实例-猜数字

什么东西都要从配置开始

我们新创建的项目里pages为啥带了两个子文件夹，index和log？还记得什么文件管理配置的吗？对的，json。我么先找到app.json，看看这里面有啥？

  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

如果我们需要创建一个新的页面page，叫做test咋办？我们加一条test进去。

  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ]

然后我们再到工程目录管理器里面看一眼。

怎么样，惊不惊喜意不意外？多了个test文件夹不说，下面连整套test家族文件都出来了。

然后我们再做点非常重要的事情，因为我们要开发的是猜数字，不是叫WeChat，咋这两下子给张小龙提鞋都轮不到，还是乖乖的换个名字吧，这个非常重要，因为你要永远低调，无论将来走到多高多远。

还是在app.json里。把navigationBarTitleText后面改为猜数字就可以了。然后为了美（shou）观（jian），再改点别的。

  "window":{
    "navigationBarBackgroundColor": "#369",
    "navigationBarTitleText": "猜数字"
  }

如果还想再研究，官方文档里介绍啥的都有。

该干正事了

做一个前端工程，顺序很重要，下一步换做你，要做啥？我的话，我先弄wxml，就是html。这样很直观的我们先把框架做好，以后再干别的。

先在pages文件夹找到index.wxml，然后你要做的是删除这里的所有东西，因为默认工程的hello world，没有参考意义。

写上以下代码。

<view>
  <text>随机生成一百以内数猜大小</text>
</view>
<view>
  <input bindchange="getnumber" id="gnum"></input>
</view>
<button bindtap="caishu">猜一猜</button>
<view>
  <text>结果：</text>
</view>

我们先说说这个wxml也就是html页面，wxml没有html那么复杂，这里的view就是相当于html里的div。在上面代码里第一个view里面我们放了一个文本框text。第二个view里面放了一个输入框input；bindchange是页面响应函数，我们想要输入后得到输入框的值，所以bindchange获取到值后我们做了个getnumber函数，把这个值保存起来；id就是我们给这个输入框命名为gnum。再下一个view我们定义了一个按钮button，button里面有个bindtap页面响应，就是按下后要搞些事情，即要调用caishu这个函数功能。最后我们再定义一个结果，加一个view，加一个text文本框，毕竟猜数游戏我需要知道我猜完是对的吗？

好了，我们crtl+s保存看下效果。

怎么样？是不是丑爆了。那么，我们就要用到wxss，调整下式样。

一个好的程序猿，知道程序的关联越弱越好，所以在调整式样的时候我们尽量不动全局样式表，我们现在修改pages下面index中的index.wxss

/**index.wxss**/
view {
  margin: 50rpx;
}
input {
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button{
  margin: 50rpx;
  color: #fff;
  background: #369;
  letter-spacing: 12rpx;
}

把代码放进去后，再看看效果。是不是看起来顺眼一点了？

这里都有啥？只要是在wxml里面有的组件，view，input，button，你想定义样式，在这里都需要弄一下。

首先一开始没有样式的时候，最难看的是，组件顶着页面的边缘，所以我们在view的式样里加入margin（离页面空白边距），放入margin 50rpx 这里面是上下左右边的空白边距都是50rpx，如果想要指定左侧空白就是margin-left，以此类推。

这个rpx很关键，我们可能知道px是像素，rpx是小程序特有的，针对移动设备定义的像素单位，这个不加详细说明。

另外说一点的是在button按钮的字实在是太挤了，我用letter-spacing: 12rpx;分离了一下。

是时候展现真正的技术了-页面逻辑

我们写的是程序，不是画图画，所以在框架做好后，我们写下程序的核心部分，逻辑操作。

之前，我已经在页面里写了两个重要的东西

• 获取输入框指的响应操作 bindchange=getnumber
• 点按钮后的响应操作 bindtap=caishu

我们需要在index.js里面写逻辑。

const app = getApp()

Page({
  data: {

  },
  onLoad: function () {
 
  },
  getnumber: function(e){
  	console.log('hello')
    console.log(e.detail.value)
  }
})

我们先把代码复制到index.js里面，注意最后我写了个getnumber方法，里面运行了console.log()，这个在开发测试的时候很重要，他就相当于控制台输出，输出log里面的内容。我们想要测试输出的是，一个hello，一个是输入框里输入的内容。我们看下效果。


这样其实输入框的内容我们就拿到了。

然后我们需要做一个方法，把这个值保存下来，以方便之后比较。

  tempNum : 0,
  getnumber: function(e){
    this.tempNum = e.detail.value
    console.log('hello')
    console.log(e.detail.value)
  },

先创建一个变量tempNum，为了以后放输入框的数字，然后我们用e.detail.value获取输入的数字，并把它赋值给tempNum。

接下来我们做随机生成数，100以内的任意数字。

Page({
  caiNumber : Math.floor(Math.random()*100),
  data: {

  },
  onLoad: function () {
 
  },
  getnumber: function(e){
    console.log('hello')
    console.log(e.detail.value)
    console.log('自动生成随机数是：' + this.caiNumber)
  }
})

我们在page页面里面定义了一个变量caiNumber，把它赋值为一个100以内的随机数。

小程序api里面可以用Math.random()直接生成随机数，范围在0-1之间，用java的话说是个long类型的小数。要想获取100的数，我们先把Math.random()*100，然后在用Math.floor四舍五入。

我们再看下结果。

成功！

接下来我们要做的是比较输入的数和这个随机数，怎么比？当然是点猜一猜按钮后比，这样我们就需要定义之前声明的方法caishu

在这之前，我们先在那个空data里面放一个result变量，最后表示比较结果。

  data: {
    result: ''
  },

然后我们写caishu函数

caishu: function(){
    var str = '相等'
    if(this.caiNumber >this.tempNum){
      str = '你猜小了'
    }else if(this.caiNumber <this.tempNum){
      str = '你猜的大了'
    }
    this.setData({result: str})
  },

最后，我们在前端index.wxml里面展示这个结果result，完整代码如下

<!--index.wxml-->
<view>
  <text>随机生成一百以内数猜大小</text>
</view>
<view>
  <input bindchange="getnumber" id="gnum"></input>
</view>
<button bindtap="caishu">猜一猜</button>
<view>
  <text>结果：{{result}}</text>
</view>

运行最终结果

写在最后，为了公平，建议大家把console.log()去掉，因为你在控制台可以看到随机数结果，哈哈哈。