关闭

微信小程序-页面跳转与参数传递

时间: 2020-02-10阅读: 449标签: 小程序

微信小程序页面跳转方式有很多种,可以像html中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转。



navigator标签跳转

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

navigator主要参数



通过路由函数进行跳转

1、打开新页面(wx.navigateTo函数) index.js页面

toPage(){
	wx.navigateTo({
		url:‘/pages/index/index’
	})
}
页面方法
打开新页面调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
页面重定向调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
页面返回调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack"/>
Tab 切换调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/>
重启动调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

参数传递

参数传递只需要在连接后面加上参数即可

toDemo:function(){
	wx.navigateTo({
		url: 'index?id=1',
	})
}

接收参数

/**
* 生命周期函数--监听页面加载
* 通过options直接接收参数
*/
onLoad: function (options) {
	console.log(options.id)
},
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8939

关闭

手把手教你写个小程序定时器管理库

后台的定时器积累得越多,小程序就越卡,耗电量也越大,最终导致程序卡死甚至崩溃。特别是团队开发的项目,很难确保每个成员都正确清理了定时器。因此,写一个定时器管理库来管理定时器的生命周期,将大有裨益。

小程序多余文本省略号显示

如何在 wxml 页面中截取数据?取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的。那还有 css 啊,不一样可以做到吗?但是个人觉得 css 复用性太差,暂不考虑。

小程序开发的一些细节,你有注意吗?

我认为小程序是一个没有什么技术含量的东西,特别是现在有了组件库,而且小程序生态不断完善的情况下,只要对着文档慢慢写就好,就是时间的问题。然后这里也不是教大家怎么去写程序之类的,而是本人在经历过后的一些小建议

小程序--人脸识别功能(百度ai)

接入流程:1. 按照文档获取AppID、API Key、Secret Key,进行Access Token(用户身份验证和授权的凭证)的生成,2. 选择人脸识别-->人脸检测,人脸识别接口分为V2和V3两个版本,确认在百度云后台获得的是V2还是v3版本接口权限。

小程序websocket心跳库——websocket-heartbeat-miniprogram

在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库。如下:在2020年也就是今年初,同事建议说可以考虑兼容一下小程序,心想也挺好的。

微信小程序开发注意指南和优化实践

转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行。

微信小程序与h5的区别

小程序面世以来,尽管微信团队做了很多关于小程序的普及功课,但是还是有很多人不太理解,最多的误解就是把它等同于H5。小程序由于刚推出来时开放的能力十分有限,所以在功能展示上会让普通用户感觉和H5一样,并没有什么特别之处

微信小程序版本自动更新

当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间

支付宝小程序个人开发者,但暂未开放支付接口

支付宝小程序今日正式面向个人开发者开放公测。这是继微信之后,业内第2家面向个人开发者开放的小程序平台。有开发能力的个人用户可访问支付宝小程序平台,扫码验证个人身份以后即可开始支付宝小程序账号申请并进行代码开发。

微信小程序商城如何提高成交率

小程序商城早已经是每位商户和消费者广为人知的一类在线网上商城,和别的购物商城相比较,它的操作步骤更为便捷,同时带有好多的数据流量基础,商户还可以省掉引流过来的环节,只需把自已的营销推广业务加强就可以

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!