微信小程序基础总结

发表于
  • for循环
1
2
3
4
5
6
<!--open-type 注意需要修改为switchTab-->
<!--wx:key 建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率-->
<!--wx:for-index 指定当前循环项的索引的变量名-->
<navigator wx:for="{{items}}" wx:key="index" wx:for-item="item" wx:for-index="id" url="{{item.url}}" open-type="switchTab">
        <view class="weui-cell__bd" aria-hidden="true" id="js_cell_itl1_bd">{{item.title}}</view>
</navigator>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Page({
  data: {
    items: [{
      	"index": 1
        "url": "/pages/uploader/uploader",
        "title": "运动"
      },
      {
        "index": 2
        "url": "/pages/uploader/uploader",
        "title": "美食"
      }
    ]
  }
});
  • <block> 标签

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在<block>标签上使用wx:if 控制属性

注意：<block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

常用事件

  • bindtap —— 类似于click事件
1
2
3
4
5
<!--事件传参-->
<!--info 会被解析为参数的名字-->
<!--数值 2 会被解析为参数的值-->
<!--用{{}}传的是数字，不用则是字符串-->
<image bindtap="bindViewTap" data-info="{{2}}"  mode="cover"></image>
1
2
3
4
5
6
7
8
Page({
	bindViewTap(event) {
  // 获取data-*的内容
  console.log(event.target.dataset)
  // 如果*为info，则获取.info的内容
  console.log(event.target.dataset.info) 
	}
})
  • bindinput —— 文本框的输入事件
1
<input bindinput="onInput"/>
1
2
3
4
onInput(event) {
  // 变化过后，最新的文本值
  event.detail.value
}
  • bindchange —— 状态改变时触发

页面跳转

  • 声明式导航：在页面上声明一个 <navigator>导航组件,通过点击 <navigator> 组件实现页面跳转

    • 导航到tabBar页面（特殊）
      • url 表示要跳转的页面的地址，必须以 / 开头
      • open-type 表示跳转的方式，必须为 switchTab
    • 后退导航
      • open-type 的值必须是 navigateBack
      • delta 的值必须是数字，表示要后退的层级，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1
    • url可用插值语法，例如：url = "/pages/uploader/uploader?title=&id="

  • 编程式导航：调用小程序的导航 API，实现页面的跳转

    • 导航到tabBar页面
      • wx.switchTab
        • 参数：url, success,fail,complete
    • 导航到非tabBar页面
      • wx.navigateTo
        • 参数：url, success,fail,complete
    • 后退导航
      • wx.navigateBack
        • 参数：delta（默认为1）, success,fail,complete
  • 页面跳转携带参数，用跳转目标页面的onload事件去接收

生命周期函数

  • 应用的生命周期函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})
  • 页面的生命周期函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载，一个页面只调用一次
   * 用的较多
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成，一个页面只调用一次，此时可以和视图层进行交互
   * 用的较多
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

自定义组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// html
<view>{{n1}}+{{n2}}={{sum}}</view>
<button bindtap="addn1">A</button>
<button bindtap="addn2">B</button>
// js
Component({
  data: {
    n1: 0,
    n2: 0,
    sum: 0
  },
  methods: {
    addn1() {
      this.setData({n1:this.data.n1 + 1})
    },
    addn2() {
      this.setData({n2:this.data.n2 + 1})
    }

  },
  observers: {
    // 多个监听对象用逗号分隔
    'n1,n2': function (n1, n2) {
      this.setData({
        sum: n1 + n2
      })
    }
  }
})

组件重要周期函数

  • created：组件实例刚被创建好的时候，created 生命周期函数会被触发， 此时还不能调用 setData，通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

  • 在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发，此时， this.data 已被初始化完毕，这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)

  • 在组件离开页面节点树后， detached 生命周期函数会被触发，退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数 ，此时适合做一些清理性质的工作

组件所在页面的周期函数

生命周期函数 参数 描述
show 无 组件所在的页面被展示时执行
hide 无 组件所在的页面被隐藏时执行
resize Object Size 组件所在的页面尺寸变化时执行 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 组件重要周期函数
lifetimes:{
    created:function(){
    },
    attached:function(){
    },
    detached:function(){
    }
  },
// 组件所在页面的周期函数
pageLifetimes:{
    show:function(){
    },
    hide:function(){
    },
    resize:function(){
    }
  }

插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--组件封装 html-->
<view>
  <slot></slot>
  <view>2</view>
</view>

<!--组件使用 html-->
<my_test>
	<view>1</view>
</my_test>

<!--最后拼装完成的结构-->
<view>
  <view>1</view>
  <view>2</view>
</view>

启用多个插槽

1
2
3
4
5
Component({
  options: {
    multipleSlots: true
  }
})

多个插槽之间用name去区分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--组件封装 html-->
<view>
  <slot name="before"></slot>
  <view>2</view>
  <slot name="after"></slot>
</view>

<!--组件使用 html-->
<my_test>
	<view slot="before">1</view>
  <view slot="after">3</view>
</my_test>

<!--最后拼装完成的结构-->
<view>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

父子组件之间的通信

子向父传值

1
2
3
4
5
6
7
8
<!--父html-->
<my_test bind:a="a">
</my_test>
<view>{{keep}}</view>


<!--子html-->
<button bindtap="add">A</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
// 父js
sync(e) {
    this.setData({
      // 接收子中传递的参数
      keep: e.detail.value
   })
}

// 子js
add() {
   // 将值传递给父中a方法
   this.triggerEvent('a',{value:this.data.n1})
}

父获取子对象

1
2
3
<!--为子组件定义一个class-->
<my_test bind:a="a" class="child"></my_test>
<button bindtap="watchChild">获取子组件对象</button>
1
2
3
4
5
6
watchChild() {
  	// 获取子对象 
    const s = this.selectComponent('.child')
    // 打印子对象的所有属性
    console.log(s.properties)
}
赏个🍗吧
0%