怎么在网站上做360全景图片,高端品牌网站建设方案,工作室名字创意好听,谷歌网页文章目录 视图与逻辑一、页面导航1、页面导航 - 声明式导航1.1 导航到tabBar页面1.2 导航到非tabBar页面1.3 后退导航 2、页面导航 - 编程式导航2.1 导航到tabBar页面2.2 导航到非tabBar页面2.3 后退导航 3、页面导航 - 导航传参3.1 声明式导航传参3.2 编程式导航传参3.3 在 on… 文章目录 视图与逻辑一、页面导航1、页面导航 - 声明式导航1.1 导航到tabBar页面1.2 导航到非tabBar页面1.3 后退导航 2、页面导航 - 编程式导航2.1 导航到tabBar页面2.2 导航到非tabBar页面2.3 后退导航 3、页面导航 - 导航传参3.1 声明式导航传参3.2 编程式导航传参3.3 在 onLoad 中接收导航参数 二、页面事件1、页面事件 - 下拉刷新事件1.1 什么是下拉刷新1.2 启用下拉刷新1.3 配置下拉刷新窗口的样式1.4 监听页面的下拉刷新事件1.5 停止下拉刷新的效果 2、页面事件 - 上拉触底事件2.1 什么是上拉触底2.2 监听页面的上拉触底事件2.3 配置上拉触底距离 三、生命周期1、什么是生命周期2、生命周期的分类3、什么是生命周期函数4、生命周期函数的分类4.1 应用生命周期函数4.2 页面生命周期函数 5、应用的生命周期函数6、页面的生命周期函数 四、WXS脚本1、WXS 脚本 - 概述1.1 什么是 wxs1.2 wxs 的应用场景1.3 wxs 和 JavaScript 的关系* 2、WXS 脚本 - 基础语法2.1 内嵌 wxs 脚本2.2 定义外联的 wxs 脚本2.3 使用外联的 wxs 脚本 3、WXS 脚本 - WXS 的特点3.1 与 JavaScript 不同3.2 不能作为组件的事件回调3.3 隔离性3.4 性能好 视图与逻辑
一、页面导航
什么是页面导航
在小程序开发中页面导航是指在不同页面之间进行切换的过程。通过页面导航用户可以在小程序中流畅地浏览不同的内容和功能模块。
小程序中实现页面导航的两种方式
在小程序中实现页面导航有两种主要方式声明式导航和编程式导航。
1、页面导航 - 声明式导航
声明式导航是通过在页面的配置中声明导航信息来实现的开发者只需在页面的配置文件中定义导航相关的信息小程序框架会自动处理导航逻辑。
1.1 导航到tabBar页面
在声明式导航中可以通过使用 navigator 组件来实现导航到tabBar页面使用 open-typeswitchTab 来切换到底部导航栏的页面。
!-- pageA.wxml --
navigator url/pages/tab1/index open-typeswitchTab导航到Tab 1页面/navigator1.2 导航到非tabBar页面
同样在声明式导航中可以使用 navigator 组件来导航到非tabBar页面。
!-- pageB.wxml --
navigator url/pages/otherPage/index导航到其他页面/navigator1.3 后退导航
声明式导航也支持后退导航用户可以通过系统的返回按钮或手势返回上一页面。
!-- pageC.wxml --
navigator open-typenavigateBack后退导航/navigator2、页面导航 - 编程式导航
编程式导航是通过调用小程序框架提供的API来实现页面导航开发者可以在代码中灵活控制导航逻辑。
2.1 导航到tabBar页面
与声明式导航类似编程式导航也允许开发者通过调用API导航到tabBar页面。
// pageA.js
wx.switchTab({url: /pages/tab1/index
});2.2 导航到非tabBar页面
编程式导航同样支持导航到非tabBar页面开发者可以在代码中指定跳转的页面路径。
// pageB.js
wx.navigateTo({url: /pages/otherPage/index
});2.3 后退导航
通过编程式导航开发者可以实现更精细的后退导航控制例如在特定条件下执行后退操作。
// pageC.js
wx.navigateBack({delta: 1
});3、页面导航 - 导航传参
在开发过程中有时候需要在不同页面之间传递参数。页面导航支持导航传参分为声明式导航和编程式导航两种方式。
3.1 声明式导航传参
通过在页面路径中配置参数实现声明式导航时可以传递参数给目标页面。
!-- pageD.wxml --
navigator url/pages/paramPage/index?param1value1param2value2带参数导航/navigator3.2 编程式导航传参
在编程式导航中开发者可以通过API调用传递参数给目标页面。
// pageE.js
wx.navigateTo({url: /pages/paramPage/index?param1value1param2value2
});3.3 在 onLoad 中接收导航参数
在目标页面的 onLoad 生命周期中可以通过获取参数对象来获取传递过来的导航参数。
// paramPage.js
Page({onLoad: function(options) {console.log(options.param1); // 输出: value1console.log(options.param2); // 输出: value2}
});以上是关于小程序中页面导航的基本介绍下一节将深入讨论页面事件的处理方式。
二、页面事件
1、页面事件 - 下拉刷新事件
1.1 什么是下拉刷新
下拉刷新是一种用户在页面顶部向下滑动时触发的事件通常用于实现页面的数据更新或重新加载。
1.2 启用下拉刷新
要启用下拉刷新功能需要在页面配置文件中设置 enablePullDownRefresh 为 true。
// pageA.json
{navigationBarTitleText: Page A,enablePullDownRefresh: true
}除了在页面配置中开启全局下拉刷新还可以在页面中使用 scroll-view 组件实现局部的下拉刷新。在 scroll-view 组件中设置 bindscrolltoupper 事件监听滚动到顶部时触发的下拉刷新。
!-- pageB.wxml --
scroll-view bindscrolltoupperonPullDownRefresh styleheight: 100vh;!-- 页面内容 --
/scroll-view1.3 配置下拉刷新窗口的样式
可以通过在页面配置中设置 backgroundTextStyle 和 backgroundColor 来配置下拉刷新窗口的样式。
// pageA.json
{navigationBarTitleText: Page A,enablePullDownRefresh: true,backgroundTextStyle: dark,backgroundColor: #f8f8f8
}1.4 监听页面的下拉刷新事件
在页面的逻辑文件中通过监听页面的 onPullDownRefresh 事件来监听下拉刷新的操作。
// pageA.js
Page({onPullDownRefresh: function() {// 执行下拉刷新的逻辑console.log(下拉刷新事件触发);}
});1.5 停止下拉刷新的效果
在下拉刷新的逻辑执行完毕后需要调用 wx.stopPullDownRefresh() 来停止下拉刷新的效果。
// pageA.js
Page({onPullDownRefresh: function() {// 执行下拉刷新的逻辑console.log(下拉刷新事件触发);// 停止下拉刷新的效果wx.stopPullDownRefresh();}
});2、页面事件 - 上拉触底事件
2.1 什么是上拉触底
上拉触底是一种用户在页面底部向上滑动时触发的事件通常用于实现分页加载更多数据。
2.2 监听页面的上拉触底事件
在页面的逻辑文件中通过监听页面的 onReachBottom 事件来监听上拉触底的操作。
// pageA.js
Page({onReachBottom: function() {// 执行上拉触底的逻辑console.log(上拉触底事件触发);}
});2.3 配置上拉触底距离
可以通过在页面配置中设置 onReachBottomDistance 来配置上拉触底的距离即当距离底部指定距离时触发上拉触底事件。
// pageA.json
{navigationBarTitleText: Page A,onReachBottomDistance: 50
}以上是关于小程序中页面事件的详细介绍全局和局部下拉刷新的使用方式以及上拉触底事件的监听和配置。下一节将讨论页面的生命周期。
三、生命周期
1、什么是生命周期
生命周期是指一个小程序从被创建到被销毁的整个过程。在这个过程中小程序会经历不同的阶段和事件开发者可以通过生命周期函数来执行相应的逻辑操作。
2、生命周期的分类
小程序的生命周期可以分为两类应用生命周期和页面生命周期。 应用生命周期 小程序整体的生命周期包括小程序的启动、前台运行、后台运行和销毁。 页面生命周期 单个页面的生命周期包括页面的加载、显示、初次渲染、再次渲染、隐藏和卸载。
3、什么是生命周期函数
生命周期函数是在特定时机会被自动触发的函数开发者可以在这些函数中编写相应的逻辑代码。在小程序中生命周期函数包括应用生命周期函数和页面生命周期函数。
4、生命周期函数的分类
4.1 应用生命周期函数 onLaunch(options): 当小程序启动时触发全局只触发一次。 onShow(options): 当小程序进入前台显示状态时触发。 onHide(): 当小程序进入后台状态时触发。
4.2 页面生命周期函数 onLoad(options): 当页面加载时触发一次生命周期中只会触发一次。 onShow(): 当页面显示时触发。 onReady(): 当页面初次渲染完成时触发。 onHide(): 当页面隐藏时触发。 onUnload(): 当页面卸载时触发。
5、应用的生命周期函数
应用的生命周期函数是指在整个小程序运行过程中会被触发的函数可以在 app.js 文件中定义。
// app.js
App({onLaunch: function(options) {// 小程序启动时触发},onShow: function(options) {// 小程序进入前台时触发},onHide: function() {// 小程序进入后台时触发}
});6、页面的生命周期函数
页面的生命周期函数是指在页面加载、显示、渲染和卸载等不同阶段会被触发的函数可以在每个页面的 pageX.js 文件中定义。
// pageA.js
Page({onLoad: function(options) {// 页面加载时触发},onShow: function() {// 页面显示时触发},onReady: function() {// 页面初次渲染完成时触发},onHide: function() {// 页面隐藏时触发},onUnload: function() {// 页面卸载时触发}
});以上是关于小程序生命周期的基本介绍开发者可以根据实际需求在不同的生命周期函数中编写相应的业务逻辑。
四、WXS脚本
1、WXS 脚本 - 概述
1.1 什么是 wxs
WXSWeiXin Script是小程序的一种脚本语言用于在 WXML 中对数据进行逻辑处理。它类似于 JavaScript但有一些特定的语法和限制。
1.2 wxs 的应用场景
WXS 主要用于处理小程序页面中的逻辑例如数据的计算、处理字符串等。它可以被用在 WXML 中进行数据绑定和逻辑运算。
1.3 wxs 和 JavaScript 的关系*
WXS 与 JavaScript 有相似之处但并不完全相同。WXS 主要用于小程序它的语法和能力受到一些限制使其更适合于小程序环境下的使用。
2、WXS 脚本 - 基础语法
2.1 内嵌 wxs 脚本
在 WXML 文件中可以使用 wxs 标签来嵌入 wxs 脚本。内嵌的 wxs 脚本可以直接在 WXML 中进行调用。
!-- pageA.wxml --
wxs modulem1var add function(a, b) {return a b;}module.exports.add add;
/wxsview{{ m1.add(1, 2) }}/view2.2 定义外联的 wxs 脚本
也可以将 wxs 脚本定义在外部文件使用 wxs 标签的 src 属性引入外联的 wxs 脚本。
!-- util.wxs --
var multiply function(a, b) {return a * b;
}
module.exports.multiply multiply;!-- pageB.wxml --
wxs src./util.wxs modulem2/wxsview{{ m2.multiply(3, 4) }}/view2.3 使用外联的 wxs 脚本
外联的 wxs 脚本可以在 WXML 中通过模块的方式调用。
!-- pageC.wxml --
wxs src/utils/util.wxs modulem3/wxsview{{ m3.multiply(5, 6) }}/view3、WXS 脚本 - WXS 的特点
3.1 与 JavaScript 不同
WXS 在语法和功能上有一些差异不同于 JavaScript。开发者在使用 WXS 时需注意其特殊的语法和限制。
3.2 不能作为组件的事件回调
WXS 不能作为组件的事件回调函数不能直接绑定在组件的事件属性上。
3.3 隔离性
WXS 具有独立的作用域不受页面的其他脚本影响。它的变量和函数不会与页面的 JavaScript 全局作用域发生冲突。
3.4 性能好
由于 WXS 是小程序专用的脚本语言它在小程序环境下运行更高效具有较好的性能。
以上是关于 WXS 脚本的基本介绍开发者可以根据实际需求使用 WXS 在小程序中进行数据处理和逻辑运算。
