微信小程序部分总结
发布于 3 年前 作者 xiulan31 665 次浏览 来自 分享
//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")
}, 
middlefunction (e) {
    console.log("--middle bindtap click")
},
innerfunction (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():关闭所有页面,再打开某个页面。

回到顶部