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

标签: 微信小程序
10人阅读 评论(0) 收藏 举报
分类:

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文件中的{{}}中调用。

查看评论

零基础学习微信小程序

-
  • 1970年01月01日 08:00

开发微信小程序的步骤有哪些?

    几年前,微信的公众号好多人不屑一顾,等看到很多公众账号赚的盆满钵满时才发现错过了商机。现在微信的小程序也算是初露头角,而很多人已经开始发现了其中的捷径与商机。可有些人还不知道如何入门。其实微信...
  • qq_42010885
  • qq_42010885
  • 2018-04-17 15:14:10
  • 34

微信小程序更新机制

1)小程序的启动方式: 冷启动----小程序首次打开或销毁后再次被打开 热启动----小程序打开后,在一段时间内(目前:5分钟)再次被打开,此时会将后台的小程序切换到前台。2)根据以上两种启动...
  • rolan1993
  • rolan1993
  • 2018-04-09 11:13:42
  • 350

<em>更新微信小程序</em>模板的demo

上次上传了个<em>微信小程序</em>的消息模板,有人反馈叫<em>更新</em>,这次重新整理,<em>更新</em>了代码... 上次上传了个<em>微信小程序</em>的消息模板,有人反馈叫<em>更新</em>,这次重新整理,<em>更新</em>了代码 ...
  • 2018年04月16日 00:00

微信小程序最新更新--api测试一览

昨天微信又是在夜里放出了更新,为了第一波了解最新的Api, 今天花时间来一个个测试运行看看, 具体更新详情,点这里去看吧!微信3月28日更新 一:基础库 1.wx.chooseAddress  获取收...
  • qq_32067045
  • qq_32067045
  • 2017-03-29 15:25:31
  • 8077

微信小程序更新--测试API之蓝牙

接着上一篇来继续测:微信小程序蓝牙的API每个测试了一下发现跟以前的写Android的蓝牙调取是一样的,打开流程:先打开蓝牙的适配器,然后确定下本机的蓝牙状态,然后开始搜索蓝牙,搜索完成以后关闭搜索。...
  • qq_32067045
  • qq_32067045
  • 2017-03-29 17:30:50
  • 17001

微信小程序--部分内容记录(持续更新...)

1、背景图片填充全部 在app,wxss中加入page{height:100%} 2、尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rp...
  • qq_29984105
  • qq_29984105
  • 2017-07-18 17:20:45
  • 166

<em>微信小程序</em>离线开发手册CHM版-<em>更新</em>于10月20日

<em>微信小程序</em>开发手册官网同步离线版,<em>更新</em>于2016年10月20日。综合评分:4 收藏(1)评论(3)举报 所需: 5积分/C币 下载个数: 72 开通VIP 立即下载 ...
  • 2018年04月13日 00:00

微信小程序联盟:官方文档+精品教程+demo集合(未完待续,持续更新中……)

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/deb...
  • rolan1993
  • rolan1993
  • 2017-05-31 17:26:38
  • 2641

微信小程序持续更新--汇总

暂时这里一直汇总小程序资源: 打算 养肥在看 (重点--打架不在招式,要的就是一招致命)  关注github更新地址: https://github.com/justjavac/awesome-wec...
  • baidu_33033415
  • baidu_33033415
  • 2017-03-17 10:21:28
  • 187
    个人资料
    持之以恒
    等级:
    访问量: 23万+
    积分: 3015
    排名: 1万+
    最新评论