微信小程序总结
什么是微信小程序
微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
https://mp.weixin.qq.com/cgi-bin/wx
核心文件:app.json、app.js、pages文件夹
app.js中是app的生命周期的方法(输入App会自动提示补全)
app.json文件是一个json格式的文件{key:value},里面是pages、windows、tabBar、networkTimeout等的相关配置信息
要想快速生成一个页面,直接在pages里添加(前提是有pages文件夹,有app.js文件)
“pages”: [
“pages/index/index”
]
保存之后,系统会帮你自动生成对应的文件夹及子目录
常用控件:
<swiper>
<swiper-item>
<image src=""></image>
</swiper-item>
</swiper>
页面生命周期
页面的生命周期,这个比较重要,大家可以看下理解下。
看下逻辑层需要注意的。除了页面的生命周期,还有页面的监听事件。onPullDownRefresh():监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onReachBottom():监听用户上拉触底事件。
可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance,默认为50px。
在触发距离内滑动期间,本事件只会被触发一次。
onPageScroll(Object):监听用户滑动页面事件。
onShareAppMessage(Object):
监听用户点击页面内转发按钮( 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。
注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮。
onTabItemTap(Object):点击 tab 时触发。
Page.prototype.setData(Object data, Function callback):setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value。
其中 key 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。
注意:
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题
路由跳转
wx.navigateTo:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。注意:目前页面路径最多只能十层。
wx.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。如果你想让页面没有返回按钮,不能返回的话,就用这个跳转方式吧。
wx.reLaunch(OBJECT):关闭所有页面,打开到应用内的某个页面。
wx.switchTab(OBJECT):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
wx.navigateBack(OBJECT):关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
注意:
1、navigateTo, redirectTo 只能打开非 tabBar 页面。
2、switchTab 只能打开 tabBar 页面。
3、reLaunch 可以打开任意页面。
4、页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
5、调用页面路由带的参数可以在目标页面的onLoad中获取。
上一篇: 深入理解JavaScript事件循环机制
下一篇: 微信小程序的开发总结