案例:微信小程序wx.navigateTo传值和跳转

wx.navigateTo 非常好用,常用来做带值的跳转,笔者在开发微信小程序时遇到过一些问题,所以记录下来。

官方文档

wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

参数
Object object
在这里插入图片描述

一般这样用

需要跳转页面的js文件:

wx.navigateTo({
  url: 'test?id=1'
})

被跳转页面的js文件:

// test.js
Page({
  onLoad(option) {
    console.log(option.query)
  }
})

也可以这样用

直接写在wxml文件里:

        <navigator url='/pages/test/index'  >
          <button class="weui-btn" type="primary">{{msg_btn1}}</button>
        </navigator>

跳转到首页的问题

直接在里面写 /pages/index/index 并不能跳转到首页,跳转的方法:添加 open-type 属性,代码如下:

        <navigator url='{{bt1_url}}' open-type='reLaunch' >
          <button class="weui-btn" type="primary">{{msg_btn1}}</button>
        </navigator>

那么,open-type 的属性有哪些呢?如下所示:
在这里插入图片描述


作者:戴翔
电子邮箱:daixiangcn@outlook.com
简介:中华人民共和国公民,中国共青团员,CSDN博客专家,秦淮区疾控中心托管社会公益组织指南针工作室志愿者,创业公司研发中心负责人,在校大学生。


daixiangcn CSDN认证博客专家 后端开发工程师 产品体验官
中国公民,中共预备党员,CSDN博客专家,本科大四在读。江苏省第四届“互联网+”大学生创新创业大赛二等奖获得者,第二届、第三届微信小程序应用开发大赛全国三等奖、华东赛区二等奖项目作者,微信小程序《约车吗》、《庆云慈善会》、《锋云速检》项目工程师。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页