第一次写微信小程序,最基础的点击事件demo

312 阅读1分钟

注册wx平台账号,下载专用工具

新建项目之后

详情-本地设置-勾选不校验,后续会用到!

image.png

建立第一个自己的页面并显示

在pages文件夹中新建firstPage文件夹,然后新建page就会自动生成4个文件,其中json文件是用来存放一些信息的。

image.png

image.png

如何显示出自己的第一个页面??

image.png

在app.json中将自己的页面路径移动到最上面

写第一个点击功能

bindTap写点击事件的名字

image.png

点击事件直接写在js里面即可

但是注意写法this.setData

onTap(){
    if(this.data.liuqi.name!="张三"){
      this.setData({
        liuqi: {
          name: "张三",
          age: this.data.liuqi.age,
          skill: "javascript",
        }
      })
    }else{
      this.setData({
        liuqi: {
          name: "刘奇",
          age: this.data.liuqi.age,
          skill: "javascript",
        }
      })

    }
    
  },
  changeAge(){
    this.setData({
      liuqi: {
        name: "刘奇",
        age: this.data.liuqi.age+1,
        skill: "javascript",
      }
    })

  },



如何快速书写底部导航栏tabbar

在app.json中添加tabbar的内容即可

image.png

最后效果

screenshots.gif

图标可以自己去网站下载,然后放在文件夹中,在app.json中关联路径即可