//App.json:全局配置
"pages": [ //放在第一位置的页面为首页
"pages/index/index",
"pages/service/service",
"pages/logs/logs",
"pages/message/message"
],
"window": {//全局窗口样式
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "爱迷彩",//指定标题文字,优先级低于每个页面的局部样式
"navigationBarTextStyle": "black"
},
"tabBar": {//底部导航条
"color": "#999",
"selectedColor": "#3D98FF",
"backgroundColor": "#fff",
"borderStyle": "white",
"list": [//指定导航条列表
{
"selectedIconPath": "pages/imag/home_selected.png",//指定选中菜单的图标地址
"iconPath": "pages/imag/home.png",//菜单图标地址
"pagePath": "pages/index/index",//菜单所要跳转的页面
"text": "首页"//菜单文字
},
{
"selectedIconPath": "pages/imag/message_selected.png",
"iconPath": "pages/imag/message.png",
"pagePath": "pages/message/message",
"text": "消息"
},
{
"selectedIconPath": "pages/imag/service_selected.png",
"iconPath": "pages/imag/service.png",
"pagePath": "pages/service/service",
"text": "服务"
}
]
}
//wx:for="{{node}}"遍历js中的数据,将数据进行渲染填充
bindtap和catchtap
首先两个属性都是绑定点击事件,组件点击之后可以出发点击函数,函数会接受一个参数e,里面存储了函数调用时的上下文信息,不同点是bindtap是冒泡的,catchtap是非冒泡的,那么冒泡和非冒泡是什么含义?请看下图:
<view id="view_3" bindtap="out">
outer view
<view id="view_2" bindtap="middle">
middle view
<view id="view_1" bindtap="inner">
inner view
</view>
</view>
</view>
js代码如下:
out:function(e){
console.log("--out bindtap click")
},
middle: function (e) {
console.log("--middle bindtap click")
},
inner: function (e) {
console.log("--inner bindtap click")
}
点击view_3会打印一条:--out bindtap click
点击view_2会打印两条:--middle bindtap click --out bindtap click
点击view_1会打印三条:–inner bindtap click --middle bindtap click --out bindtap click
点击最里面会触发所有的点击时间,相当于冒泡一样,一直到最外层。
如果将view_2的bindtap换程catchtap,则如下:
点击view_3会打印一条:--out bindtap click
点击view_2会打印两条:--middle bindtap click 不会再触发上级的点击事件
点击view_1会打印三条:--inner bindtap click --middle bindtap click 不会到达第三层
wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别:
wx.navigateTo():保留当前页面,跳转到某个页面,但是不能跳转到tabbar页面。
wx.redirectTo():关闭当前页面,跳转到某个页面,但是不能跳转到tabbar页面。
wx.switchTab():跳转到abBar页面,并关闭其他所有非tabBar页面。
wx.navigateBack():关闭当前页,返回上一页或多页,可以通过getCurrentPages()获取当前页的页面栈,决定需要返回几层。
wx.reLaunch():关闭所有页面,再打开某个页面。