小程序的视图与逻辑

页面导航

页面导航值得是页面之间的相互跳转。例如。浏览器中实现页面导航的方式有:

1.<a>链接   2.location.href 

小程序中实现页面导航的两种方式:


声明式导航跳转

声明式点击跳转tabBar页面

值得注意的是,跳转tabBar页面时,一定要添加 open-type属性为switchTab,路径必须以/开头

声明式当点击非跳转到非tabBar页面

值得注意的是,跳转非tabBar页面时,一定要添加 open-type属性为navigate,路径必须以/开头

为了简便,在导航到非tabBar页面时,open-type="navigate"属性可以省略

后退导航

为了简便,如果只是后退了一个层级,delta可以省略,默认就是1

编程式导航跳转

编程式点击跳转tabBar页面

注意url是必填项

编程式点击跳转非tabBar页面

导航传参

声明式导航传参

示例 传输了 name:zs age:20 两个参数

编程式导航传参

示例 传输了 name:ls gender:男 两个参数

在onLoad中接收导航参数 

下拉刷新事件

因为不是所有页面都需要下拉刷新拉取数据 

停止下拉刷新

下拉刷新对count重置为0 ,再关闭下拉刷新

上拉触底事件

小程序的生命周期

 什么是生命周期?

生命周期的分类

什么是生命周期函数?

小程序应用的生命周期函数

注意这是小程序应用的生命周期,共有三个生命周期,写在全局配置里 app.json配置中

小程序页面的生命周期函数

共有五个生命周期函数

onLoad和onReady是比较常用的 onLoad一般用来初始化 onReady用来渲染完成后修改某些操作等。


WXS脚本

1.什么是wxs?

WXS(WeiXin Script)是小程序独有的一套脚本语言,结合WXML,可以构建出页面结构。


2.wxs的应用场景?

wxml中无法调用在页面.js中定义的函数,但是,wxml中可以调用wxs中定义的函数。因为,小程序中的wxs的经典应用场景就是“过滤器”

3.wxs和JavaScript之间的关系*

4.如何使用内嵌wxs脚本?

username通过定义在wxs里的toUpper函数将username转成了大写

定义外联的wxs脚本

wxs代码可以编写在以.wxs为后缀名的文件内,就像JavaScript代码可以编写在以.js为后缀名的文件一样。示例如下:

使用外面的wxs脚本

wxs的注意事项

wxs虽然借鉴了JavaScript的语法特点 但是完全是两个东西。

wxs不能作为组件的事件回调

wxs不能作为组件的事件回调

wxs的隔离性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容