欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序总结

程序员文章站 2022-05-05 22:03:00
...

什么是微信小程序

微信小程序,小程序的一种,英文名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中获取。

相关标签: 小程序