小程序学习之旅----绑定属性，对象，传参，事件冒泡，路由导航，链接跳转

最新推荐文章于 2023-02-02 19:30:20 发布

瑞朋哥

最新推荐文章于 2023-02-02 19:30:20 发布

阅读量125

点赞数

分类专栏：学习笔记文章标签：小程序

本文链接：https://blog.csdn.net/qfxlw/article/details/83347726

版权

学习笔记专栏收录该内容

124 篇文章 0 订阅

订阅专栏

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 () {

  }
})