首页登陆欢迎您!
首页登陆 > 运维知识 > 微信小程序教程系列之页面跳转和参数传递_javascript技巧_脚本之家

微信小程序教程系列之页面跳转和参数传递_javascript技巧_脚本之家

时间:2019-12-15

Wechat小程序 页面跳转及数量传递详明

至于页面包车型大巴跳转,Wechat小程序提供了3种艺术:

相通 Android 的 Intent 传值,Wechat小程序也长期以来能够传值:

方法一:

比如:wxml 中写了二个函数跳转:

使用API wx.navigateTo()函数

 已完成任务 {{finishedMissionCount}}

示例:

在 js 代码中写:个中,url 是跳转的相对路径,?问号后边加的是参数,以 key-value 的艺术,

先是先新建多少个test页面

此间传了个 value 为 2 的参数过去

Wechat小程序的新建页面 —— 微信小程序教程种类

//跳转到已结束任务列表页jumpToOverMissionList:function(){ wx.navigateTo({ url:"mission/missionList/missionList?type=2" });},

index.wxml:

下一场在 missionList.js 中的 OnLoad(卡塔尔(قطر‎方法得到值:option.type 就能够赢得了

在index.wxml新建三个button组件,并使用bindtap事件绑定一个函数

onLoad: function { this.setData({ type:option.type, }); console.log;}

index.js:

页面跳转

在index.js中的Page函数内部,增添changeToTest 函数,函数里面使用wx.navigateTo,写上急需跳转的页面,里面传播的是二个对象,对象内使用url属性,对应的就是急需跳转的页面包车型客车路线(注意:那是吸收接纳的是贰个相对路线,况兼页面无需利用.wxml后缀)

前日尝试了下小程序点击页面跳转,有二种方法:navigator 组件跳转和增进点击事件跳转。

运行:

navigator 组件跳转

方法二:

和 a 标签跳转差不离,给 navigator 增多要跳转到的 url 地址就能够(这里须求在意下,大家在应用Wechat web 开垦者工具按 enter 自动补全时生成的组件有错,navigator 闭合标签的“/” 地点应该是在 navigator 前,而自动生成的是,引致编写翻译报错,相近的还应该有 image 组件等)

使用API wx.redirectTo()函数

 点击跳转到 logs 页面

示例:

为组件绑定跳转事件

第生机勃勃先新建三个test页面

index.wxml 中为 image 绑定事件

Wechat小程序的新建页面 —— Wechat小程序教程体系

index.js 文件中加多跳转格局:

index.wxml:

tz: function(){ wx.navigateTo({ url: '../logs/logs', success: function{ // success }, fail: function() { // fail }, complete: function}

在index.wxml新建贰个button组件,并行使bindtap事件绑定二个函数

感激阅读,希望能协理到我们,感激我们对本站的支撑!

index.js:

运行:

wx.navigateTo的区别:

上一篇:轻松理解JavaScript闭包_javascript技巧_脚本之家 下一篇:没有了