小程序页面跳转和跳转时的数据传递

本文介绍微信小程序页面跳转的两种方式及页面跳转时的数据传递。

跳转的数据传递

类似 Android 的 Intent 传值,微信小程序也一样可以传值:
例如:wxml 中写了一个函数跳转:

<view class="itemWeight" catchtap="jumpToOverMissionList">
  <view class="textStatus">已完成任务</view>
  <view class="containVertical textNum">{{finishedMissionCount}}</view>
</view>

在 js 代码中写:其中,url 是跳转的相对路径,?问号后面加的是参数,以 key-value 的方式,
这里传了个 value 为 2 的参数过去

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

然后在 missionList.js 中的 OnLoad()方法得到值:option.type 就可以得到了

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

页面跳转

今天尝试了下小程序点击页面跳转,有两种方式:navigator 组件跳转和添加点击事件跳转。

navigator 组件跳转

a 标签跳转差不多,给 navigator 添加要跳转到的 url 地址即可(这里需要注意下,我们在使用微信 web 开发者工
具按 enter 自动补全时生成的组件有错,navigator 闭合标签的“/” 位置应该是在 navigator 前,而自动生成的是
<navigator/>,导致编译报错,同样的还有 image 组件等)

<span style="font-size:14px;">
  <navigator url="../logs/logs">点击跳转到 logs 页面</navigator>
</span>

为组件绑定跳转事件

index.wxml 中为 image 绑定事件

<span style="font-size:14px;"> 
  <image src="{{item.imgsrc}}" bindtap="tz"></image>
</span>

index.js 文件中添加跳转方法:

<span style="font-size:14px;">tz: function(){
  wx.navigateTo({
    url: '../logs/logs',
    success: function(res){
    // success
    },
    fail: function() {
     // fail
    },
    complete: function() {
    // complete
    }
  })
}</span>

原文链接:http://layjoy.space/2017/01/16/wechat-3/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 13,741评论 0 3
  • 转载请注明出处, 谢谢! (~ o ~)Y 1月9日,也就是今天,微信推出的“小程序”正式上线。“小程序”是一种无...
    Jimmy_P阅读 14,448评论 52 273
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,315评论 25 708
  • 我是日记星球的114号星宝宝,这是我的第74篇原创日记。 我以前对自己很多地方都不接纳,辟如,长相,身材,嗓音,家...
    书香天使阅读 286评论 0 0
  • 自在 胡99 2017-03-07 醴陵体育路有座庙,名叫"觉华寺"我每曰从办公室到工地,从工地到...
    99阅读 649评论 0 4