程序页面获取链接实现从小程序外部跳转指定页面的方法

why 607 2024-08-09

小程序里面的链接使用navigator组件

小程序页面获取链接实现从小程序外部跳转指定页面的方法

在html中使用a标签, a标签可以链接到网络中的任何地址

而小程序中navigator只能应用于当前小程序内的链接跳转

1

2

3

<navigator url="http://www.baidu.com">跳转A</navigator>

 

<navigator url=&#39;test/t&#39;>跳转B</navigator>

第一个是无效的

第二个能正确跳转, 需要注意的是: url中的页面不能是tabBar(底部菜单)中的页面

但是可以通过open-type属性设置

redirect属性, 打开新页面时, 关闭原页面(在新页面, 不能再返回到原页面)

1

<navigator redirect url=&#39;test/t&#39;>跳转</navigator>

跳转时并传递参数(不用加上引号, 自动会加上双引号, 否则就多余一个引号, 因此直接写: id=111&name=张三):

1

<navigator  url=&#39;test/t?id=111&name=张三&#39;>跳转</navigator>

通过onLoad事件获取url参数, 在加载这个页面时自动将参数放入

1

2

<navigator  url=&#39;test/t?id=111&name=张三&#39; hover-class=&#39;hoverClass&#39;>跳转</navigator>    <!--链接1-->

<navigator  url=&#39;test/t?id=123&name=小明&#39;>跳转</navigator>    <!--链接2-->

1

2

3

4

5

6

7

8

Page({

  data: {

 

  },

  onLoad : function(datas) {

    console.log(datas);

  }

})

如果点击链接1, 则datas的值是{id: "111", name: "张三"}, 点击链接2, 则datas的值是{id: "123", name: "小明"}

hover-class是点上去后的样式

wx.navigateTo

此Api也可以完成页面跳转, 与navigator(无redirect属性)相同

<button size=&#39;mini&#39; bindtap="navigator">跳转</button>

1

2

3

4

5

6

7

8

navigator : function() {

    wx.navigateTo({

      url: &#39;test/t?id=100&user=xiaoming&#39;,

      success : function(e) {

        console.log(e.errMsg);

      }

    })

  }

wx.redirectTo

此Api也也可以完成页面跳转, 与navigator(有redirect属性)相同, 操作与上相同

wx.navigateBack

此Api用于返回, 从当前页面返回到上级页面(根据如下参数)

1

2

3

4

5

6

7

8

9

10

Page({

  data: {

 

  },

  back : function() {

    wx.navigateBack({

      delta : 1            // 值为1, 则是返回上一级, 值为2就返回上两级...

    })

  }

})

如果dellta的值为1, 则可以不写dellta属性: wx.navigateBack({})

如果dellta的值超过了其能返回的总级数, 则会返回首页



版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:这篇文章教你快速完成微信小程序开发并不难
下一篇:高效管理您的附件——附件管理插件
相关文章

 发表评论

暂时没有评论,来抢沙发吧~