对于基本页面组成部分的认识
”pages“存放页面的数组”pages/index/index“ ->index文件目录下的index页面
”pages “数组中排行第一位的是默认首页
对小程序来说 app.js和app.json文件是必须的
对小程序的页面来说.js和.wxml是必须的
创建页面
app.json中“pages”
"pages":[
"pages/home/home",
"pages/my/my"
],
app.json中window窗口
"window":{
"backgroundTextStyle":"dark",
"backgroundColor": "#fff",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
}
"backgroundTextStyle":"dark",向下刷新后小圆点颜色 dark/light
"backgroundColor": "#fff",向下刷新背景颜色
"navigationBarBackgroundColor": "#fff",顶部窗口颜色
"enablePullDownRefresh": true//是否支持向下刷新
app.json中tabBar底部导航栏
tabBar中跳转到页面在【pages】一定要靠前放置
"tabBar": {
"list": [{
"pagePath": "pages/home/home",//跳转的页面路径
"text": "home",//底部显示的名称
"iconPath": "iconPath",//icon图标路径
"selectedIconPath": "selectedIconPath"//按住以后icon图标路径
}, {
"pagePath": "pages/myself/myself",
"text": "myself",
"iconPath": "iconPath",
"selectedIconPath": "selectedIconPath"
}
]
}
页面定义数据
【home.js】中【data】
data: {
info:'good',
arry1:[{msg:'1'},{msg:'2'}]
},
info 字符串数据
arry1数组名称
数据绑定
把【home.js】data里面的数据名称绑定到页面中,在【wxml】渲染利用Mustache语法(双大括号)
给内容节点、属性节点动态绑定数据
<!--1.用在内容节点-->
<view>{{message}} </view>
<!--2.用在属性节点-->
<view id = "item-{{id}}"> </view>
<!--3.三元运算-->
<view>{{ falg ? ‘条件为真’ : '条件为假'}}</view>
<!--4.输出字符串,条件为真在>
绑定事件
【button】
<button type="primary" bind:tap='btnHandler1'>按钮</button>
primary 是让按钮颜色与微信的主题一致,就是绿色
【bind:tap】单击事件 ' '中写的是方法名称,在【js】文件中与【date】同级 写 事件【function】
btnHandler1: function() {
console.log('你好')
},
单击后会让【你好】在内部显示
setData
利用这个函数实现数据的修改
在【js】文件中与【date】同级 写 事件【function】
id修改为v2
btnHandler1: function() {
console.log('你好'),
this.setData({id:'v2'})
},
利用!让【data】中布尔类型数据【boo】取反
btnHandler1: function() {
console.log('你好'),
this.setData({
boo:!this.data.boo
})
},
for循环
【wxml】
利用【view】实现上文中已经定义的数组的输出
<view wx:for = "{{array1}}" wx:key="index">
索引是:{{index}} ---对应的值是:{{item.msg}}
</view>