开发前准备
- 申请AppID
- 下载开发工具
文件结构
从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
})
}
})