小程序开发

开发前准备

1. 申请AppID
2. 下载开发工具

文件结构

从0创建项目

目录格式：创建pages文件夹，里面再创建home和about文件夹

//app.json
{
	"pages": [
		//注册才会显示页面
		"home"
	]
}

//home.json 创建完后要有一个空对象
{
}

//home.js 创建完后要有一个空对象
Page({
})

数据绑定

<!--index.wxml-->
<view>我的名字：{{name}}</view>

//index.js
Page({
  data: {
    name: '踢踢'
  }
})

列表展示

<!--index.wxml-->
<!--小程序内部循环的时候会自动生成一个变量item，wx:for等号后面需要加{{}}，不然会把它当成字符串去循环遍历，在wxl里面要想使用变量必须要使用{{}}语法-->
<view wx:for="{{students}}">{{item.id}} -- {{item.name}} -- {{item.age}}</view>

//index.js
Page({
  data: {
    students: [
      {id:110, name: 'kobe', age: 20},
      {id:111, name: 'james', age: 30},
      {id:112, name: 'why', age: 40}
    ]
  }
})

事件监听改变data

<!--index.wxml-->
<view>当前数字：{{counter}}</view>
<button size="mini" bindtap="handerBtnClick">+</button>

//index.js
Page({
  data: {
    counter:0
  },
  handerBtnClick(){
    this.setData({
      counter: this.data.counter +1
    })
  }
})

事件监听改变data