微信小程序学习过程中,需要注意的点

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a250758092/article/details/79966670

1、数据的更新必须用setData({})的形式更改,否则视图和逻辑数据无法保持一致
2、关于页面栈需要注意的是,通过tabBar更改,会将所有页面栈 清除只【留下】新的页面。【重加载】也一样,清理所有页面栈,加载的页面入栈
3、关于wx.navigateto中的url参数,无法跳转到tabBar中的页面!(同样,通过navigator标签实现跳转也是一样,url的路径不能跳转到tabBar中的页面)
4、当前路由,可以使用 page对象的route来获取,所以不用使用getCurrentPages()获取,另外getCurrentPage()已经废弃,使用最新的getCurrentPages(),该方法获得当前页面栈的所有内容并返回一个数组,数组里面的每个obj都是一个page的基本信息数据(路由也是其中之一)
5、app.json的配置文件中,pages属性中的页面必须存在
6、关于tab页面的切换

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):
当前页面 路由后页面 触发的生命周期(按顺序)
A A Nothing happend
A B A.onHide(), B.onLoad(), B.onShow()
A B(再次打开) A.onHide(), B.onShow()
C A C.onUnload(), A.onShow()
C B C.onUnload(), B.onLoad(), B.onShow()
D B D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(从转发进入) A D.onUnload(), A.onLoad(), A.onShow()
D(从转发进入) B D.onUnload(), B.onLoad(), B.onShow()

总结而言,在切换过程中,除了tab页面以外的其他页面,如果切换到其他页面,则它们自身会被销毁,而不是隐藏,而如果是tab页,在已经存在的情况下只会隐藏,而不被销毁。

【疑问】??? 这里与tab的切换页面栈的情况有点不同。tab页面的切换会将页面栈中所有页面出栈,只留下新页面。 那么出栈与 unload的关系是怎样的?出栈意味着销毁吗?
A B(再次打开) A.onHide(), B.onShow() 如果如上所说,那么此处A应该是出栈(销毁),执行onUnload()而不是hide。

7 、模块化,通过module.exports来导出一个模块,再引入的时候可以通过require和import,require暂时不支持绝对路径。一般情况下,都使用相对路径

8、wx:key的用法(可动态更改列表数据的时候使用)

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容, 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

9、捕获和冒泡阶段的关系

事件的捕获阶段
自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bind、capture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中,点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

如果将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

10、函数的event对象属性:target和currentarget的区别

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象。在微信小程序中也可总结为:target指向发生事件的组件,currentTarget指向绑定事件的组件。

11、data-属性问题、

dataset
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

12、.wxs以及 wxs标签 模块化
可以把它想象成一个JS文件,标签以及文件都具有单独的作用域。目前比较好的就是,注册页面的page({})中定义的事件只能用触发的形式形成。而wxs可以通过module这个内置对象直接在wxml文件中的{{}}中调用。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页