微信小程序 （3）我的第一个页面：Helloworld

WXML文件

对刚刚的wxml加入以下代码

{{}}里的是js的data里面的数据

bindtap是对button绑定点击事件分别对应的是js里的两个函数

<button bindtap="buttonTest01">点击事件一</button>
<button bindtap="buttonTest02">{{test}}</button>

 

JS文件

在Page中加入这一段，记得把data替换掉

  data: {
test:'触发按钮二'
  },
buttonTest01:function(){
  wx.showToast({
    title: '触发按钮一',
  })
},
buttonTest02:function(){
  var that=this
  wx.showModal({
    title: '提示',
    content: '触发按钮二',
    success: function (res) {
      if (res.confirm) {//点击了确定      
        that.setData({
          test:'刚刚按了确定'
          })
      }
    }
  })
},

       buttonTest01对应第一个按钮，wx.showToast是微信自带函数，会弹出一个消息框，过2秒就关掉，显示的字符不能超过8个（记不清了，看官方文档）

buttonTest02对应第二个按钮，wx.showModal同样是自带函数，点击时弹出消息框，success是指成功弹出就执行啥啥啥，点击确定if (res.confirm){***}，that.setData​​​​​​​就设置更改了data里的数据，前提是data里有这个数据

PS： 在微信里有个坑，记得经常在函数里面指明var that=this，因为当调用一个匿名内部函数，this指代不明

wxss文件

   参考css文档

跳转

将刚刚那个button1更改为以下代码

buttonTest01:function(){
  wx.showToast({
    title: '触发按钮一',
  })
  wx.navigateTo({
    url: '/pages/index/index',
  })
},

点击按钮一时跳转向index页面

  wx.navigateTo跳转到url地址指向的页面，/pages/index/index中有 / 就是绝对地址，没有就是相对地址，这个地址去app.json复制就好，同理在index.js里加入

 backToLast:function(){
    wx.navigateBack({
    })
  }

index.wxml加入

  <button bindtap="backToLast">回去咯  </button>

点击《回去咯》

可以看到回到了上一级页面

wx.navigateBack可以不需要url，如果不填，默认回到上一级页面，填写了回到指定页面

重新运行，我们先点击按钮二，再回过头点击按钮一，会发现

我们原先的页面没有重新加载（刷新），按钮二的文字是按过之后的文字

左上角那个返回箭头和这个函数同理