通过学习vue的学习方法来学习微信小程序
1.page
小程序页面
student.js
utils
工具
app.js 小程序(总体)
app.json 全局配置
app.wxml
app.wxss
2.page的配置信息
Page({
data:{},
foo(){},
bar(){},
onload(){},
onReady(){},
onShow(){},
onHide(){},
onUnload(){}
})
3.小程序的数据渲染
数据维护到js --> wxml
1)双大括号
{{name}}
2)列表渲染
wx:for = “{{}}” wx:for-item="stu"wx:for-index=“i” wx:key=“id”
{{item.name}} {{stu.name}}
{{index}} {{i}}
3)条件渲染
wx:if="{{}}"
4)事件绑定机制
Pages:({
data:{},
tabHandler(event){
let id = event.target.dataset.id
let name = event.target.dataset.name
}
})
5)双向数据绑定
<input model:name:"{{name}}"/>
6)页面的生命周期
onLoad
一个页面只会调用一次
onShow
可能会调用多次,页面显示
onReady
一个页面只会调用一次
onHide
可能会调用多次,页面隐藏
onUnload
也i按卸载时触发,如wx.readirectTo或wx.navigateBack到其他页面时
7)ajax
wx.request…
8)编程修改data值
与vue不同,vue可以直接通过vue的实例对象来访问data中声明的方法,但是在小程序中,
只能通过this.setData来访问
this.setData({
key:val
})
4.小程序导航
1.tabbar(app)
2.跳转
wx.rediractTo
重定向到某个页面,关闭当前页面
wx.navigateTo
导航到某个页面,不关闭当前页面