微信小程序（路由及组件跳页传参）

超、凢脫俗 2023-06-17 13:53 6阅读 0赞

## 课程大纲 ##

（1）API路由跳页传参  
（2）navigator导航组件跳页传参

## API路由跳页传参 ##

*  商品列表展示页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]  
    商品展示页编写  
    ![在这里插入图片描述][2019112910540126.png]  
    ![在这里插入图片描述][20191129105408959.png]  
    ![在这里插入图片描述][20191129105416681.png]  
    ![在这里插入图片描述][20191129105422457.png]  
    回到商城列表展示页，如果跳页时直接传参，会发现黄色警告，无法跳页  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][20191129105452105.png]

## 小程序事件传递参数 ##

*  小程序事件传递参数  
    在小程序中，给元素绑定事件不能直接传递参数，如果写成  
    ![在这里插入图片描述][20191129105510939.png]  
    正解：  
    ①给元素绑定自定义属性data-item=”\{ \{item\}\}”  
    ②在js中通过事件对象获取event.currentTarget.dataset.item

## API路由跳页传参 ##

*  所以接下来做下调整，添加自定义属性data-\*\*\*，然后在js中通过事件对象获取
 *  语法：event.currentTarget.dataset.自定义属性名  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  JS中通过event.currentTarget.dataset.item获取，然后拼接到url后面
 *  参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]  
    这里补充说明下路由跳转API的相关参数  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]  
    商城页面传参后在详情页接收参数  
    ![在这里插入图片描述][2019112910564614.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]

## navigator组件跳页传参 ##

*  除了使用路由API跳页传参外，使用导航组件navigator进行跳页时，也可以传参，直接往url里拼写即可。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]

## 完毕 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129105312789.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[2019112910540126.png]: https://img-blog.csdnimg.cn/2019112910540126.png
[20191129105408959.png]: https://img-blog.csdnimg.cn/20191129105408959.png
[20191129105416681.png]: https://img-blog.csdnimg.cn/20191129105416681.png
[20191129105422457.png]: https://img-blog.csdnimg.cn/20191129105422457.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129105443416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[20191129105452105.png]: https://img-blog.csdnimg.cn/20191129105452105.png
[20191129105510939.png]: https://img-blog.csdnimg.cn/20191129105510939.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019112910555680.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019112910561031.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191129105624689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[2019112910564614.png]: https://img-blog.csdnimg.cn/2019112910564614.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191129105655166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191129105705584.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191129105726867.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70