本文实例讲述了微信小程序学习笔记之跳转页面、传递参数获得数据操作。分享给大家供大家参考，具体如下：

前面一篇介绍了微信小程序表单提交与服务器端编程语言(专业超文本预处理器的缩写)后台数据交互处理。现在需要实现点击博客标题或缩略图，跳转到博客详情页面。

开始想研究一下微信小程序的网络视图组件跳转传参，把网页嵌入到小程序，结果看到官方文档的一句话打消了念头，因为没有认证.

【方法一使用领航员组件跳转传参】

前台博客列表页面data.wxml:(后台数据交互参考上一篇)

view wx : for=' { { artinfo } } ' wx : for-item=' artinfo ' view navigator URL='/pages/detial/detial？article _ id={ { artinfo。article _ id } } ' { { artinfo。article _ title } }/navigator/view navigator URL='/pages/detial/detial？article _ id={ { artinfo。article _ id } } ' image src=' http : { { artin fo。缩略图} } '/图像/导航器/视图前台博客详情页面详细信息。js:

页面({ onLoad:函数（选项){//选项3360页面跳转所传的参数变量=这个wx。请求({ URL : ' https://www。msllws。top/Getdata/detial '，data : { ' article _ id ' :选项。article _ id }，method: 'POST '，header : { ' Content-Type ' : ' application/x-www-form-URL encoded ' }，success : function(RES){ if(RES . data。state==1){那} } }) })前台博客详情页面detail.wxml:

查看{ { artinfo。artinfo。article _ title } }/查看视图——3354——3543543543543543543543543543354354354354335435435433333333———/查看富文本节点=' { { artinfo。artinfo。article _ content } } '/rich-text后台获取博客内容接口：(tp5)

public function detial(){ $ arr=array(' state '=0，' msg'=' '，' data '=array())；$ article _ id=$ _ POST[' article _ id ']；if($ article _ id){ $ whe[' article _ id ']=$ article _ id；$ artin fo=db(' article ')-field(' article _ title `，` article _ content `)-where($ whe)-find()；if($ artin fo){ $ arr[' state ']=1；$ arr[' msg ']=' success '；$ arr[' data ']=$ artin fo；}else{ $arr['msg']='没有信息；} }else{ $arr['msg']='参数错误；} echo JSON _ encode($ arr)；死去；}实现效果如下：

【方法二使用wx。navigattetoapi跳转传参】

前台博客列表页面data.wxml:

（数据-xxx:自定义参数属性，捕手：绑定点击事件)

view wx : for=' { { artin fo } } ' wx : for-item=' artin fo ' view data-artin fo _ id=' { { artin fo。article _ id } }“catch tap=”show detail“{ artin fo。article _ title } }/view data-article _ id=' { { artin fo。article _ id } } ' catch tap=' show detail ' image src=' http : { { artin fo。缩略图} } '/图像/前台博客列表页面data.js:

page({ OnLoad : function(){ var=this wx。请求({ URL : ' https://www。msllws。top/Getdata '，header RS : { ' Content-Type ' : ' application/JSON ' })，success 3360 function(RES){即。setdata({ artin fo : RES . data })})}，showDetial 3360函数(e){ var article _ id=1wx。navigateto({ URL : '/page/detial/detial？article_id=' article_id }) }})其他与方法一相同，可实现与方法一相同跳转传参。

希望本文所述对大家微信小程序开发有所帮助。