E企盈营销工具技术服务商 热线:4006-838-530

小程序页面链接

E企盈直播平台营销卖货系统

小程序里面的链接使用navigator组件(其有三个重要属性 url, open-type, hover-class)在html中使用a标签, a标签可以链接到网络中的任何地址而小程序中navigator只能应用于当前小程序内的链接跳转<navigator url=”http://www.baidu.com”>跳转A</navigator><navigator url=’test/t’>跳转B</navigator>第一个是无效的第二个能正确跳转, 需要注意的是: url中的页面不能是tabBar(底部菜单)中的页面但是如果open-type属性的值为switchTab, 则可以跳转到tabBar中的页面open-type属性取值:navigate对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 redirect对应 wx.redirectTo 的功能 switchTab对应 wx.switchTab 的功能 reLaunch对应 wx.reLaunch 的功能1.1.0navigateBack对应 wx.navigateBack 的功能1.1.0exit退出小程序,target=”miniProgram”时生效2.1.0open-type属性的值默认为navigator, 跳转后, 可以从当前页面返回上级页面(左上角有一个返回按钮)open-type属性的值为redirect属性, 打开新页面时, 但会关闭原页面(即不能从 当前页面 返回到 上级页面)<navigator open-type=’redirect’ url=’test/t’>跳转</navigator>注意: url中的页面不能加上后缀, 如上面的’test/t’ 表示的是test下面的t.wxml页面 (不能写成:test/t.wxml)在页面跳转时可以传递参数(不要写成这样: name=”张三”, 应写成如下:)<navigator  url=’test/t?id=111&name=张三’>跳转</navigator>示例:<navigator  url=’test/t?id=111&name=张三’ hover-class=’hoverClass’>跳转</navigator>    <!–链接1–><navigator  url=’test/t?id=123&name=小明’>跳转</navigator>    <!–链接2–>Page({  data: {},  onLoad: function(datas) {    console.log(datas);  }})如果点击链接1, 则datas的值是{id: “111”, name: “张三”}, 点击链接2, 则datas的值是{id: “123”, name: “小明”}wx.navigateTo此Api也可以完成页面跳转, 与navigator(open-type=’navigator’)相同<button size=’mini’ bindtap=”navigator”>跳转</button>navigator : function() {    wx.navigateTo({      url: ‘test/t?id=100&user=xiaoming’,      success : function(e) {        console.log(e.errMsg);      }    })  }wx.redirectTo此Api也也可以完成页面跳转, 与navigator(open-type=’redirect’)相同, 操作与上相同wx.navigateBack此Api用于返回, 从当前页面返回到上级页面(根据如下参数)Page({  data: {  },  back : function() {    wx.navigateBack({      delta : 1            // 值为1, 则是返回上一级, 值为2就返回上两级…    })  }})如果delta的值为1, 则可以不写dellta属性: wx.navigateBack({})如果delta的值超过了其能返回的总级数, 则会返回首页 navigateTo, redirectTo 只能打开非 tabBar 页面。switchTab 只能打开 tabBar 页面(跳转到tabBar页面后, 不能返回, 相当open-type=’switchTab’和’redirect’两个值的效果)。reLaunch 可以打开任意页面。调用页面路由带的参数可以在目标页面的onLoad中获取。 hover-class是点上去后的样式(点击态样式), 在样式文件中可设置其表现(等同于一个class的值)hover-class的实现过程是: 当点击后, hover-class的值会添加进class的值比如hover-class=’active’ , class=’static’, 当点击这个navigator组件时, class的值就会变为class=’static active’两个值在样式文件中, 书写.active{} 和.static{}时要注意样式优先级, 比如两个样式都表示颜色, 则应该把.active{}放在.static后面

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序页面链接
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏