Page({
data: {
message: 'Hello 小程序!',
obj: {
name: '绑定对象'
},
num: 123,
flag: true,
aid: 12345,
list: ['111', '222', '333'],
listobj: [
{ title: 'aaa' },
{ title: 'bbb' },
{ title: 'ccc' }
],
listobj2: [
{ title: 'aaa', arr: [{ name: 'list1', aid: '1 - 1' }, { name: 'list2', aid: '1 - 2' }] },
{ title: 'bbb', arr: [{ name: 'list1', aid: '2 - 1' }, { name: 'list2', aid: '2 - 2' }] },
{ title: 'ccc', arr: [{ name: 'list1', aid: '3 - 1' }, { name: 'list2', aid: '3 - 2' }] }
]
},
// 微信小程序事件 事件对象 冒泡非冒泡事件
run () {
// 自定义方法可以在生命周期函数里执行，也可在页面中执行
console.log('run')
},
getMsg () {
console.log(this.data.message)
},
setData () {
this.data.message = '改变后的值'
},
// 事件对象
eventFn (e) {
console.log(e)
// 获取自定义属性的值
console.log(e.currentTarget.dataset.aid)
},
// 小程序里面执行方法传值
requestData (aid) {
console.log(aid)
},
requestViewData (event) {
console.log(event.currentTarget.dataset.aid, event)
},
// 事件冒泡和绑定
handleTap1 () {
console.log('handleTap1')
},
handleTap2 () {
console.log('handleTap2')
},
handleTap3 () {
console.log('handleTap3')
},
// 生命周期函数
onLoad: function (options) {
// 页面加载就触发
console.log(options)
this.run()
this.requestData('123rrrrr')
},
onReady: function () {
// Do something when page ready.
},
onShow: function () {
// Do something when page show.
},
onHide: function () {
// Do something when page hide.
},
onUnload: function () {
// Do something when page close.
},
onPullDownRefresh: function () {
// Do something when pull down.
},
onReachBottom: function () {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function () {
// Do something when page scroll
},
onTabItemTap (item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})
<view wx:if="{{flag}}">
<text>
view 当作div
text 当作span
绑定数据--{{message}}
绑定对象--{{obj.name}}
条件判断wx:if='{{flag}}'
</text>
</view>
<view data-aid="{{aid}}">绑定属性：aid</view>
<view class="item" wx:for="{{list}}" wx:key="{{index}}">
列表循环数组{{index}}---{{item}}
</view>
<view class="item" wx:for="{{listobj}}" wx:key="{{index}}">
列表循环数组对象{{index}}---{{item.title}}
</view>
<view class="item" wx:for="{{listobj2}}" wx:key="{{index}}">
列表循环嵌套数组对象{{index}}---{{item.title}}
<view wx:for='{{item.arr}}' wx:key="{{item.aid}}">
{{index}}---{{item.name}}---{{item.aid}}
</view>
</view>
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
<view class="item" wx:for="{{listobj2}}" wx:key="{{index}}" wx:for-item='item'>
列表循环嵌套数组对象{{index}}---{{item.title}}
<view wx:for='{{item.arr}}' wx:for-item='arr' wx:key="{{arr.aid}}">
{{index}}---{{arr.name}}---{{arr.aid}}
</view>
</view>
<button bindtap="run">执行run方法，不需要加括号</button>
<button bindtap="getMsg">执行getMsg方法，获取信息</button>
<button bindtap="setData">执行setData方法，设置信息</button>
<button bindtap="eventFn" data-aid='123'>事件对象</button>
<!--<button bindtap="requestViewData('123456')" >执行方法传值</button> 这种是错误的，不能直接传值-->
<!--通过事件对象来传值-->
<button bindtap="requestViewData" data-aid='123456' data-cid='123aaa'>执行方法传值</button>
<!--事件绑定和冒泡-->
<view id="outer" bindtap="handleTap1">
outer view handleTap1
<view id="middle" catchtap="handleTap2">
middle view handleTap2
<view id="inner" bindtap="handleTap3">
inner view handleTap3
</view>
</view>
</view>
{
"pages": [
"pages/index/index",
"pages/news/news",
"pages/user/user",
"pages/map/map",
"pages/shop/shop"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序学习",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#666",
"selectedColor": "#f60",
"backgroundColor": "#eee",
"borderStyle": "white",
"position": "bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/images/home1.png",
"selectedIconPath": "static/images/home2.png"
},
{
"pagePath": "pages/news/news",
"text": "新闻",
"iconPath": "static/images/news1.png",
"selectedIconPath": "static/images/news2.png"
},
{
"pagePath": "pages/user/user",
"text": "用户",
"iconPath": "static/images/user1.png",
"selectedIconPath": "static/images/user2.png"
}
]
}
}
<!--pages/user/user.wxml-->
<view class="" hover-class="none" hover-stop-propagation="false">
<button bindtap="goShop">点击跳转shop页面</button>
</view>
// pages/user/user.js
Page({
/**
* 页面的初始数据
*/
data: {
},
goShop () {
wx.navigateTo({
url: '../shop/shop'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
